ランディングページ専用WordPressテーマ「SEOランディングページ」にお問い合わせフォームを導入する手順

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

運営者さん

SEOランディングページに申し込みフォームを導入したいけど、見た目が少し寂しい。公式サイトのようにおしゃれなデザインを適用する方法を教えてほしい・・・

こんな疑問にお答えしていきます。

本記事の内容

SEOランディングページに導入するフォームをオシャレに仕上げたい
カンタンにお問い合わせフォームを導入する方法を教えてほしい
シンプルなフォームデザインをこだわった見た目に仕上げる方法を学びたい

本日はランディングページ作成専用ワードプレステーマの「SEOランディングページ」にお問い合わせフォームを導入する手順をご紹介いたします。なお、お問い合わせフォームを導入するまでの基本的な流れについては以下の記事を参考に進めてください。１時間もあれば完了するはずです。

ワードプレスで管理者と申込者へ自動返信メールを送信できるお問い合わせフォームを設置する方法

ランディングページ専用WordPressテーマ「SEOランディングページ」にお問い合わせフォームを導入する手順

本記事では「example.com/lp」にランディングページ作成専用テーマ「SEOランディングページ」を設置している状況での「フォームカスタマイズ手順」について詳しくご説明させていただきます。

なお、基本的なフォームの設置に必要となる無料プラグイン「Contact Form 7」は上記のリンク先に掲載した記事手順の通りにインストール作業を進めて完了してください。

参考までに何もせず「そのままのフォーム」を作成済みのページへ設置すると以下のように「シンプル」に仕上がります。実際に「SEOランディングページ」のテーマを適用したサイトへ設置した例が下記。

とても見やすいですが、フォームとしては少し見た目が寂しく感じる人もいるでしょう。

カスタマイズして設置した例が以下です。

説明と入力欄が視覚的に別れていたり、必須や任意が入ったり、見やすさと使いやすさを兼ね備えたバランスに仕上がっています。以下では１つ目のフォームと２つ目のフォームを詳しく解説していきますね。

では、１つ目のシンプルなデザインで設置したタグを見ていきましょう。ちなみに１つ目のフォームを表示するためのソースは下記で、Contact Form 7を有効化した際に元々入っているフォームそのままです。

<label> お名前 (必須)
    [text* your-name] </label>

<label> メールアドレス (必須)
    [email* your-email] </label>

<label> 題名
    [text your-subject] </label>

<label> メッセージ本文
    [textarea your-message] </label>

[submit "送信"]

そして２つ目に設置した表組み（テーブル）で囲われたデザインが下記のタグとなっています。表組みのタグのなかにContact Form 7で使うフォームタグを織り交ぜながら作っています。

<div class="form">
<table cellspacing="1">
<tbody>
<tr style="display:none;">
<th>タイトル</th>
<td>[text your-subject "お申し込みフォームからの送信"]</td>
</tr>
<tr>
<th>お名前<span class="ex">必須</span></th>
<td>[text* your-name placeholder "山田 一郎"]</td>
</tr>
<tr>
<th>メール<span class="ex">必須</span></th>
<td>[email* your-email placeholder "ichi@example.com"]</td>
</tr>
<tr>
<th>備考欄<span class="any">任意</span></th>
<td>[textarea your-message 40x7 placeholder "何かあれば記述くださいませ"]</td>
</tr>
<tr>
<th>画像認証<span class="ex">必須</span></th>
<td>[captchac captcha-301]<div>[captchar captcha-301 placeholder "英数字4文字"]</div></td>
</tr>
<tr>
<th></th>
<td><label>[acceptance accept-this default:on] <a href="/terms" target="_blank" rel="noopener noreferrer">利用規約</a>に同意する</label>
</td>
</tr>
</tbody>
</table>
<p>[response]</p>
<p class="btn-color-01">[submit "上記内容で送信する"]</p>
<div style="text-align:center;">※連打せずにお待ちください※</div>
</div>

仮に１つ目の見た目のままでよければカスタマイズする必要は一切ありません。もし２つ目のデザインにしたい場合は上記のソースを丸々コピーしてお問い合わせフォームに置き換えればOKです。ソースを流し込んだ画面は下記です。上記で紹介した「表組みが入ったソース」がそのまま入っていますよね。

ちなみに、上記で「タイトル」の「your-subject」をstyle="display:none;"している理由は、主に件名で使用される「your-subject」の入力をお客様側へ委ねると予期せぬ値が入る場合があるので表示上では使わないように工夫しているからです。あと、画面からは消しながらもhtml上に残している理由は、お問い合わせ履歴を管理画面で管理できる無料プラグイン「Flamingo」内で使うためです。

Contact Form 7のお問い合わせ履歴を管理画面内で確認できる無料プラグイン「Flamingo」を使用するかどうかは運営者の好みなのでご自由に設定くださいませ。

あと、スパム対策として「画像認証」のタグも入れていますが、スパム対策用のプラグインを導入するまでは画像認証用の数値が表示されません。有効化するまでは以下メッセージが表示されます。