ホームページを制作する場合、お問い合わせフォームを実装することが多いかと思います。
WordPressサイトであれば、Contact Form 7やMW WP Formなどのプラグインを使用して、そこまで難しくなくお問い合わせフォームを実装できます。
では、HTMLの静的サイトだとどうでしょうか？
静的サイトでも、HTMLコーディングでお問い合わせフォームを実装することはもちろん可能ですが、クライアントからこんな要望があった場合はどのように解決すればよいでしょうか。
既存のHTMLサイトにお問い合わせフォームを作成したいんだけど、お問い合わせのあったデータをCSVなどで出力できるようにしたい！
コーポレートサイトなどでもWordPressではなくHTMLで作成されたサイトは結構ありますよね。
サイトリニューアルはせずに、既存のHTMLサイトにお問い合わせフォームを組み込みたい、という需要はそこまで多くありませんが、解決方法をご紹介しますので、よろしければご覧ください。
この記事は「既存の静的HTMLページの見た目とURLを維持したまま、そのページ内でWordPressとContact Form 7を動かす」必要がある案件向けです。.htmlをPHPとして実行するため、事前にステージング環境、ファイルとデータベースのバックアップ、サーバー仕様の確認を行ってください。
本記事の執筆者：マサトラ
フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。
結論：WordPressのお問い合わせフォームを、静的サイトに設置する
静的サイトにお問い合わせフォームを作成する方法はいくつかあります。この記事では、「既存のHTMLページへフォームを直接組み込み、お問い合わせデータを一覧でCSV出力したい」という要望に対して、WordPressで作成したお問い合わせフォームを静的ページ内で呼び出す方法を解説します。
WordPressを使用するメリット
クライアントがお問い合わせフォームを設置するのは、ユーザーからのコンバージョンを上げるためです。
そして、より良いサービスを提供していくためには、お問い合わせフォームから得た声を分析する必要があります。
分析する際にデータが一覧で出力できたほうが便利ですよね。
WordPressのお問い合わせフォームプラグインを使用すれば、そういったデータの出力が簡単にできるので、お問い合わせフォームだけWordPressで作成するのが効率が良いと私は思っています。
手順
では、HTMLで作成された静的サイトにWordPressのお問い合わせフォームを設置する方法を、順を追って解説していきます。
なお、本記事は、クライアントのサーバーがエックスサーバーの場合となりますのでご注意ください。
エックスサーバー以外では、.htmlをPHPとして実行する設定やWordPressのリライトルールが異なる場合があります。サーバー公式マニュアルに同等の設定がない場合、このコードをそのまま使用しないでください。
手順①サーバー内にディレクトリを作成し、そこにWordPressをインストールする
今回は以下のようなディレクトリ構成を例にして解説していきます。
index.htmlはトップページ、お問い合わせフォームを設置したい下層ページはcontact.htmlです。
まずは、WordPressを設置したい静的サイトのサーバー内に、「wp」というディレクトリを作成して、そこにWordPressをインストールします。
エックスサーバーなどでWordPressをインストールする際に、そこのディレクトリを指定してあげればOKですね。
手順②WordPress管理画面にアクセスし、URLを変更する
次に、手順①でインストールしたWordPressの管理画面にアクセスしましょう。
サイトURLが「abc.com」だとしたら、WordPressをインストールしたディレクトリは「wp」なので、WordPressサイトは「abc.com/wp」、管理画面は「abc.com/wp/wp-admin」ですね。
アクセスしたら、管理画面メニューの「設定」→「一般」に進みます。
そこでは、上記の画像のように「WordPressアドレス(URL)」と「サイトアドレス(URL)」の項目があり、どちらも「abc.com/wp」となっているはずです。
それらの項目の内、「サイトアドレス(URL)」に記載されているURLの末尾「/wp」を削除します。
ポイント
「WordPressアドレス(URL)」のURLを変えると困ったことになるので、必ず「サイトアドレス(URL)」だけを変更してください。
サイトアドレスから「/wp」を削除することで、WordPressサイトがindex.htmlの方に向きます。
手順③Contact Form 7をインストールしてお問い合わせフォームを作成する
引き続き管理画面内での作業として、今度はお問い合わせフォーム作成するためのプラグイン「Contact Form 7」をインストールします。
プラグインの検索バーで「Contact Form 7」と入力すれば、最初に表示されるかと思います。
インストール後に有効化したら、Contact Form 7内でお問い合わせフォームを作成しましょう。
①管理画面メニューの「お問い合わせ」をクリック
②任意のお問い合わせフォームタイトルを入力
③フォームタブを選択(デフォルトで選択されています)
④フォーム作成欄に、お問い合わせフォームのHTMLコードを入力する
※あらかじめコーディングしておいたコードを貼り付けると楽です。
⑤保存ボタンをクリック
⑥作成されたお問い合わせフォームのショートコードがここに表示されます。後でこのコードを使用します。
ポイント
Contact Form 7内に入力するお問い合わせフォーム用のHTMLコードや、CSSファイルは予め準備しておきましょう。
手順④HTMLファイルでWordPressを読み込む
静的サイト上でWordPressを動かすには、HTMLファイルを編集する必要があります。
wp-load.phpを読み込むページでは、アクセスのたびにWordPressが起動します。対象をフォームページだけに限定し、WordPress・テーマ・Contact Form 7の更新後には必ず送信テストをしてください。
編集と言っても、4つのコードを決まった箇所にコピペするだけなので簡単です。
順番に見ていきましょう。
HTMLファイルの一番上
WordPressのお問い合わせフォームを読み込みたいHTMLファイルのコードの一番上に、以下のPHPコードを貼り付けます。
今回の例では、contact.htmlにフォームを埋め込みたいので、そこに貼り付けます。
<?php require_once __DIR__ . '/wp/wp-load.php'; ?>編集するHTMLファイルとwpフォルダの位置関係によって相対パスの書き方が変わってきますので、ご自身のサイト構造に合わせて相対パスは適宜修正してください。
今回はcontact.htmlとwpフォルダが同階層にある想定です。__DIR__は編集中のファイルがあるディレクトリを表します。静的サイトでは以下の画像のように、下層ページごとのフォルダ内にindex.htmlが格納されていることがあります。
こういった場合のように、サイトの構造によってPHPを呼び出すコードのパスを変える必要があるので気を付けましょう。
(私はここに気づかず、しばらくハマりました…)
headタグの終了直前
HTMLファイルの中でPHPを呼び出すわけですが、通常のWordPressサイトを構築するときと同じように、以下のコードをheadタグの終了直前に記述してWordPressのヘッダーを呼び出しましょう。
とは言っても、特にお問い合わせフォーム用のヘッダーは作成しておらず、HTMLサイトのヘッダーを使用するので、おまじないのようなものです。
<?php wp_head(); ?>bodyタグの終了直前
Contact Form 7のJavaScriptなどを出力するため、bodyタグ終了直前でwp_footer()も呼び出します。
ヘッダー同様、こちらもおまじないです。
<?php wp_footer(); ?>Contact Form 7のショートコード
WordPressを読み込むおまじないコードを貼り付け終わったら、HTMLファイルの中でお問い合わせフォームを読み込みたい位置に、Contact Form 7で作成したフォームのショートコードを貼り付けましょう。
手順③でお問い合わせフォームを作成した時にショートコードが自動生成されているので、idとtitleはそちらに合わせて書き換えてください。
<?php echo do_shortcode( 'エラー: コンタクトフォームが見つかりません。
' ); ?>手順⑤.htaccessを編集する
.htaccessを編集する際は、必ずバックアップを作成してから編集するようにしてください！
記述を誤ってサイトが動かなくなった場合、バックアップが無いと元に戻せません！
手順の最後として、.htaccessを編集します。
.htaccessはルートディレクトリに格納されているのでFTPソフトなどを使用してサーバーにアクセスし、ダウンロードしましょう。
ダウンロードした.htaccessを以下の画像のように2か所編集します。
青枠が編集箇所で、赤枠が編集後です。
該当サイトのサーバーがエックスサーバーの場合は以下のコードを.htaccessに追加します。
さくらサーバーなど、他のサーバーの場合は記述が異なります。今回はエックスサーバーの場合の記述となりますのでご注意ください
AddHandler fcgid-script .htm .htmlこの指定はエックスサーバー公式FAQの現行例です。サイト内の.html全体がPHPとして処理されるため、可能なら対象ページを置くディレクトリの.htaccessだけに記述して影響範囲を限定します。詳細はエックスサーバー公式FAQを確認してください。
それとは別に、書き換える箇所が1つあります。
上の画像であったように「/index.php」となっていた所を「/wp/index.php」とします。
RewriteRule . /wp/index.php [L].htaccessの編集が完了したら、サーバー内の.htaccessを編集したものに置き換えましょう。アップするディレクトリは、元々の.htaccessがあったルートディレクトリです。
しつこいようですが、オリジナルの.htaccessをバックアップしてから、編集したファイルをサーバーにアップしてくださいね。
これで全ての手順が完了したので、contact.htmlにアクセスしてキチンとフォームが表示されているか確認しましょう。
補足：お問い合わせフォームに蓄積されたデータをCSV出力する方法
静的サイトに、なぜWordPressのお問い合わせフォームを設置したかというと、「お問い合わせフォームから送信されたデータをCSVで出力したい」という前提があったためでした。
では、その出力方法も確認しておきましょう。
クライアントには、ただ納品するだけでなく、ここまで解説しておくと親切ですね。
今回、お問い合わせフォームをContact Form 7で作成しましたが、そこからお問い合わせデータを出力するには「Contact Form CFDB7」というプラグインを使用します。
CFDB7は送信内容をWordPressのデータベースへ保存します。WordPress公式ディレクトリで更新・対応状況を確認し、保存期間、閲覧権限、バックアップ、削除方法を決めてから有効化してください。
こちらをインストールしたら、有効化するだけでOKです。
そうすると、管理画面で以下のように確認できるかと思います。
管理画面メニューの「コンタクトフォーム」をクリックすると、Contact Form 7で作成したお問い合わせフォームのタイトルが表示されます。
さらにそこをクリックすると、Contact Form CFDB7をインストールした後に送信されたお問い合わせ内容一覧が出てきます。
「CSVをエクスポート」をクリックすれば、一覧がCSVファイルで出力可能です。
これだけで終了なので、とても簡単ですね。
(おまけ)お問い合わせ入力ページからサンクスページへ遷移させる方法
静的サイトに設置したContact Form 7のお問い合わせフォームでも、送信成功後にサンクスページへ遷移できます。子テーマなどのfunctions.phpに以下の記述を追加します。
add_action( 'wp_footer', function () {
?>
<script>
document.addEventListener('wpcf7mailsent', function (event) {
if (String(event.detail.contactFormId) === '25') {
window.location.href = 'https://example.com/thanks.html';
}
});
</script>
<?php
} );変更する箇所は、フォームIDの25とサンクスページURLの2か所です。
String(event.detail.contactFormId) === '25'window.location.href = 'https://example.com/thanks.html';作成したthanksページのURLと、Contact Form 7のフォームID番号を実際のものに置き換えましょう。
Contact Form 7のID番号は、以下の画像のように、WordPress管理画面で作成したフォームにアクセスし、ブラウザのアドレスバーに表示された青枠箇所になります。
画像の例では「25」が作成したフォームのID番号なので、
String(event.detail.contactFormId) === '25'のように記述します。
サンクスページへ遷移させる記述は以上となります。
wpcf7mailsentは、Contact Form 7のAjax送信が成功し、メール送信まで完了したときに発生する公式イベントです。
なお、サンクスページへ直接アクセスされても、サンクスページを表示させずに任意のページへリダイレクトさせる設定もしておくと、より良いサイトになります。
以下の記事に設定方法を載せているので、よろしければご覧ください。
まとめ
HTMLで作成された静的サイトに、WordPressのお問い合わせフォームを設置する方法を解説しました。
サーバーとWordPressの両方に関わる構成なので、決して一律に使える方法ではありません。ただし、既存の.htmlとURLを維持したままWordPressのフォーム機能を組み込む要件では有効な選択肢です。ステージング環境で表示、入力エラー、送信、CSV保存、更新後の動作まで確認してから公開してください。
これができれば、静的サイトにブログ機能を埋め込む、といった応用も可能です。
お問い合わせフォームやブログを追加するために、サイト全体をWordPressで作成しなおすのではなく、こういった改修方法が提案できればクライアントの費用削減になりますね。
