【HTML】静的サイトにお問い合わせフォームを実装する方法【WordPress】

ホームページを制作する場合、お問い合わせフォームを実装することが多いかと思います。

WordPressサイトであれば、Contact Form 7やMW WP Formなどのプラグインを使用して、そこまで難しくなくお問い合わせフォームを実装できます。

では、HTMLの静的サイトだとどうでしょうか？

静的サイトでも、HTMLコーディングでお問い合わせフォームを実装することはもちろん可能ですが、クライアントからこんな要望があった場合はどのように解決すればよいでしょうか。

既存のHTMLサイトにお問い合わせフォームを作成したいんだけど、お問い合わせのあったデータをCSVなどで出力できるようにしたい！

コーポレートサイトなどでもWordPressではなくHTMLで作成されたサイトは結構ありますよね。

サイトリニューアルはせずに、既存のHTMLサイトにお問い合わせフォームを組み込みたい、という需要はそこまで多くありませんが、解決方法をご紹介しますので、よろしければご覧ください。

静的サイトにお問い合わせフォームを作成する方法はいくつかありますが、「お問い合わせデータを一覧でCSV出力したい」という要望を満たすには、WordPressで作成したお問い合わせフォームを、静的サイトに設置する方法をオススメします。

クライアントがお問い合わせフォームを設置するのは、ユーザーからのコンバージョンを上げるためです。

そして、より良いサービスを提供していくためには、お問い合わせフォームから得た声を分析する必要があります。

分析する際にデータが一覧で出力できたほうが便利ですよね。

WordPressのお問い合わせフォームプラグインを使用すれば、そういったデータの出力が簡単にできるので、お問い合わせフォームだけWordPressで作成するのが効率が良いと私は思っています。

では、HTMLで作成されたHTMLサイトにWordPressのお問い合わせフォームを設置する方法を、順を追って解説していきます。

なお、本記事は、クライアントのサーバーがエックスサーバーの場合となりますのでご注意ください。

今回は以下のようなディレクトリ構成を例にして解説していきます。

index.htmlはトップページ、お問い合わせフォームを設置したい下層ページはcontact.htmlです。

まずは、WordPressを設置したい静的サイトのサーバー内に、「wp」というディレクトリを作成して、そこにWordPressをインストールします。

エックスサーバーなどでWordPressをインストールする際に、そこのディレクトリを指定してあげればOKですね。

次に、手順①でインストールしたWordPressの管理画面にアクセスしましょう。

サイトURLが「abc.com」だとしたら、WordPressをインストールしたディレクトリは「wp」なので、WordPressサイトは「abc.com/wp」、管理画面は「abc.com/wp/wp-admin」ですね。

アクセスしたら、管理画面メニューの「設定」→「一般」に進みます。

そこでは、上記の画像のように「WordPressアドレス(URL)」と「サイトアドレス(URL)」の項目があり、どちらも「abc.com/wp」となっているはずです。

それらの項目の内、「サイトアドレス(URL)」に記載されているURLの末尾「/wp」を削除します。

引き続き管理画面内での作業として、今度はお問い合わせフォーム作成するためのプラグイン「Contact Form 7」をインストールします。

プラグインの検索バーで「Contact Form 7」と入力すれば、最初に表示されるかと思います。

インストール後に有効化したら、Contact Form 7内でお問い合わせフォームを作成しましょう。

①管理画面メニューの「お問い合わせ」をクリック

②任意のお問い合わせフォームタイトルを入力

③フォームタブを選択(デフォルトで選択されています)

④フォーム作成欄に、お問い合わせフォームのHTMLコードを入力する
　※あらかじめコーディングしておいたコードを貼り付けると楽です。

⑤保存ボタンをクリック

⑥作成されたお問い合わせフォームのショートコードがここに表示されます。後でこのコードを使用します。

静的サイト上でWordPressを動かすには、HTMLファイルを編集する必要があります。

編集と言っても、4つのコードを決まった箇所にコピペするだけなので簡単です。

順番に見ていきましょう。

WordPressのお問い合わせフォームを読み込みたいHTMLファイルのコードの一番上に、以下のPHPコードを貼り付けます。

今回の例では、contact.htmlにフォームを埋め込みたいので、そこに貼り付けます。

<?php require("./wp/wp-load.php"); ?>

編集するHTMLファイルとwpフォルダの位置関係によって相対パスの書き方が変わってきますので、ご自身のサイト構造に合わせて相対パスは適宜修正してください。

今回はcontact.htmlとwpフォルダが同階層にある想定でご紹介していますが、静的サイトでは以下の画像のように、下層ページごとにフォルダが作成されて、その中に各下層ページのindex.htmlが格納されていることがあります。

こういった場合のように、サイトの構造によってPHPを呼び出すコードのパスを変える必要があるので気を付けましょう。

(私はここに気づかず、しばらくハマりました…)

HTMLファイルの中でPHPを呼び出すわけですが、通常のWordPressサイトを構築するときと同じように、以下のコードをheadタグの終了直前に記述してWordPressのヘッダーを呼び出しましょう。

