コーポレートサイトを作るときに必ず求められるのが「お問い合わせフォーム」ですが、フロントエンドの人がPHPでプログラムを組むのはとても大変なこと。簡易的なメールフォームなら、Wordpressの「Contact Form 7」でサクッと簡単実装しちゃいましょう。
この記事でつくるメールフォーム
例があるとわかりやすいと思うので、今回は次のようなシンプルなメールフォームをつくってみます！
完成イメージ
HTMLコード
|
1 |
<div class="contact-form"> <div class="row"> <div class="head"> <p>お名前</p> <span class="required">必須</span> </div> <div class="body"> <input class="input" type="text" placeholder="お名前" required> </div> </div> <div class="row"> <div class="head"> <p>ふりがな</p> <span class="required">必須</span> </div> <div class="body"> <input class="input" type="text" placeholder="ふりがな" required> </div> </div> <div class="row"> <div class="head"> <p>電話番号</p> <span class="required">必須</span> </div> <div class="body"> <input class="input" type="tel" placeholder="電話番号" required> </div> </div> <div class="row"> <div class="head"> <p>メールアドレス</p> <span class="required">必須</span> </div> <div class="body"> <input class="input" type="email" placeholder="メールアドレス" required> </div> </div> <div class="row"> <div class="head"> <p>お問い合わせ内容</p> </div> <div class="body"> <textarea class="textarea" placeholder="お問い合わせ内容"></textarea> </div> </div> <div class="submit-btn"> <input class="submit" type="submit" value="送信"> </div> </div> |
情的HTMLをWordpressで表示できるようにする
まずはhtmlファイルをphpファイルに変換します。いわゆるワードプレス化ですね。とは言え、Contact Form 7でお問い合わせフォームを設置することだけが目的ならそんなに厳密にやらなくても大丈夫。サイトがきちんと表示される所までやればOKです！初めての方は下記の記事が参考になるかも。
HTMLで作成された既存のウェブサイトをオリジナルのテーマ(テンプレート)にする手順。専門的な難しい用語は使わず、できるだけシンプルにわかりやすく説明した記事です。デザイナーやコーダーの方々が初めてWordpress構築の依頼を受けたとき[…]
Contact Form 7をダウンロード
ダッシュボードの「プラグイン」から「新規追加」→「Contact Form 7」で検索してダウンロード、有効化をします。すると、ダッシュボードに「お問い合わせ」というメニューが追加されるので開いてみましょう。デフォルトで「コンタクトフォーム１」というものができていると思いますが、このデフォルトのコンタクトフォーム１は使わないので削除してOK◎。
フォームのテンプレートをつくる
メニューからパーツを選んでフォームタグを生成する
つくりたいフォームに合わせてパーツを選び、名前やデフォルト値、任意のクラス名などを入れて「タグを挿入」をクリックします。プレーンテキストなら「テキスト」のボタンを、電話番号なら「電話番号」のボタンを選んでパーツを生成します。見たままに操作すれば良いので簡単ですよね！
フォームタグ生成画面の解説
▼プレーンテキストのinputをつくる画面。各項目の説明は下の表を参照してください。テキスト以外のフォームタグをつくるときも大体同じなので割愛しますね〜。ちなみに、送信ボタンのタグを生成するときは、「ラベル」という項目に送信ボタンのテキスト（例：送信）を入力します。
生成されるフォームタグの解説
- 項目タイプ
- チェックを入れると必須項目になり、”required”のコードが出力されるようになります。
- 名前
- text-***など、自動的に出てくるのでそのまま使ってOK。ただし他のパーツと被らないように。
- デフォルト値
- 「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、placeholderの値として反映されます。
- Akismet
- スパム対策のプラグインAkismetと連携するときにチェックを入れます。
- ID属性
- 項目に任意のID名を追加できます。
- class属性
- 項目に任意のclass名を追加できます。例では”input”というクラス名をつけています。
各項目を入力して「タグを挿入」すると、下の画像▼のようなフォームタグが出来上がります。ちなみに、一度つくると編集できないので変更したい時はつくり直してくださいね！
サンプルで生成したフォームタグ
サンプルのメールフォームでは、下の画像のように6つのフォームタグを生成しました。ここで作成した「text-***」や「email-***」という名前は、次のメール設定でメールタグとして使うので必ず別々の番号や名前で登録するようにしてくださいね！
HTMLとフォームタグを組み合わせる
フォームタグが完成したら、それぞれのタグをHTMLに組み込んでいきます。私はいつもSublime Textで編集してからワードプレスの方にコピペするようにしてます。その方がバックアップもとれて安心。下の画像のようにコードを貼り付けて、最後に「保存」をしたら見た目は完成です！
HTMLにフォームタグを組み込んだコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<div class="contact-form"> <div class="row"> <div class="head"> <p>お名前</p> <span class="required">必須</span> </div> <div class="body"> [text* text-842 class:input placeholder "お名前"] </div> </div> <div class="row"> <div class="head"> <p>ふりがな</p> <span class="required">必須</span> </div> <div class="body"> [text* text-843 class:input placeholder "ふりがな"] </div> </div> <div class="row"> <div class="head"> <p>電話番号</p> <span class="required">必須</span> </div> <div class="body"> [tel* tel-766 class:input placeholder "電話番号"] </div> </div> <div class="row"> <div class="head"> <p>メールアドレス</p> <span class="required">必須</span> </div> <div class="body"> [email* email-854 class:input "メールアドレス"] </div> </div> <div class="row"> <div class="head"> <p>お問い合わせ内容</p> </div> <div class="body"> [textarea textarea-995 class:textarea placeholder "お問い合わせ内容"] </div> </div> <div class="submit_btn"> [submit class:submit "送信"] </div> </div> |
サンプルフォームのCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
@charset "UTF-8"; * { box-sizing: border-box; } /* form */ .contact-form { width: 550px; margin: 0 auto; padding: 40px 30px 30px; border: 1px solid #9c9c9c; } .contact-form .row { display: table; position: relative; width: 100%; padding-bottom: 16px; } .contact-form .row + .row { border-top: 1px solid #cfcfcf; padding-top: 16px; } .contact-form .row .head { position: relative; display: table-cell; width: 170px; } .contact-form .row .head p { display: inline-block; margin: 0; font-size: 0.9em; color: #333; } .contact-form .row .head .required { display: inline-block; padding: 2px 4px 1px 3px; border: 1px solid #ff0000; border-radius: 2px; font-size: 11px; color: #ff0000; } .contact-form .row .body { display: table-cell; } .contact-form .row .input { position: relative; width: 230px; padding: 10px 10px 8px; border: 1px solid #cfcfcf; border-radius: 4px; background: #fff; font-family: inherit; font-size: 13px; vertical-align: top; } .contact-form .row .textarea { width: 300px; height: 150px; padding: 10px 10px 8px; border: 1px solid #cfcfcf; border-radius: 4px; background: #fff; font-family: inherit; font-size: 13px; vertical-align: top; } .contact-form .submit_btn { margin-top: 22px; text-align: center; } .contact-form .submit { width: 200px; height: 42px; line-height: 40px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 2px solid #071d3e; border-radius: 6px; background: #094bab; font-size: 16px; color: #fff; } .contact-form .submit:hover { opacity: 0.8; } |
メールの設定をする
お問い合わせフォームからのメールの送信先や内容、自動返信メールの設定をします。ここのメール設定画面では、下の画像のように[ フォームタグの名前 ]という形でメールタグを使用すると、フォームに入力された値をメール内容などに反映することができます。
お問い合わせメール送信先（管理者宛）の設定
「送信先」はお問い合わせを受け付ける「管理者」のメールアドレス。送信元はサイト名・お問い合わせ用のメールアドレスなどで設定。ここのアドレスは、ワードプレスを設置しているサイトのドメインと同じものを入力しないとエラーが出ますが、エラーが出ている状態でも問題なく送信できます。題名やメッセージ本文はお好きなように変更してくださいね〜。
自動返信メールの設定
お問い合わせをしてくれた人へ、お問い合わせ内容の確認として送る自動返信メールを設定したい時は、「メール(2)」という部分を使います。こちらも内容はお好きなように変更できます。ここで注意したいのは、送信先に設定するメールタグ[email-***]は、フォームテンプレート作成時に入力必須項目(*)にしていないと「不正なメールボックス構文が使用されています。」というエラーが出ます。メールアドレスは必ず入力されていないと自動返信メールの送信先がわからないので、当たり前といえば当たり前ですね。。
お問い合わせフォームを表示する
「お問い合わせ」の固定ページをつくってショートコードをコピペするだけなのでとっても簡単です。
ショートコードは、フォーム一覧画面▼やフォーム編集画面の上部に表示されています。
トップページに表示したい場合など
LPのようなペライチのサイトでコンタクトフォームをつかう場合は、home.phpやfront-page.phpなどに直接書き込んだ方が早いですね。フォームを表示したい場所に下のように記述すればOKです！
|
1 2 3 |
<section class="contact"> <?php echo do_shortcode('[contact-form-7 id="280" title="contact form"]'); ?> </section><!-- end.contact --> |
はい、これで完成！あとはテスト送信して問題なく送れるか、表示されてるかをチェックしましょう～。文字化けしてしまうときは、その箇所をダブルクオテーション” “で囲むと直ったりしますよ！
WordPressで企業ホームページやメディアサイトを作成するとき、お問い合わせフォームの存在は欠かせません。WordP…
コピペで簡単！その他のテンプレート
チェックボックスやラジオボタン、セレクトなどをCSSでカスタマイズをしたい方へ、いくつかテンプレートを作ってみたので次の記事でコードを参考にしてみてください！
Contact Form 7（コンタクトフォーム７）でお問い合わせページを作るとき、もっと簡単に、オシャレにカスタマイズできるようにテンプレートを作ってみました。お問い合わせフォームのカスタマイズって、慣れていないと結構時間がかかって面倒[…]
このページについて 当ブログの記事「【Contact Form 7】お問い合わせフォームのカスタマイズ用テンプレート作りました。」でご紹介している、Contact Form 7で使えるお問い合わせフォームテンプレート[3]のデモページ[…]
