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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
運営者さん
SEOランディングページに申し込みフォームを導入したいけど、見た目が少し寂しい。公式サイトのようにおしゃれなデザインを適用する方法を教えてほしい・・・

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

本記事の内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[submit "送信"]

そして2つ目に設置した表組み(テーブル)で囲われたデザインが下記のタグとなっています。表組みのタグのなかに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>

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

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

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

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

そこで以下プラグインを追加インストールしましょう。Really Simple CAPTCHAです。

インストール完了後に「有効化」を押してプラグインが動作する状態にしてください。

無事追加したプラグイン「Really Simple CAPTCHA」の有効化が完了するとフォーム内に表示されていたエラーメッセージは消えます。以上で設定は完了です。

あとはお好きな位置にContact Form 7を差し込む専用のタグを設置してください。

専用のタグ(ショートコード)でフォームを挿入する方法は、以下のリンク先にも掲載されていますのでもしわからない場合はチェックしてください。Contact Form 7の基本的な導入手順から設置手順までをまとめておりますのでまだContact Form 7を導入していない方はぜひご一読くださいませ。

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

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する