WordPressブログ|お問い合わせフォームの作成方法

trust

おはようございます、名畑です。
今年のおみくじの運勢は中吉でした。
何事も普通が一番。まったり今年も過ごしていきたいと思います。

今回はWordPressでお問合せフォームが作成できる「Trust Form(トラストフォーム)」を詳しくご紹介します
フォーム作るの難しい!フォームの作成で制限されるの面倒!って方も慣れれば簡単に作成と管理ができます。
Trust Formでブログをパワーアップしましょう!
インファクトのお客様でTrust Formが入っていない!という方はINFACTへお問い合わせ下さいね。

目次

  • 問い合わせフォームの設定
  • 問い合わせフォームの作成方法
  • 問い合わせフォームの公開方法について
  • 最後に

 

問い合わせフォームの設定

フォームの名称

まずは簡単にTrust Formで作れるお問い合わせフォームの例を見てみましょう。

trust06

テキストボックス
名前、会社名、電話番号等短い文字で入力する場合に使用

メールアドレス
メールアドレス専用のテキストボックス
これを使用することで、この欄に入力されたメールアドレスに自動返信を設定している場合はメールが転送されます。
1つのメールアドレスのボックスを使用する毎にメールの転送が行われるので注意してください。

セレクトボックス
選択項目がある場合に使用
プルダウンメニューが出てきて1つを選択できるので、選択項目が3つ以上の場合はセレクトボックスを使用するのがオススメ

ラジオボタン
表示しているボタンのどれかを選択させたい時に使用
項目が2〜3つと少ない場合に使用するのがオススメ

テキストエリア
長文を書いて欲しい場合に使用
フォームで申し込みの場合、不明点があるかもしれないので備考欄を使用するのがオススメです

チェックボックス
上記のサンプルにはないですが、複数選択項目があり2つ以上選択して欲しい場合はチェックボックスを使用します

以上のことをふまえてお問い合わせフォームを作成していきます。

 

フォームの作成方法

20160108a01

左メニューにある「Trust Form」から「フォームの新規作成」をクリックします。

 

フォーム名の入力

trust07

まずフォーム名を入力します。 自分が後で見た時にわかりやすいように、「◯月◯日 (セミナー名前)募集」などとしておくと便利です。

 

必須マークの設定

まずは必須マークを設定します。
黒帯の中の「必須マーク」をクリックしてください。

20160108a02

するとウィンドウが出てきますので必須だとわかりやすい文字・記号を入力します。
ここでは半角の「*」を入力します。
設定すると必須項目がここで設定した文字が赤文字で表示されます。

20160108a03

「テキストを入力してください」は、注意事項や案内等で使用したい場合入力します。

8

 

項目の設定

次に必要な項目を「フィールド」から「フォーム要素をドラッグ・アンド・ドロップして下さい」へ移動させましょう。

9

以下の画面はテキストボックスの表示です。

 

10

編集したいテキストボックスをクリックすると入力できるのでタイトルを入力します。
右の歯車のボタンを押すと右の「属性」「入力チェック」「アキスメット設定」が表示されます。
入力を必須にしたい場合はここで必須にチェックを入れましょう。

メールアドレスの設定をします。
ここで入力してもらったメールアドレスに自動返信メールを設定することができます。
フィールドからメールアドレスを設定していきます。

20160108a04

メールアドレスと確認用のメールアドレスを設定しました。
このままですと入力されているメールアドレスが同じか確認できないのと2通メールが送られてしまうので設定していきます。

20160108a05

メールアドレスはそのままで確認用の方を設定していきます。
こちらのみを必須項目にします。(上のメールアドレス欄と表記が同じでないとフォームの送信ができないように設定するため確認用だけで問題ありません)
重要なのがRe-entering E-mailです。
この欄で上の「メールアドレス」の記入した文字と同じ文字か確認しています。
もちろんこの設定をしていればメールの自動返信も1通になります。

セレクトボックスを設定していきます。

20160108a06

同じく歯車マークからボックス内の文字を編集していきます。
デフォルト値
選択していない状態の文字を設定します。

選択してもらう項目を入力します。改行することで項目が分かれます。

ラジオボタンやチェックボックスもこの値のように設定することができます。

 

テキストエリアも同様に設定をしましょう。

80a5a94fad8b64c4f0af5fd919d272fc-1024x614

 

管理者宛メールの設定

お問い合わせがあった時に管理者宛に届くメールの設定をしましょう。

57b8ad171c27ba4a3f9ece1dc83d4034

 

自動返信メールの設定

フォームを送信した人に「フォームを送信しましたよ」と確認のために送るメールを自動返信メールに設定しておきます。
「自動返信メールを設定する」にチェックを入れます。

13

 

お問い合わせがあった時にユーザー宛に届くメールの設定をしましょう。
差出人や件名が同じであったり、長いと迷惑メールや文字化けの原因となってしまいますので注意して設定してください。

14

本文は必要に応じて入力してください。

 

確認画面の設定

確認画面を設定します。

15

ユーザー側に入力後もう一度確認する項目になります。
テキストを入力したい場合は「テキストを入力して下さい」をクリックしてテキストを入力していきます。

 

完了画面の設定

完了画面を設定します。

16

確認を終えたときに表示しておきたい言葉などを入力します。
この欄はHTMLタグで入力する必要があるので注意してください。

 

設定が完了

17

すべての設定が完了したらページ一番下の青い更新ボタンを必ずクリックしましょう。

 

問い合わせフォームの公開方法について

お問い合わせフォームの作成が完了したのでWordPressブログのページで公開していきましょう。

 

タグのコピー

18

更新をした後画面に「右のタグをコピー&ペーストして投稿またはページに挿入して下さい」という項目が出てきます。
そこにあるタグをコピーしましょう。

 

コピーしたタグを貼り付ける

「記事投稿ページ」または「固定ページ」にコピーしたタグを貼り付けましょう。

19

 

記事のタイトルにはフォームのタイトルが反映されないので、見ている人に分かるようにフォームの名前をタイトルに入力しましょう。
貼り付けが完了したらプレビューで確認します。

 

20160108a07

上記のようにお問い合わせ画面が表示されれば完了です。
ちゃんと送信されるかテスト送信も忘れずに!

 

最後に

難しい文言が出てきますが簡単にお問い合わせフォームを作成することができます。
項目を自由に組み替えられて複数のフォームを簡単に管理できるのがメリットです。
デフォルトでこんなに自由にお問い合わせフォームが作れるのは、ほとんどないのではないでしょうか?
是非使ってみてくださいね!

  • シェア
  • twitter
The following two tabs change content below.
名畑かなえ
株式会社インファクトのディレクターです。
フロントエンジニアだった知識を活かしてお客様のためになるような情報発信、制作を行なっております。また日本だけでなくベトナムスタッフとも連携して業務をとりまとめております。
好きなことは、自分で1から考えるものづくり。本の装丁が気になったり布ものやお菓子を自分でデザインして注文するのが好きです。
やっぱりはちみつなしでは生きてゆけない。
  • twitter
  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP
LINE it!