作成済みの静的なランディングページ内にワードプレスで管理できるお問い合わせフォームを導入する手順（後半）

本日は過去記事「作成済みの静的なレスポンシブ対応ランディングページにワードプレスで管理できるお問い合わせフォームを導入する手順（前半）」の続きです。ランディングページを設置する前にワードプレスの基本設定を行なっていますのでまだ読まれていない場合は先にご一読ください。

作成済みの静的なランディングページ内にワードプレスで管理できるお問い合わせフォームを導入する手順（後半）

本手順では以下のURLを使ってhtml形式のランディングページに「Contact Form 7」を設定していきます。

▼ランディングページの設置URL
lp.wp-labo.com

▼ワードプレスの管理画面URL
lp.wp-labo.com/LPform/wp-admin

本日は設置するランディングページのhtmlデータ一式を購入済みです。では設置するURL先へデータをアップロードしていく前にサーバーのURLを統一しておきましょう。なぜURL統一の下準備をするのかというと理由は「以下４パターンすべてのURLが検索エンジン上に個別で存在している扱いとなってしまうから」です。

http://lp.wp-labo.com
https://lp.wp-labo.com
http://www.lp.wp-labo.com
https://www.lp.wp-labo.com

実はそのままにしておくと検索エンジン上（SEO対策）で非常に不利となります。

もしこれから本格的にランディングページを運営していくとなると今後あらゆるページから被リンク（ページへのリンクを貼ってもらう）がもらえる可能性があります。

あるページは「wwwなし」で貼られ、また違うページからは「wwwあり」だったり、または「https://」や「http://」などバラバラでリンクが貼られた場合にせっかくの被リンクのパワーが分散してしまいます。この点は導入サーバーの仕様にもよるので詳しくはレンタルサーバー上の構造をチェックしてみてください。

あらかじめURLを１つに統一（https://lp.wp-labo.com）しておけば、万が一被リンクがバラバラに貼られても検索エンジンの評価が集中するわけです。設定方法は非常に簡単です。設定は「.htaccess」ファイルで行います。では早速、設置先のレンタルサーバーにFTP接続する作業から入っていきましょう。

接続が完了したら「public_html」をダブルクリックしてください。

Mixhostに追加したサブドメイン「lp.wp-labo.com」が増えていますのでダブルクリックしましょう。

次に「LPform」をダブルクリック。

そして「.htaccess」ファイルをダウンロードしておきましょう。ファイルを選択した状態で右クリックから「ダウンロード」してください。

ダウンロードするとローカル側へ「.htaccess」がコピーされます。

まずはこの「.htaccess」でドメインの統一を行いましょう。サーバー側を「LPform」ディレクトリから抜けるために一番上のフォルダ「..」をダブルクリックしてください。

すると１階層上に戻ります。

この階層が追加したサブドメイン直下「https://lp.wp-labo.com」です。さっき保存した「.htaccess」をアップロードする場所です。ローカル側にある「.htaccess」ファイルを編集していきましょう。

そのまま「.htaccess」ファイルを開くと以下の記述がされています。

開かれた「.htaccess」はワードプレスのファイルを流用して使っているので記述されている内容をすべて削除して以下ソースと入れ替えてください。なお、独自ドメイン（lp.wp-labo.com）箇所はご自身の環境に合わせて差し替えておきましょう。

AddType application/x-httpd-php .php .html
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://lp.wp-labo.com/$1 [R=301,L]
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.lp.wp-labo\.com)(:80)?
RewriteRule ^(.*) https://lp.wp-labo.com/$1 [R=301,L]
RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ https://lp.wp-labo.com/$1 [R=301,L]
Redirect permanent /wp-admin https://lp.wp-labo.com/LPform/wp-admin

以下が貼り付けた後の状態です。

問題なければ「Ctrl+S」で保存。すると以下の画面が表示されますので「はい」を押してください。

するとサーバー側の「lp.wp-labo.com」へ「.htaccess」ファイルが転送されます。もし表示されない場合は編集後の「.htaccess」を「lp.wp-labo.com」ディレクトリ直下にアップロードすればOKです。

正しく「.htaccess」ファイルがアップロードされるとさきほど洗い出した４つのURLがすべて「https://lp.wp-labo.com」にリライトされる処理が効きます。ちなみに１行目の記述内容は「htmlファイルをphpファイルとして動作させる」という命令文です。１１行目は「https://lp.wp-labo.com/wp-admin」へアクセスがあった場合にワードプレスのログイン画面を表示させる記述です。「LPform」というディレクトリにワードプレスをインストールしているので忘れないように念のため追記させていただきました。

