はじめに
WordPressのコンタクトフォームは、今回紹介するContactForm7や、MW WP Formといったプラグインを使って導入することが多いです。
ContactForm7はシンプルな作りでカスタマイズ性もあるのでよく使われている印象があります。まずはこちらのプラグインを使ってコンタクトフォームを作ってみます。
インストールはGUI操作
ContactForm7は、管理者ページのGUIを使ってインストールします。
プラグイン>新規追加>使いたいプラグインを検索で検索します。
インストールしたら、忘れずに有効化しましょう。
インストールすると、サイドバーにお問い合わせが追加されます。
これがContactForm7になります。
コンタクトフォーム作成
作成はとてもシンプル。
- 新規追加でコンタクトフォームを作成
- タイトル、フォームタブ、メールタブ、メッセージタブを編集
- 保存をクリックで保存
-
このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてくださいと表示される。
[contact-form-7 id="7" title="お問い合わせ"]
記載のとおり、このショートコードを投稿ページや固定ページに貼り付ければ、コンタクトフォームが生成される仕組み。
テーマファイルのPHPからショートコードを呼び出す
オリジナルのテーマファイル内で呼び出したいときは、このように書きます。
先ほどのショートコードの場合、こう書きます。
<?php echo do_shortcode('[contact-form-7 id="7" title="お問い合わせ"]'); ?>
フォームの編集
問い合わせフォームを新規作成すると、デフォルトで以下のフォームが作成されます。
<label> 氏名
[text* your-name] </label>
<label> メールアドレス
[email* your-email] </label>
<label> 題名
[text* your-subject] </label>
<label> メッセージ本文 (任意)
[textarea your-message] </label>
[submit "送信"]
上の氏名の部分でいうと、
<label> 氏名と</label>の間に大括弧で[text* your-name]が書かれています。
[text* your-name]はページ生成時に、氏名入力用のテキストフォーム用のコードに置換されて表示されます。
実際に生成すると、以下のように置換されます。(分かりやすいよう改行入れてます)
<label> 氏名
<br />
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" />
</span>
</label>
idやclassの付与
独自のCSSで見た目を変更させたい場合があると思います。
以下のようにhtml_idやhtml_classを付与することで、idやclassを追加できます。
[text* your-name id:org-id-name class:org-class-name class:org-class-shimei]
こうなります。
<label> 氏名
<br />
<span class="wpcf7-form-control-wrap" data-name="your-name">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" />
</span>
</label>
その他便利そうな機能リンク
公式ページの内容が充実しており、プラグインの使い方が分かりやすく紹介されております。
これは使うだろう、と思ったものを紹介します。
承諾チェックボックス(acceptance)