フォームを追加する

パパっとホームページでは、お客様からオーダーシートを頂いてページを作成しております。

その際フォームの設定も行わせて頂いていますが、ホームページを運営していくと新しくフォームを追加したいということがあります。

その際の手順について解説します。

 

フォームを追加するまでの一連の流れ

フォームは「Contact Form 7」というプラグインを利用して追加します。

パパっとホームページでは最初から「Contact Form 7」のインストールは行われております。

ワードプレスの管理画面から「お問合せ」をクリックします。

編集画面が表示されるので、上部にある「新規追加」をクリックします。

言語選択が出てきますが日本語版のワードプレスを利用しているので、デフォルトの言語を使用して「新規作成」を選びます。

新しくフォームが追加されるので、まず最初にフォームの名前を決めて入力します。

名前を決めたら、下のフォームの欄に必要項目を追加します。

追加が終わったらタイトルの横にある「保存」ボタンを押し、コードをコピーします。

先程コピーしたコードを固定ページや投稿に貼り付けます。

ページや投稿を確認すると、フォームができています。

上のフォームは、何も改良を加えていないデフォルトのものです。

 

フォームに項目を追加する

では実際にフォームに項目を追加してみましょう。

例では資料請求とお問合せを1つのフォームで行うことを想定して作ります。

フォームの仕様

  • 性、名(必須)
  • 住所(必須)
  • メールアドレス(必須)
  • 問合せの内容について選択させる
  • 自由記述欄に内容を記述(必須)
  • チェックボタンで内容を確認させる
  • 送信ボタン

を備えたフォームを作成します。

 

最初は真似して作ってみましょう。

ワードプレスの「お問合せ」から設定画面に飛び先程名前を付けたフォームをクリックして編集します。


ここで少し法則性を知っておきましょう。

左側がフォーム編集欄で右側がホームページにできたフォームです。

フォーム編集欄にあるソースと、ホームページにできたフォームを見比べてみると、<p>~<br />に囲まれた部分がそのまま表示されていることがわかります。

そして[]のあとに</p>が入っていることもわかります。

 

左にあるフォーム編集欄に「<p>性(必須)<br />」と記載しておきます。

名前の性を入力させる欄を作ってみます。

名前の入力はテキストで行ってもらうので、「タグの作成」のプルダウンより「テキスト項目」を選択します。

必須項目にチェックを入れ、名前を入力します。

名前は半角英数字にしましょう。サンプルでは「your-name-sei」としてあります。

枠のサイズを設定します。

サイズの指定にあるmaxlengthはこのボックスに何文字まで入力を許すかを指定します。

今回性を入力なので5と設定しています。

以上の入力が終わったら、下にコードが作成されるので、コードをコピーして左のフォームに貼り付けます。

貼りつけたコードの最後に「</p>」を入力しておきます。

これで、新しくフォームが追加されました。

ページを見ると確かに追加されています。

同様の作業で、名や住所、自由記述欄は作成できます。

 

次に「問合せの内容についての選択」を作成します。

何についてのお問合せかを聞くので、選択は1つしかできないように「ラジオボタン」を利用します。

タグの作成から「ラジオボタン」を選択します。

名前を入力した後は、選択項目を入力します。

1つの選択肢毎に必ず改行します。

先程と同じように、できたコードを左のフォームに貼り付けます。

保存すると上のようなフォームが出来ます。

 

チェックボタンで内容を確認させるようにします。

「タグの作成」の「承諾の確認」を利用します。

設定は特に必要はありませんので、コードを左のフォームに貼り付けます。

すると、確認にチェックを入れないとフォームの送信ができなくなりました。

全てを完成させると上のフォームが完成しました。

その他にも機能があるので、使って試してみましょう。

Copyright(c) 2011 パパっとホームページ-ヘルプ All Rights Reserved.