では、別途購入したランディングページのhtmlデータを一式同じ階層にアップロードしていきましょう。

今回の購入テンプレートは上記ディレクトリ構造になっていました。すべてのデータを「/public_html/lp.wp-labo.com」へまとめてアップロードしてください。html内の各文章や画像類は適宜編集しておきましょう。

サーバー側へアップされました。

では「index.html」内にワードプレスを動かす設定をします。サーバー側の「index.html」を右クリックして「表示/編集」を選んでください。

無事「index.html」の編集画面が開いたら以下の３つのソースを指定する箇所に追記してください。

▼１つ目
<?php require('./LPform/wp-load.php'); ?>

▼２つ目
<?php wp_head(); ?>

▼３つ目
<?php wp_footer(); ?>

簡単に説明すると１つ目のタグがワードプレスのコアファイルと連携させる一文です。htmlの最上部で読み込ませます。そして２つ目が最後の「<meta>」タグ箇所に差し込みます。３つ目は「</body>」直前で読み込ませば問題ありません。

差し込んだキャプチャは以下となります。１つ目は最上部へ差し込みます。

次に２つ目をhead内にある最後のmetaタグ直下へ。

そして３つ目をフッター部分に貼り付けましょう。

あと、併せて以下のタグも同時に「index.html」内へ追加ください。

▼サイト名を取得するタグ
<?php bloginfo( 'name' ); ?>

▼キャッチフレーズを取得するタグ
<?php bloginfo( 'description' ); ?>

▼現在の西暦を取得するタグ
<?php echo date('Y'); ?>

サイト名は「<title></title>」の間に差し込みます。そしてキャッチフレーズは「メタディスクリプション」の部分に埋め込みます。そして西暦はフッターに表示させる「コピーライト箇所」へ埋め込んでおきましょう。

▼タイトル箇所
<title><?php bloginfo( 'name' ); ?></title>

▼メタディスクリプション箇所
<meta name="description" content="<?php bloginfo( 'description' ); ?>" />

▼コピーライト箇所
© <?php echo date('Y'); ?> WP安全引越屋さん

実際に当て込んだ画面が以下です。

コピーライトにも差し込みました。

すべてが追記できたら「Ctrl+S」で保存ください。するとアップロードを促す画面が表示されますので「はい」を選びサーバー上の「index.html」ファイルを更新しましょう。

以上でワードプレスとの基本的な連携は完了となります。あとは「Contact Form 7の設置専用タグ」を埋め込む作業のみです。埋め込みに入る前にランディングページ側であらかじめ用意されているフォーム構成（formタグ部分）を確認しておきましょう。

まず「formタグ」にclassとidがあります。そして「inputタグ」には共通のclassと各々idが振られています。form部分は丸々ワードプレスの管理画面内からContact Form 7で発行するように設定しますので全体をメモ帳にコピーしてください。

以下のようにテキストエディター内に貼り付けておきましょう。

メモ帳やテキストエディターに貼り付けたら「index.html」からはformタグの記述を丸ごと削除しておいてください。この部分は後で、ワードプレスのContact Form 7を直接読み込む命令文を差し込みます。

では、ワードプレスの管理画面を開いて「お問い合わせ > コンタクトフォーム」をクリックしましょう。

次にフォームを開いてください。

さきほどコピーした内容を以下に設定していきます。

タブメニュー「フォーム」のなかにさきほどソースを一部調整して流し込んでいきましょう。formタグは自動で作成されますので含みません。なお、inputタグやtextareaタグは購入したテンプレート側の記述に準じればOKです。今回購入したテンプレートは以下です。ちなみに「required」は入力必須にする属性でContact Form 7では「*」が同等の機能となりますので差し替えて使います。

例えば以下ソースをContact Form 7内で再現する場合の記述方法は下記となります。ご参考ください。

▼出力したいソースの例
<input type="text" class="form-control" id="cfName" placeholder="例）山田 太郎">

▼Contact Form 7の記述例
[text* your-name id:cfName class:form-control placeholder "例）山田 太郎"]

ちなみにidは「id:Name」、classは「class:Name」、placeholderは「placeholder “透かし文字”」とします。なお、classのみ複数指定が可能なので「class:a class:b」となるように記述してください。当然ですが、各々で購入されるテンプレートによってid名やclass名はネーミングが異なりますのでご注意くださいませ。

さきほどコピーしておいた内容に各フォーム毎でclassとidを追加しなおしたソース一式が以下です。

