前回の TIPS では投稿、固定ページの設定方法を紹介しました。
今回は WordPress と Contact Form 7 を使ってお問い合わせフォームを実装します。
HTML、CSSも含めた設定方法、カスタマイズ方法をまとめましたので実際にフォームをカスタマイズしてみましょう。
動画解説
準備中
1. Contact Form 7 について
WordPress の使い方② テーマ、プラグイン解説で紹介した Contact Form 7 を使用すれば簡単にお問い合わせフォームを実装できます。
Contact Form 7 をインストールし有効化するとダッシュボードのタブにお問い合わせの欄が追加されます。
お問い合わせタブのコンタクトフォーム画面ではお問い合わせフォームのタイトル、ショートコードが確認できます。
こちらで確認できるショートコードを投稿や固定ページのショートコードブロックに張り付けることでお問い合わせフォームが使用できるようになります。
2. Contact Form 7 の使用方法
コンタクトフォーム画面の新規追加をクリックするとフォーム内の要素を編集する画面に移ります。
2-1.フォームタブでできること
Contact Form 7 のフォームタブではコンタクトフォーム内の要素としてこれらの要素が使用できます。
- テキスト
- メールアドレス
- URL
- 電話番号
- 数値
- 日付
- テキストエリア
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承諾確認
- クイズ
- ファイル
- 送信ボタン
フォームを編集する部分には、あらかじめ
- 名前
- メールアドレス
- 題名
- メッセージ本文
の項目が入力されています。
集客用途のお問い合わせフォームでなければこのまま保存をクリックしても問題ありません。
フォーム内では HTML でのコーディングが出来ますので、ある程度見た目を整えることも可能です。
フォームを挿入したい場所ににカーソルを合わせて、フォームのテンプレートボタンをクリックすると詳細入力画面が開きます。(画像の場合、<td>ここに合わせる</td>)
詳細入力画面では
- 必須項目
- 名前
- デフォルト値
- ID属性
- クラス属性
が設定できます。
2-2.メールタブでできること
メールのタブではお問い合わせ内容を受け取るメールアドレスやその内容の設定、お客様への自動返信メールが設定できます。
会員登録フォームであればログイン URL の案内等を自動返信メールとして設定する事で、業務を自動化することができます。
フォームタブで要素を追加した場合、画像の赤枠内に追加されていきます。
要素がメッセージ本文などに入っていない場合、送信されるメールには要素が記載されません。
また、フォームタブでファイルを選択した要素はファイル添付内に記載が必要です。
自動返信メールの設定はメール (2)にチェックを入れると作成できるようになります。
初期設定のままでは問い合わせ内容がそのまま送り返されるだけですので、返信までにかかる日数や、自動返信メールであることを記載しておくとお客様にとってわかりやすいメールになります。
3. Contact Form 7 でフォームを実際に作ってみる
ここからは実際に Contact Form 7 をカスタマイズしていきます。
画像のように PC 表示では項目とフォームが横並び、スマホ表示では縦並びになるレスポンシブなフォームを作成します。
作成項目は以下の通りです
- 氏名
- フリガナ
- 電話番号
- アドレス
- お問い合わせ内容
- プライバシーポリシーの確認
3-1. HTML の編集
まずは下のコードをコピーしてフォームに張り付けてください。
<div class="contact-area">
<div class="form-container">
<table class="table-res-form">
<tr><th>氏 名 <span style="color:red">*</span></th>
<td>[text* co7-name placeholder "田中 太郎"]</td>
</tr>
</table>
</div>
<div class="form-container">
<table class="table-res-form">
<tr><th>フリガナ <span style="color:red">*</span></th>
<td>[text* co7-kana placeholder "田中 タロウ"]</td>
</tr>
</table>
</div>
<div class="form-container">
<table class="table-res-form">
<tr><th>電話番号 <span style="color:red">*</span></th>
<td>[tel* tel-num placeholder "000-0000-0000"]</td>
</tr>
</table>
</div>
<div class="form-container">
<table class="table-res-form">
<tr><th>e-mail <span style="color:red">*</span></th>
<td>[email* your-email placeholder "xxxxx@xxx.xxx.xx"]</td>
</tr>
</table>
</div>
<div class="form-container">
<table class="table-res-form">
<tr><th>お問合せ内容<span style="color:red">*</span></th>
<td>[textarea details placeholder "お問い合わせ内容をご記入ください。"]</td>
</tr>
</table>
</div>
<h3 class="form-head">プライバシーポリシー</h3>
<div class="polcy-p">
<p>お送りいただいた全ての情報は、○○が運営する○○ためにのみ使用します。</p>
<p>許可なくそれ以外のことには使用いたしません。</p>
</div>
<div class="polcy-p">
<p style="text-align:center;">[acceptance acceptance] プライバシーポリシーに同意します。 [/acceptance]</p>
</div>
<div class="form-submit-button">
[submit "送信"]
</div></div>
3-2. CSS の編集
次に CSS です。
HTML を張り付けた段階では骨組みしか表示されないため、デザインを反映させるために CSS を入力します。
CSS は外観 ＜ カスタマイズ ＜ 追加 CSS から入力できます。
フォームの CSS は以下の通りです。
/*フォームデザインCSS*/
input[type="submit"] {
border-radius: 0px!important;
color: #ffffff;
border-color: #2b71b3!important;
background-color: #2b71b3!important;
width: 100%;
}
.form-head{
text-align:center;
margin-top:50px;
}
.form-container{
background-color:#f3f3f3;
margin-bottom: 25px;
}
.polcy-p{
width:70%;
min-width:250px;
margin: 25px auto ;
}
.polcy-p p{
font-size: 14px!important;
line-height: 2em;
margin-bottom:0;
}
.wpcf7 .ajax-loader {
display: block;}
.wpcf7 form .wpcf7-response-output {
background-color: #46b450;
border-color: #46b450;
color:#ffffff;
font-weight:bold;
font-size:120%;
padding:10px;
}
.wpcf7-not-valid-tip {
color: #FF2616;
}
.wpcf7 form.invalid .wpcf7-response-output {
border-color: #FF2616;
background-color: #FF2616;
}
input:disabled{
border-color: #777!important;
background-color: #777!important;
}
/* ContactForm7のレスポンシブ化 */
.table-res-form {
width: 100%;
}
.last-cell-th {
vertical-align: top;
padding-top: 2.35em!important;
}
table{
border:none;
}
.table-res-form th, .table-res-form td {
padding: 1.5em;
border: none;
}
.table-res-form th {
width: 25%;
}
.table-res-form input,.table-res-form textarea{
background:#fff;
border: 1px solid #D1D5CA;
}
.table-res-form input::placeholder,.table-res-form textarea::placeholder{
color: #D1D5CA;
}
.contact-area p{
color: #3F472F;
font-size:16px;
}
.contact-area .align-left-form{
text-align: right;
margin-bottom: 50px;
}
.contact-area .align-centor-form{
width:60%;
min-width:640px;
margin: 0 auto 50px;
}
.contact-area .align-centor-form p{
margin:0;
}
.form-submit-button input[type="submit"]{
padding: 15px 74px;
border: 2px solid #3a3a3a;
border-radius:0;
transition: all 0.5s ease;
background-color:#FFF;
color:#fff;
font-size:16px;
font-weight:700;
margin-top:15px
}
.contact-area table{
margin: 0;
}
.form-submit-button{
text-align:center;
}
@media only screen and (max-width: 768px) {
.table-res-form th, .table-res-form td {
width: auto;
display: block;
}
.table-res-form th {
padding: 1.5em 1em 0;
text-align: left;
}
.table-res-form td {
padding: 1.5em 1em;
}
.table-res-form tr:last-child {border-top: none;
}
.last-cell-th {
padding-top: 1.5em!important;
}
.contact-area .align-centor-form{
width:100%;
min-width:50px;
}
.contact-area .align-left-form {
margin-bottom: 20px;
}
.contact-area p{
font-size:12px;
}
}
色を変更したい場合は
color → 文字色
border-color → 枠線の色
background-color → 背景色
に対応しているので適宜変更してください。
カスタマイズ画面でお問い合わせフォームを設置しているページを開けばリアルタイムに反映されるので、確認しながら変更できます。
下の画像のように表示されていれば設定完了です。
3-3. メールタブの編集
次にメールタブの設定に映ります。
題名は以下の通り変更してください。
[_site_title] にお問い合わせがありました
メッセージ本文に張り付ける内容はこちら。
以下の通りお問い合わせがありました。
氏名：[co7-name]
フリガナ：[co7-kana]
電話番号：[tel-num]
アドレス：[your-email]
お問い合わせ内容：[details]
プライバシーポリシーの承諾[acceptance]
自動返信メールの題名は以下の通りです。
[_site_title] へのお問い合わせが送信されました。
自動返信メールのメッセージ本文に張り付ける内容はこちら。
お問い合わせいただきありがとうございます。
以下の通りお問い合わせ内容を送信いたしました。
氏名：[co7-name]
フリガナ：[co7-kana]
電話番号：[tel-num]
アドレス：[your-email]
お問い合わせ内容：[details]
プライバシーポリシーの承諾[acceptance]
--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
送信確認を行って無事にメールが届けば設定完了です。
4.最後に
今回は WordPress で Contact Form 7 を使ったお問い合わせフォームの使い方や設定方法の解説、フォームのカスタマイズ方法の紹介をしました。
Contact Form 7で作成したフォームに条件分岐の機能を追加できる Conditional Fields など、非常に便利な機能強化プラグインが多いことも魅力の一つです。
是非インストールして使ってみてください。
このサイトでは WordPress 、 Elementor を使った Web 制作の情報を発信しておりますので、他の記事も参考にして頂ければ幸いです。
最後までご覧頂きありがとうございました。
谷下
