WordPress/Stingerカスタマイズ

WordPressコンタクトフォームの作り方(超初心者向け)

2016/05/02

簡単にコンタクトフォームが作れた

kantan

こんにちは、ライターのてんむすです。

開設からちょこちょことサイトのデザインをいじってきたのですが、だんだんコツがわかってくるのに反比例して、やったことを忘れてしまうので自分の備忘用、兼これから設定する人向けにわかりやすく解説していきます。

今回はコンタクトフォームの作り方です。

大きな流れは以下の通りです。

1.「Contact Form 7」 プラグインを追加
2.フォームを作成
3.お問合わせの固定ページ作成し、フォームを埋め込む
4.お問合わせ完了の固定ページ作成
5.フォームに、入力完了とともに完了ページを表示させる設定を追記
6.フォームのテキストボックス幅を拡張

では細かく解説していきます。

 

1.「Contact Form 7」 プラグインを追加

コンタクトフォームを作るには、プラグインが必要です。いくつか代表的なプラグインがあるみたいですが、ここでは「Contact Form 7」というプラグインを使っていきます。
まずは、プラグインの新規追加からContact Form 7をインストールして、有効化してください。

左メニューのプラグインを押し、プラグインのページで「新規追加」を押します。

plugin01

 

画面右上の検索ボックスに"contact form 7”と入力してください。(単語の間はスペースを入れたほうがいいみたいです。続けて打ったらお目当てのプラグインが見つかりませんでした。)

plugin02

 

Contact Form 7の今すぐインストールを押します。

plugin03

 

インストールが終わったら“今すぐ有効化”を押します。

plugin04

 

 

2.フォームを作成

先ほどのインストールで左メニューに「お問い合せ」という項目が増えました。

左メニューに「お問い合わせ」をクリックします。コンタクトフォームという画面では“新規追加”を押します。

plugin05

 

コンタクトフォームを追加という画面が出てきます。一番上のテキストボックスはフォーム名になります。どこかに表示されるものでもないのでなんでも大丈夫です。ここでは「お問合せ」としました。

フォームタブの下の入力項目に移ります。
僕は入力フォームに題名は不要と感じたので、削除しました。<p>題名…とその下の行を削除します。
メッセージ本文も入力必須項目にします。"メッセージ本文”の直後に"(必須)”を入れ、設定上も必須項目になるように、その下の“textarea”の直後に’*’(半角*アスタリスク)を入れました。

plugin07

 

メールタブの入力内容に移ります。
"送信先”には自分がお問合せを受け取りたいメールアドレスを入力します。(ユーザが入力したお問合せはメールで届きます、念のため)
送信元はそのままで大丈夫です。。
題名は、さっきフォームタブで題名を消したので、ここでも修正し固定の内容にしました。
追加ヘッダーはそのままで大丈夫です。
メッセージ本文では、先ほどフォームタブで題名を消したので、ここでも題名の行を削除しています。
入力し終わったら、右上の保存を押します。

PLUGIN09

 

保存後に現れる「このコードをコピーして…」の下にあるコードをコピーしておきます。

PLUGIN11

 

 

3.お問合わせの固定ページ作成し、フォームを埋め込む

お問合せフォームを表示させる固定ページを作成します。

左メニュー固定ページから"新規追加”を押します。
タイトルと、本文にはフォーム上部に表示したい内容を記入し、その下に先ほどのコードを貼り付けます。入力が終わったら公開してください。
ここでは、以下の画像のように設定しています。
なお、Seo all in one Packのプラグインを使っている人は Robots Meta NOFOLLOWにチェックを入れます。(このページはクロールに読み込ませる必要のないページなので、読み込ませないための設定です)

plugin10

 

 

4.お問合わせ完了の固定ページ作成

お問合せ完了ページを作成します。これはフォームに入力した後に表示し、入力が正常に完了したことを通知する画面です。これを設定しない場合、フォームの入力完了時に、画面下部に"ありがとうございました”程度の文章があっさり表示されるくらいで正常に完了できたのかがわかりづらいです。

左メニュー固定ページから“新規作成”を押します。
タイトルと、本文に入力完了後に表示させたいメッセージを入力し、公開してください。
ここでは画像のように設定しています。
Seo all in one Packのプラグインを使っている人は Robots Meta NOFOLLOWにチェックを入れます。
(お問合せページと同じ理由です。)

PLUGIN12

 

 

5.フォームに、入力完了とともに完了ページを表示させる設定を追記

お問合せ入力後に、お問合せ完了ページを表示させるよう設定をします。

先ほど作成したお問合せ完了ページのURLをコピーしておいてください。
左メニューお問合せのコンタクトフォームから、さっき作成した「お問合せ」をクリックします。
"その他の設定”タブを選択し、テキストボックスに

on_sent_ok: "location.replace('http://temmusu.net/finish');"

と入力して保存します。なお、ここのhttp://の部分は先ほどコピーしたお問合せ完了ページのURLを入力します。

PLUGIN15JPG

 

 

6.フォームのテキストボックス幅を拡張

一通りは5.までで完成しているのですが、フォームの幅が狭く感じたので広くしました。

外観のテーマの編集から、style.cssの一番下に下記の内容を貼り付けてください。

/* contactフォームのスタイル調整 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
width: 90%;
}

<before>

PLUGIN13

<after>

PLUGIN16

以上です。

あとはお問合せフォームのページをメニューに追加するなどして、利用者がお問合せのページに飛べるようにしてください。

固定ページが自動でメニューに追加される設定をしている人は、メニューからお問合せ完了ページを外すことをお忘れなく。
おわり

スポンサーリンク

-WordPress/Stingerカスタマイズ
-