<div class="form-group">
[text* your-name id:cfName class:form-control placeholder "例）山田 太郎"]
</div>
<div class="form-group">
[email* your-email id:cfEmail class:form-control placeholder "例）yamada@example.com"]
</div>
<div class="form-group">
[text* your-subject id:cfSubject class:form-control placeholder "SakuraサーバーからXserverへの移転"]
</div>
<div class="form-group">
[textarea* your-message id:cfMessage class:form-control placeholder "はじめまして、山田と申します。"]
</div> 
<div class="form-group m-b-0">
[confirm class:btn class:btn-blue class:wow class:pulse "確認画面へ進む"][back class:btn class:btn-grey class:pulse "戻って編集する"][submit class:btn class:btn-blue class:wow class:pulse "上記の内容で送信する"][honeypot honeypot-665][response]<div style="text-align:center;">※送信に時間がかかる場合がございますので連打せずにお待ちください※</div>
</div>

少し複雑に見えますが、各々のinputタグとtextareaタグと送信ボタンをContact Form 7用のタグにして、idとclassを振り直しただけです。基本的には購入したテンプレート側のhtml記述をそのまま流用していますので特別な作業はしておりません。

過去にContact Form 7でフォーム内へclassやidを挿入する方法をまとめていますのでご参照ください。
→ Contact Form 7で設置したお問い合わせフォーム内へidやclassやPlaceholderを挿入する記述方法

フォームのなかにソースを流し込んだら「保存」をクリックしましょう。

Contact Form 7が正しく保存されると以下のメッセージが表示されます。

保存後に設置に必要な「ショートコード」をコピーしておきましょう。

このショートコードをひと工夫してから「index.html」に差し込めばフォームの設置が完了となります。まずはformタグにclassとidを埋め込むためにショートコードをカスタマイズ。

[contact-form-7 404 "Not Found"]

そして、「index.html」内からphpで呼び出すためのコードが以下です。

<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>

コードを埋め込むために再度サーバー上のindex.html」を開きます。

そして、元々「index.html」上にあったformタグの部分をさきほどのコードと置き換えていきましょう。

正しくコードを差し込めたら「Ctrl+S」で保存して、サーバーにアップロードしてください。

アップロードが完了するとランディングページに設置したフォームがContact Form 7で動作いたします。

以上の手順が購入したレスポンシブランディングページへContact Form 7フォームを埋め込む作業です。

ちなみにランディングページのSEOタイトル（Title属性）やディスクリプション（Meta Description属性）を変更されたい場合は「設定 > 一般」から変更してください。今回の手順ではすでに埋め込んでいますので管理画面から自由に調整可能となっていますのでご安心くださいませ。

今回設置したランディングページも以下の内容へ変更いたしました。

▼サイトのタイトル
保証付き！WordPressの移転代行ならWP安全引越屋さんにお任せください

▼キャッチフレーズ
ワードプレスの確実な移転・引っ越し作業なら「WP安全引越屋さん」が対応いたします。私たちはWordPressの移行作業に特化したワードプレスの専門家チームです。

最後に念のため設置したフォームからお問い合わせを送信して、管理画面内で履歴が確認できるかチェックしていきましょう。お問い合わせフォームの各項目へ情報を入力。

確認画面へ進むと「戻る」ボタンと「送信」ボタンが表示されました。

入力に誤りがないかを確認して「上記の内容で送信する」を押すとフォームの送信が完了しました。

では、管理画面の「フォーム履歴 > 受信メッセージ」から顧客情報をチェックしていきましょう。

無事、件名や送信者情報が表示されています。

さらに件名をクリックしてなかを開くと、詳細の情報が残っています。

上記でフォームの送信情報を取りこぼさないランディングページ運用が可能となります。ちなみに「heneypot」はフォームをスパム対策できるプラグインです。ざっくり言えば、存在するフォームすべてに入力しようとするスパムの特性を逆手に取って、一般ユーザーが入力できないフォームをあえて用意し、もし値が入った場合はスパムと判別する仕組みとなります。スパム送信を防げる強力なツールです。

▼設置したランディングページURL
https://lp.wp-labo.com

▼使用した専用テーマ（LPform）
https://wp-labo.com/freeplugin/

今回の手順で設置したお問い合わせフォームから、管理者と申込み者へそれぞれ自動返信メールを送信する方法は以下の記事が参考になります。ぜひ併せてご一読くださいませ。
→ ワードプレスで管理者と申込者へ自動返信メールを送信できるお問い合わせフォームを設置する方法