【WordPress】プラグインの実装 メールフォーム
こんばんはdaissh04です。
だいぶWordPressの記事も増えてきました、今回も学習した内容の備忘録として、記事を書きたいと思います。
話はそれますが、web制作の学習は具体的な目標を設定するに限りますね。こんなwebサイトを作りたい、それを模写するだけでもテンション上がります。
私はLIGというweb制作会社さんの企業ページを密かに模写してテンションあげてます(笑)
では本題に入ります。今回はメールフォームをプラグインを用いて作成するやり方を紹介します。
Contact Form7をインストール
こちらは日本人の方が開発されたプラグインでダウンロード数も高く、信頼度はかなり高いです。
このような問い合わせフォームを作成します。
管理画面のプラグイン→新規追加→Contact Form7で検索し、インストールしてください
このおしゃれな和モダンなデザイン、日本人っぽいですよね!
インストール完了するとメインナビゲーションメニューに「問い合わせ」が表示されます
問い合わせのコンタクフォームに
[contact-form-7 id=" 数値" title="コンタクトフォーム 1"]
と表示されています。こちらをコピーし、固定ページに作成した問い合わせページにこれを貼り付けてください。
このような感じですね。
この時点で問い合わせページにアクセスすればデフォルトで問い合わせフォームがすでに表示されているはずです
送信ボタンを押せばメッセージも出てきます。
フォームのカスタマイズ
デフォルトのデザインでは物足りないので、レイアウトを変更して見ましょう
管理画面→問い合わせ→コンタクトフォームをクリックします
<div class="contactBlock">
<dl>
<dt>お名前 (必須)</dt>
<dd>[text* your-name]</dd>
</dl>
<dl>
<dt>メールアドレス (必須)</dt>
<dd>[email* your-email]</dd>
</dl>
<dl>
<dt>題名</dt>
<dd>[text your-subject]</dd>
</dl>
<dl>
<dt>メッセージ本文</dt>
<dd>[textarea your-message]</dd>
</dl>
<div class="btns">[submit "送信"]</div>
</div>
このようなhtml文が表示さています。
挿入したいタグをを選択すると、それぞれの項目で詳細設定が可能です。
例えば
・メールアドレス
・URL
・電話番号
・テキストエリア
などを挿入することがあります。
それぞれ目指す形を目指して色々触って見てください。
それでは今後ともよろしくお願いいたします!