とは言っても、特にお問い合わせフォーム用のヘッダーは作成しておらず、HTMLサイトのヘッダーを使用するので、おまじないのようなものです。

<?php wp_head(); ?>

ヘッダーを読み込むなら、もちろんフッターも必要ですね。bodyタグ終了直前に貼り付けましょう。

ヘッダー同様、こちらもおまじないです。

<?php wp_footer(); ?>

WordPressを読み込むおまじないコードを貼り付け終わったら、HTMLファイルの中でお問い合わせフォームを読み込みたい位置に、Contact Form 7で作成したフォームのショートコードを貼り付けましょう。

手順③でお問い合わせフォームを作成した時にショートコードが自動生成されているので、idとtitleはそちらに合わせて書き換えてください。

<?php echo do_shortcode( '
エラー: コンタクトフォームが見つかりません。
' ); ?>

手順の最後として、.htaccessを編集します。

.htaccessはルートディレクトリに格納されているのでFTPソフトなどを使用してサーバーにアクセスし、ダウンロードしましょう。

ダウンロードした.htaccessを以下の画像のように2か所編集します。

青枠が編集箇所で、赤枠が編集後です。

該当サイトのサーバーがエックスサーバーの場合は以下のコードを.htaccessに追加します。

さくらサーバーなど、他のサーバーの場合は記述が異なります。今回はエックスサーバーの場合の記述となりますのでご注意ください

AddHandler fcgid-script .html

それとは別に、書き換える箇所が1つあります。

上の画像であったように「/index.php」となっていた所を「/wp/index.php」とします。

RewriteRule . /wp/index.php [L]

.htaccessの編集が完了したら、サーバー内の.htaccessを編集したものに置き換えましょう。アップするディレクトリは、元々の.htaccessがあったルートディレクトリです。

しつこいようですが、オリジナルの.htaccessをバックアップしてから、編集したファイルをサーバーにアップしてくださいね。

これで全ての手順が完了したので、contact.htmlにアクセスしてキチンとフォームが表示されているか確認しましょう。

静的サイトに、なぜWordPressのお問い合わせフォームを設置したかというと、「お問い合わせフォームから送信されたデータをCSVで出力したい」という前提があったためでした。

では、その出力方法も確認しておきましょう。

クライアントには、ただ納品するだけでなく、ここまで解説しておくと親切ですね。

今回、お問い合わせフォームをContact Form 7で作成しましたが、そこからお問い合わせデータを出力するには「Contact Form CFDB7」というプラグインを使用します。

こちらをインストールしたら、有効化するだけでOKです。

そうすると、管理画面で以下のように確認できるかと思います。

管理画面メニューの「コンタクトフォーム」をクリックすると、Contact Form 7で作成したお問い合わせフォームのタイトルが表示されます。

さらにそこをクリックすると、Contact Form CFDB7をインストールした後に送信されたお問い合わせ内容一覧が出てきます。

「CSVをエクスポート」をクリックすれば、一覧がCSVファイルで出力可能です。

これだけで終了なので、とても簡単ですね。

静的サイトに設置したContact Form 7のお問い合わせフォームでも、お問い合わせ送信後にサンクスページへ遷移させたい場合、funcsions.phpに以下の記述を追加しましょう。

add_action('wp_footer', 'add_origin_thanks_page');
function add_origin_thanks_page()
{
  $thanks = 'https://〇〇〇.com/thanks.html';
  echo <<< EOC
    <script>
      var thanksPage = {
        Contact Form 7のID番号: '{$thanks}',
      };
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      location = thanksPage[event.detail.contactFormId];
    }, false );
    </script>
  EOC;
}

上記記述の内、変更する箇所は2か所です。

 $thanks = 'https://〇〇〇.com/thanks.html';

Contact Form 7のID番号: '{$thanks}',

作成したthanksページのURLと、Contact Form 7のフォームID番号を実際のものに置き換えましょう。

Contact Form 7のID番号は、以下の画像のように、WordPress管理画面で作成したフォームにアクセスし、ブラウザのアドレスバーに表示された青枠箇所になります。

画像の例では「25」が作成したフォームのID番号なので、

25: '{$thanks}',

のように記述します。

サンクスページへ遷移させる記述は以上となります。

なお、サンクスページへ直接アクセスされても、サンクスページを表示させずに任意のページへリダイレクトさせる設定もしておくと、より良いサイトになります。

以下の記事に設定方法を載せているので、よろしければご覧ください。

HTMLで作成された静的サイトに、WordPressのお問い合わせフォームを設置する方法を解説しました。

こういった案件はめったに発生しないかもしれませんが、決して難しくないので、もし発生した場合の参考にしてもらえればと思います。

これができれば、静的サイトにブログ機能を埋め込む、といった応用も可能です。

お問い合わせフォームやブログを追加するために、サイト全体をWordPressで作成しなおすのではなく、こういった改修方法が提案できればクライアントの費用削減になりますね。