サイトをワードプレス化した後にコンタクトフォーム7を設置する方法

こんにちは、ヨロと申します。

今回は、HTMLサイトをワードプレス化した後にお問い合わせフォーム(Contact Form 7)を設置する方法で、

出来るだけ元のデザインなども壊さず、そのままのレイアウトでカスタマイズできるようにするやり方をまとめてみました。

サイトをワードプレス化した後にコンタクトフォーム7をカスタマイズする方法

【お問い合わせフォーム設置の練習用のテンプレート】

今回使うHTMLとCSSのソースコードはこちらです。

https://codepen.io/malg_tw/pen/ZwbNxj/

これをワードプレス化して「Contact Form 7」でコンタクトフォームを設置してみました。

Contact Form 7をインストール

まずは、プラグイン「Contact Form 7」をインストール後「有効化」する。

そうすると、管理画面の「お問い合わせ」→「コンタクトフォーム」→「新規追加」が選べるようになります。

今回、ワードプレス化したサイトにお問い合わせフォームを設置する際、

まず始めに注意点としては、

HTMLを組む時点で、コンタクトフォームのそれぞれの項目にクラスをつけておいて、

そのクラス名に合わせて、あらかじめCSSデザインを組んでおくと楽。

例えば、今回の僕の場合だと、

<input> には inputクラス

<textarea> には textareaクラス

「送信ボタン」部分には submit-buttonというクラス名

をつけてみました。

<div class="contact-wrapper">
	<label for="text_id">お名前(必須)</label>
	<input class="input" type="text" value="">
	<label for="text_id">メールアドレス</label>
	<input  class="input" type="email" value="">
	<label for="text_id">お問い合わせ内容</label>
	<textarea class="textarea"></textarea>
	<input type="submit" class="submit-button" value="送信">
</div>

「Contact Form 7」をインストール後、管理画面の「お問い合わせ」→「コンタクトフォーム」→「新規追加」を選ぶと、こういった画面が表示されます。

フォームに元々書かれているものは全て消してOKです。

今回は、「名前」「メール」「内容」「送信ボタン」の4項目分の設置が必要なので、設定に必要なのはこの部分。

という事でまず「テキスト」をクリックすると、

こういった画面が表示されます。

「名前」の部分の設定

まずは、項目タイプの「必須項目」にチェック

名前の部分は「テキスト」ボタンを押した時点で自動的に作られるので、そのまま使ってOK。

デフォルト値

「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、デフォルト値に入力したものが問い合わせフォームの入力欄に表示されるようになる。

ID属性：項目にIDを追加出来る

クラス属性：項目にClassを追加出来る。

全て入力が終わったら「タグを挿入」をクリック、

メールアドレス部分の設定

「メールアドレス」をクリックすると、先程と同じような画面が表示されるので、同じ要領で項目を埋めていく。

お問い合わせ内容部分

「テキストエリア」をクリックし、次々進めていく。

送信ボタンの設定

「ラベル」は送信ボタンに表示される文字。

全て入力すると、最終的にこんな感じ、

コンタクトフォーム7のカスタマイズ方法

次に重要な部分が「メール」タブの中の設定で、

ここの設定がうまく出来ていないと、いざメッセージを送ってもエラーが出て送信が出来ません。

という事で「メール」タブをクリック

今回設定する部分は下の4項目

[your-name]
[your-email]
[your-subject]
[your-message]

[your-subject]はあってもなくてもどっちでもいいので今回は削除。

今回の僕の場合だと、

名前が入る部分が[text-601]

メールアドレスが入力される部分が[email-29]

内容部分が[textarea-647]

という項目が自動的に作られたので、

今回やる事は、

[your-name]の部分を[text-601]と置き換える

[your-email]の部分を[email-29]と置き換える

[your-message]の部分を[textarea-647]と置き換える

↓

追加ヘッダーの

Reply-To: [your-email]を、
↓
Reply-To: [email-29]

メッセージ本文の、

差出人: [your-name] [your-email]

↓

差出人: [text-601] [email-29]

メッセージ本文:
[your-message]

の部分を、

メッセージ本文:
[textarea-647]に変更する。

題名の部分は今回は必要ないので削除。

そして、最終的にこんな感じ

フォームタブの部分に関しては適当にこんな感じ。

全ての入力が終わったら「保存」をクリック

そうすると自動的にWordPressのショートコードが作られます。

あとはこのショートコードをコピーして「固定ページ」の「新規追加」に進む。

そしてタイトル部分を例えば「お問い合わせ」などと決めて、後は記事を書く欄に、

先程コピーしたショートコードをそのまま貼り付けて公開すれば出来上がり。

お問い合わせフォーム用の固定ページを作成

ただし今回は自作のWordPressテーマを作ったという設定で、

僕の場合は問い合わせフォームのテンプレート用として「page-contact.php」というPHPファイルを作りましたので、

「page-contact.php」のお問い合わせフォームのHTMLタグ部分にPHPのコードを書き込む必要があります。

ここで使うタグが、

<?php echo apply_filters(‘the_content’, ‘ここにショートコードを挿入’); ?>

先程、自動的に作られたショートコード

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

を、上のタグに埋め込みます。

そうすると、こういったタグが出来上がります。

<?php echo apply_filters(‘the_content’, ‘[contact-form-7 404 "Not Found"]‘); ?>

これをPHPファイル「page-contact.php」のお問い合わせフォーム部分に貼り付ける事により、

ワードプレス化した後のサイトにコンタクトフォームを設置する事が可能。

<div class=”contact-wrapper”>
<label for=”text_id”>お名前(必須)</label>
<input class=”input” type=”text” value=””>
<label for=”text_id”>メールアドレス</label>
<input class=”input” type=”email” value=””>
<label for=”text_id”>お問い合わせ内容</label>
<textarea class=”textarea”></textarea>
<input type=”submit” class=”submit-button” value=”送信”>
</div>

↓

<div class=”contact-wrapper”>
<?php echo apply_filters(‘the_content’, ‘[contact-form-7 404 "Not Found"]‘); ?>
</div>

あとは「固定ページ」→「固定ページ一覧」の「新規追加」から、

新しくお問い合わせページを作り、ショートコードを貼り付けて終わり。

出来上がり

サイトをワードプレス化した後にコンタクトフォーム7を設置する方法｜最後に

これらの方法を順番にやっていけば、WordPress化されたサイトにコンタクトフォーム7を使ってお問い合わせフォームを設置する事が可能になります。

メッセージが送信できない場合

注意点としては、ローカル環境(自分のパソコン)からメールを送信する場合、(僕の場合だと「XAMPP」に)メールサーバーの設定をしていないので、今のままだとエラーが出てメールが送れませんので、ここら辺を注意してみるといいでしょう。

設定が終わって、いざメッセージを送ろうとしても、

「メッセージの送信に失敗しました」などとと表示される場合は、

一度試しに、自分のパソコンからではなく、別のサーバーに既にアップロードしているワードプレスに、

今回の設定を施した上で試してみるといいでしょう。