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

2019.01.26 / 更新日：2019.06.10

困ってる人

ホームページを作ってワードプレス化したんだけど
お問い合わせフォームって一体どうやってつければいいんだろう？

既にワードプレス化しているという事でしたらコンタクトフォームというプラグインが便利ですよ

オペレーター

困ってる人

それは前に、一度試した事があるんだけど
デザインやレイアウトが崩れたり、うまく送信が出来ない事があって…

こんにちは、よろと申します。

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

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

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

See the Pen
ZwbNxj by みあちゃん❤️Web制作始めました (@malg_tw)
on CodePen.

↑は今回使ったお問い合わせフォームのテンプレートです。

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

Contact Form 7をインストール

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

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

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

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

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

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

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

<input> には inputクラス

1	<input> には inputクラス

<textarea> には textareaクラス

1	<textarea> には textareaクラス

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

1	「送信ボタン」部分には 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>

<label for="text_id">メールアドレス</label>

<label for="text_id">お問い合わせ内容</label>

</div>

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

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

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

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

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

「名前」の部分の設定

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

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

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

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

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

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

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

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

お問い合わせ内容部分

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

送信ボタンの設定

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

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

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

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

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

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

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

今回の僕の場合だと、

名前が入る部分が[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のショートコードが作られます。

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

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

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

ここで使うタグが、

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

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

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

[contact-form-7 id="21" title="contact-form"]

1	[contact-form-7 id="21" title="contact-form"]

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

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

<?php echo apply_filters('the_content', '[contact-form-7 id="21" title="contact-form"]'); ?>

1	<?php echo apply_filters('the_content', '[contact-form-7 id="21" title="contact-form"]'); ?>

これを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 id="21" title="contact-form"]'); ?>
</div>

<label for="text_id">メールアドレス</label>

<label for="text_id">お問い合わせ内容</label>

</div>

↓

<?php echo apply_filters('the_content', '[contact-form-7 id="21" title="contact-form"]'); ?>

</div>

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

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

出来上がり

最後に

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

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

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

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

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

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

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

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール