フォームを追加する
パパっとホームページでは、お客様からオーダーシートを頂いてページを作成しております。
その際フォームの設定も行わせて頂いていますが、ホームページを運営していくと新しくフォームを追加したいということがあります。
その際の手順について解説します。
フォームを追加するまでの一連の流れ
フォームは「Contact Form 7」というプラグインを利用して追加します。
パパっとホームページでは最初から「Contact Form 7」のインストールは行われております。
ワードプレスの管理画面から「お問合せ」をクリックします。
編集画面が表示されるので、上部にある「新規追加」をクリックします。
言語選択が出てきますが日本語版のワードプレスを利用しているので、デフォルトの言語を使用して「新規作成」を選びます。
新しくフォームが追加されるので、まず最初にフォームの名前を決めて入力します。
名前を決めたら、下のフォームの欄に必要項目を追加します。
追加が終わったらタイトルの横にある「保存」ボタンを押し、コードをコピーします。
先程コピーしたコードを固定ページや投稿に貼り付けます。
ページや投稿を確認すると、フォームができています。
上のフォームは、何も改良を加えていないデフォルトのものです。
フォームに項目を追加する
では実際にフォームに項目を追加してみましょう。
例では資料請求とお問合せを１つのフォームで行うことを想定して作ります。
フォームの仕様
- 性、名(必須)
- 住所(必須)
- メールアドレス(必須)
- 問合せの内容について選択させる
- 自由記述欄に内容を記述(必須)
- チェックボタンで内容を確認させる
- 送信ボタン
を備えたフォームを作成します。
最初は真似して作ってみましょう。
ワードプレスの「お問合せ」から設定画面に飛び先程名前を付けたフォームをクリックして編集します。
左側がフォーム編集欄で右側がホームページにできたフォームです。
フォーム編集欄にあるソースと、ホームページにできたフォームを見比べてみると、<p>～<br />に囲まれた部分がそのまま表示されていることがわかります。
そして[]のあとに</p>が入っていることもわかります。
左にあるフォーム編集欄に「<p>性(必須)<br />」と記載しておきます。
名前の性を入力させる欄を作ってみます。
名前の入力はテキストで行ってもらうので、「タグの作成」のプルダウンより「テキスト項目」を選択します。
必須項目にチェックを入れ、名前を入力します。
名前は半角英数字にしましょう。サンプルでは「your-name-sei」としてあります。
枠のサイズを設定します。
サイズの指定にあるmaxlengthはこのボックスに何文字まで入力を許すかを指定します。
今回性を入力なので5と設定しています。
以上の入力が終わったら、下にコードが作成されるので、コードをコピーして左のフォームに貼り付けます。
貼りつけたコードの最後に「</p>」を入力しておきます。
これで、新しくフォームが追加されました。
ページを見ると確かに追加されています。
同様の作業で、名や住所、自由記述欄は作成できます。
次に「問合せの内容についての選択」を作成します。
何についてのお問合せかを聞くので、選択は1つしかできないように「ラジオボタン」を利用します。
タグの作成から「ラジオボタン」を選択します。
名前を入力した後は、選択項目を入力します。
１つの選択肢毎に必ず改行します。
先程と同じように、できたコードを左のフォームに貼り付けます。
保存すると上のようなフォームが出来ます。
チェックボタンで内容を確認させるようにします。
「タグの作成」の「承諾の確認」を利用します。
設定は特に必要はありませんので、コードを左のフォームに貼り付けます。
すると、確認にチェックを入れないとフォームの送信ができなくなりました。
全てを完成させると上のフォームが完成しました。
その他にも機能があるので、使って試してみましょう。
