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

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

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

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

フォームの名称

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

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

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

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

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

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

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

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

フォームの作成方法

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

フォーム名の入力

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

必須マークの設定

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

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

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

項目の設定

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

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

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

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

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

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

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

同じく歯車マークからボックス内の文字を編集していきます。
デフォルト値
選択していない状態の文字を設定します。
値
選択してもらう項目を入力します。改行することで項目が分かれます。

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

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

管理者宛メールの設定

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

自動返信メールの設定

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

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

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

確認画面の設定

確認画面を設定します。

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

完了画面の設定

完了画面を設定します。

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

設定が完了

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

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

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

タグのコピー

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

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

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

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

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

最後に

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