【WordPress】プラグインの実装 メールフォーム

こんばんはdaissh04です。

だいぶWordPressの記事も増えてきました、今回も学習した内容の備忘録として、記事を書きたいと思います。

 

話はそれますが、web制作の学習は具体的な目標を設定するに限りますね。こんなwebサイトを作りたい、それを模写するだけでもテンション上がります。

私はLIGというweb制作会社さんの企業ページを密かに模写してテンションあげてます(笑)

 

では本題に入ります。今回はメールフォームをプラグインを用いて作成するやり方を紹介します。

 

Contact Form7をインストール

こちらは日本人の方が開発されたプラグインでダウンロード数も高く、信頼度はかなり高いです。

f:id:daissh04:20200328014942p:plain

このような問い合わせフォームを作成します。

管理画面のプラグイン→新規追加→Contact Form7で検索し、インストールしてください

 

f:id:daissh04:20200328015859p:plain

このおしゃれな和モダンなデザイン、日本人っぽいですよね!

 

インストール完了するとメインナビゲーションメニューに「問い合わせ」が表示されます

問い合わせのコンタクフォームに

[contact-form-7 id=" 数値" title="コンタクトフォーム 1"]

と表示されています。こちらをコピーし、固定ページに作成した問い合わせページにこれを貼り付けてください。

f:id:daissh04:20200328020958p:plain

 

このような感じですね。

この時点で問い合わせページにアクセスすればデフォルトで問い合わせフォームがすでに表示されているはずです

 

送信ボタンを押せばメッセージも出てきます。

 

フォームのカスタマイズ

デフォルトのデザインでは物足りないので、レイアウトを変更して見ましょう

管理画面→問い合わせ→コンタクトフォームをクリックします

 

<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

・電話番号

・テキストエリア

ラジオボタン

などを挿入することがあります。

 

それぞれ目指す形を目指して色々触って見てください。

それでは今後ともよろしくお願いいたします!