【第11章】①お問い合わせページ作成
コンタクトフォームの配置と設定
・お問い合わせのページを作る前に、『Contact Form 7』のプラグインを使ってコンタクトフォームのデザインと設定をします。WordPressのダッシュボードの左サイドバーにある『✉ お問い合わせ』のボタンをクリックすると『コンタクトフォーム』の一覧の画面に入ることができます。
・コンタクトフォーム一覧を見ると、既に『コンタクトフォーム１』というタイトルのページがデフォルトで入っています。それをクリックしてコンタクトフォームのデザイン設定をしていきます。
・まずは、『コンタクトフォーム１』から『お問い合わせ』にタイトルを変更します。変更できたら、タイトルの入力フォームの右側にある『ステータス』の中に『保存』ボタンがあるのでそこをクリックしましょう。
・『フォーム』『メール』『メッセージ』『その他設定』『Action』の５つのタブが並んでいます。その中から最初に『フォーム』の設定をしていきます。
・フォーム内に『氏名』『メールアドレス』などの文字が入ったテキストボックスがあります。これは、デフォルトで入っているテンプレートなので消します。空になったテキストボックスに以下のHTMLのコードを入れます。
※HTMLとは：Webページの「構造（中身）」をつくる言語です。「この部分は見出し」「ここに画像を表示」というように、何をどう配置するかをタグで指定します。
下記のHTMLコードを空のテキストボックスにコピー＆ペーストしてください。
<div id=”cf-tbl”>
<table>
<tbody>
<tr>
<th><span class=”required”>必須</span>お名前</th>
<td> [text* your-name class:form-width placeholder”佐藤 はなこ”] </td>
</tr>
<tr>
<th><span class=”required”>必須</span>ふりがな</th>
<td> [text* your-name45 class:form-width placeholder”さとう はなこ”] </td>
</tr>
<tr>
<th>住所</th>
<td> [text address78 class:form-width placeholder”郵便番号000-0000″] <br>
[text address789 class:form-width placeholder”大阪府大阪市北区”]<br>
[text address123 class:form-width placeholder”〇〇マンション101″]
</td>
</tr>
<tr>
<th><span class=”required”>必須</span>メールアドレス</th>
<td>[email* email]</td>
</tr>
<tr>
<th><span class=”required”>必須</span>電話番号</th>
<td>[tel* tel] </td>
</tr>
<tr>
<th>題名</th>
<td>[text text-640]</td>
</tr>
<tr>
<th>メッセージ</th>
<td> [textarea your-message] </td>
</tr>
</table>
</tbody>
</div>
[submit “上記の内容で送信する”]
・フォームにコードが入れられたらテキストボックスの下にある『保存』ボタンをクリックします。
・続いて『メール』のタブを開きます。ここでは、お問い合わせがあった時に自分に通知が来るように設定できるのと、通知メールの内容をカスタマイズすることができます。
・まずは、『追加ヘッダー』という項目に入っている文字列を消しておきましょう。
・一番上の『送信先』には自分が普段使用しているメールアドレスを入れましょう。ここに入力したメールアドレスに通知が届きます。
・次は『題名』の項目です。
[_site_title] [your-name]様からお問い合わせがありましたと入れます。
・『メッセージ本文』を編集します。入力フォームにデフォルトでテンプレートが入っています。一番下にある、
本メールはあなたのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信があったことをお知らせするものです。
の文章だけ残してそれより上は消しましょう。消した部分に以下のテンプレートを入力します。
差出人: [your-name] ([your-name45]) 様
メールアドレス：[email]
電話番号：[tel]
住所：[address78]
[address789]
[address123]
題名: [text-640]
メッセージ本文:
[your-message]
・テンプレートが入れられたら『Action』のタブを開きます。『＋Add Action』という青いボタンをクリックするとセレクトボックスが出てくるのでその中から『Redirect』を選択します。上の方にあるので見つけやすいと思います。
・『Redirect』を選択すると下に設定項目が出てくるのでその中から『Select a page』の項目の設定をします。『Select a page』というタイトルの下に青色で『Select a page』と入っているドロップダウンメニューがあるのでクリックして開きます。メニューの中から『サンクスページ』を選択し、設定画面の下にある『保存』ボタンをクリックします。
・これで『Contact Form 7』の設定は完了です。一度、左サイドバーからWordPressのダッシュボードに戻ります。
・次はサイドバーの『外観』をクリックしたら『外観』の下にさらに項目が表示されるのでその中から『カスタマイズ』を開きます。カスタマイズを開くと様々な設定項目が左パネルに表示されています。設定項目の一番下にある『追加CSS』を選択してください。
・『追加CSS』を開くと左のパネルに『CSS』を打ち込むためのスタイルシートが表示されます。スタイルシートに以下のCSSコードをコピー＆ペーストしましょう。
/************************************
** お問い合わせフォームの入力
************************************/
#cf-tbl{
width: 800px;
}
#cf-tbl table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
color: #444;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
vertical-align: middle;
}
#cf-tbl table tr th{
width: 35%;
background: #e8e8e8;
}
@media screen and (max-width:768px){
#cf-tbl{
width: 100%;
}
#cf-tbl table,
#cf-tbl table tbody,
#cf-tbl table tr,
#cf-tbl table tr th,
#cf-tbl table tr td{
display: block;
}
#cf-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
width: 100%;
padding: 3% 5%;
}
#cf-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}
/*「必須」文字デザイン*/
.required{
font-size:.8em;
padding: 5px;
background: #3da7b3;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}
/*「任意」文字デザイン*/
.optional{
font-size:.8em;
padding: 5px;
background: #000080;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}
/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
padding: 8px 15px;
margin-right: 10px;
margin-top: 10px;
border: 1px solid #d0d5d8;
border-radius: 3px;
background-color: #eff1f5;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height: 200px;
}
/* 「送信する」ボタン */
input.wpcf7-submit {
display: block;
padding: 15px;
width: 400px;
background: #3da7b3;
color: #fff;
font-size: 18px;
font-weight: 700;
border-radius: 2px;
margin: 15px auto 0
}
@media screen and (max-width:768px){
input.wpcf7-submit {
width: 250px;
}
}
input.wpcf7-submit:hover {
box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
transform: translateY(-4px);
opacity:0.7;
}
/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
color: red;
font-weight: 600;
}
・スタイルシートにCSSのコードが入ったら、左パネルの右上にある青色の『公開』ボタンをクリックして変更内容を保存しましょう。左上の『×』をクリックしてスタイルシートのページを閉じます。ページを閉じたらダッシュボードのボタンからWordPressのダッシュボードに
戻りましょう。
・ダッシュボードに戻ったら今開いているページのタブを複製してタブバーにWordPressのサイトのタブが２つある状態にしておきます。
・左の元々開いていたページのタブをクリックしたらサイドバーの『固定ページ』から固定ページ一覧に入り、『お問い合わせ』の固定ページを選択します。『お問い合わせ』の設定ページの上部にある『Elementorで編集』をクリックして固定ページの編集画面に入ります。
・編集画面に入ったら、左パネルの一番下の『⚙️(歯車マーク)』の設定ボタンをクリックして『固定ページレイアウト』を『Elementor Full Width』にしましょう。設定できたら『更新』ボタンをクリックしておきましょう。
※動画内では頻繁にクリックしていませんが、操作に慣れないうちは定期的にクリックして編集内容を更新しておくことを推奨します。
・固定ページのレイアウト設定ができたら先程複製したタブのページを開き、固定ページ一覧から『LILASについて』のElementorの編集画面を開きます。
お問い合わせページTOPデザイン
・LILASについてのページからTOPのセクションをコピーして『お問い合わせ』ページに貼り付けます。貼り付けたら、セクションの背景を変更します。ピンクタブをクリックしてセクションを選択し、スタイルを開きます。『画像』の『画像の選択』から背景画像を変更します。
・背景が変えられたら見出しを変更します。『LILASについて』から『お問い合わせ』に変更します。
・TOPの下に新しいセクションを追加してスペーサー(スペース：80)を入れます。
コンテンツエリア：お問い合わせフォーム
・『お問い合わせフォーム』を作成していきます。もう一つ新しいセクションを追加してウィジェット一覧の『一般』の項目から『ショートコード』というウィジェットを選択してドラッグ＆ドロップで新しいセクション内に入れます。
ウィジェットが入ったら、『LILASについて』を開いている右側のタブをクリックします。一旦『LILASについて』のページを閉じたいので、パネルの左上にある『ハンバーガーメニュー』をクリックして『終了』を選択して、編集画面を閉じます。閉じれたらダッシュボードに戻ります。
・次は、左のサイドバーから『✉お問い合わせ』を開きます。コンタクトフォーム一覧を見ると『お問い合わせ』のタイトルの右に『ショートコード』という項目があります。そこに記載されているコードをコピーしましょう。
・コピーできたら、左のタブをクリックして『お問い合わせ』の編集画面を開きます。ショートコードのウィジェットをクリックしたら左パネルの『コンテンツ』に『ショートコードを入力』の文字の下にショートコードの入力フォームがあるので、そこにさっきコピーしたショートコードを貼り付けます。
・ショートコードを貼り付けるとショートコードウィジェットにお問い合わせフォームが表示されます。
デザインが崩れていたり誤字脱字が無いかチェックしましょう。
・ショートコードウィジェットが入っているセクションのピンクタブをクリックしてセクションの幅を調整します。『レイアウト』から『幅：840』に設定します。一番下に新しいセクションを追加してスペーサー(スペース：100)を入れたらデスクトップ版のデザインは完成です。
レスポンシブ設定：タブレット
・TOPの下にあるスペーサーを『スペース：50』に、ページ一番下のスペーサーを『スペース：80』に設定します。パネルの『更新』をクリックして編集内容を保存しておきましょう。
レスポンシブ設定：スマートフォン
・TOPの下にあるスペーサーを『スペース：30』に、ページ一番下のスペーサーを『スペース：50』に設定します。パネルの『更新』をクリックして編集内容を保存しておきましょう。
・画面上の黒いバーからデスクトップ版の編集画面に戻ります。プレビューで最終確認をしましょう。確認が終わったら今開いているタブを消して、TOPページの編集画面に戻ります。『更新』ボタンがピンクではなく黒になっていることを確認し、パネルの左上にある『ハンバーガーメニュー』をクリックしてその中から『終了』をクリックします。Elementorの編集画面が終了し、固定ページの編集画面が出てきます。一番左上の『サイトアイコン』をクリックすると、『固定ページ一覧』の画面に戻ることができます。