Formを使った問合せフォームの作り方2017.04.28オカンでも分かるWPTweetホームページにとって問合せフォームは欠かせない要素の一つですね。Form」を取り上げます。ステップバイステップでお伝えします。Formとは、フォーム作成ができるプラグインです。簡単な操作でフォームが作れますし、設置もショートコードと呼ばれる一文をコピペするだけでとてもシンプル。フォーム項目のカスタマイズや細かな設定も比較的簡単に行うことが可能です。Formを使って、実際に問い合わせフォームを作っていきましょう。Formをインストール・有効化することです。手順については以下の記事で解説してあります。Form」というメニューが表示されます。Form」から「新規追加」をクリックしてください。「フォームを追加」画面が表示されたでしょうか。それでは、よくある法人向けの問合せフォームを作ってみましょう。タイトル欄に法人向けフォームなどわかりやすい名前を入力したあと、フォーム項目を追加していきます。「メディアを追加」の下に「選択してください」とありますね。ここから「テキストフィールド」を選んで右の「フォームタグを追加」ボタンをクリックします。下のようにダイアログが表示されたでしょうか。「name」に「法人名」と入力して、「Insert」ボタンをクリックします。すると、下のようにフォーム要素が追加されました。同様に、下の内容でフォームを作っていってください。送信ボタン完成した様子がこちら。「氏名」と「MAIL」、「問合せ内容」は、必須項目として設定します。本文入力欄の下に「バリデーションルール」欄があるので、「バリデーションルールを追加」ボタンをクリックします。下のようにバリデーションルールの入力欄が表示されたでしょうか。「バリデーションを適用する項目:」に「氏名」と入力して、「必須項目」にチェックを入れてください。これで「氏名」を必須項目として設定できました。同様に、「MAIL」と「問合せ内容」も必須項目として設定してください。確認・送信画面を設定する完了画面メッセージ次に、問い合わせフォームの確認・送信画面の設定をします。本文入力欄の下にある「完了画面メッセージ」に、完了画面に表示させたい文言を入力します。「完了画面メッセージ」は、ユーザーが問合せを完了した際に表示されるメッセージです。以下3点の要素を入れておくことをおすすめします。入力した情報が、無事送信されたこと今後の対応について返信が届かないときの連絡先サンプルをご紹介します。以下、サンプルテキストです。メッセージを送信いたしましたお問い合わせいただき、ありがとうございました。1〜3営業日以内に、弊社よりご返信させていただきます。数日中に返事が無い場合は、正しく受信できなかった可能性がありますので、恐れ入りますが下記のメールアドレス、もしくはお電話にて再度のご連絡をお願いします。Standardのボックス機能で簡単に作れます。下記のコードを本文のテキストタブにコピー&ペーストしていただいても結構です。center;">メッセージを送信いたしました。center;">メッセージを送信いたしました。エラー画面それぞれ特定の固定ページなどに遷移したい時に、こちらを入力します。初心者の方は設定不要です。メールの設定お客さま側と、管理者側に届く自動返信メールの設定を行います。自動返信メール(お客様に届くメール)設定の方法お客さまに自動で返信メールを送信する際の設定です。画面右端にある「自動返信メール設定」欄に必要事項を入力します。<重要>自動返信メール設定欄の「自動返信メール」の部分には「email」(自動返信メールに使用する項目のキー)と入力してください。この入力がないと自動返信が届きません。自動返信メール設定の「本文」欄の入力サンプルと、コピペ用のテキストをご用意しました。}は以下の通り対応しています。ここまでの設定で、お客さま側には以下のように反映されます。次に、管理者宛の自動返信設定を行います。画面の右端にある「管理者宛メール設定」欄で設定を行ってください。管理者宛メール設定を入力すると、以下のように反映されます。サンプルとコピペ用テキストは以下の通りです。お問い合わせを受け付けました。{content}12345678910111213141516お問い合わせを受け付けました。名前:{name}フリガナ:{furigana}TEL:{tel}MAIL:{email}お問い合わせ内容:{content}お客さま側・管理者側、二つの自動返信メールの設定を終えたら、ダッシュボード右上の「公開」ボタンを押します。これでフォームの作成は完了です。フォームを設置する作成したフォームをホームページに設置しましょう。フォーム作成画面の右側に「フォーム識別子」という欄があります。ここに表示されているコードを「ショートコード」と呼びます。これをコピーして、フォームを設置したい任意のページにペーストしてください。これだけで、フォームの設置は完了です。以下のようにフォームが表示されるでしょうか。動作を確認しようフォームを設置したら、最後に必ずメールが届くか動作確認を行いましょう。自動返信設定を行っている場合は、「お客さま側」と「管理者側」の双方にメールが届くかをあわせて確認します。先ほど公開したページから、実際に問い合わせを行ってみてください。Formを使ってフォームを設置する方法についてご紹介しました。できるだけ噛み砕いて説明しましたが、それでも難しい方もいらっしゃるかもしれません。その場合は「お問合せフォーム改修」のご依頼も承っております。Standardテクニカルサポート兼ワークショップ講師の川口です。首都圏の専門学校でWebデザインの講師を行う傍ら、デザイン事務所を経営しています。ともすると属人的になりがちなクリエイティブスキルを、体系的に落として伝えることが得意です。Standardは事業を営むあなたのためのWordPressテーマです。多くの事業者が選ぶその理由を、あなたの目でお確かめください。記事一覧へ*広告を任意で表示/非表示にできます分からないことはこちらFAQページよくある質問をまとめています。オカンでも分かるWordPressカスタマイズ方法等をまとめています。テクニカルサポートお悩みに直接回答いたします。株式会社ninoyaブログサイドバーにこのようなプロフィール欄を掲載することができます。見出し・名前(社名)・役職・画像・テキスト・SNSアイコンを自由に設定することができます。HTML入力は不要です。Standardはレスポンシブデザインで設計されています。お手持ちのタブレットやスマートフォンにてデザインをご確認ください。画像を貼ってURLを設定するだけで、自動的にサイズが調整されバナーとして活用できます。告知タイトル画像を使わずに、このようにテキストだけで指定のURLに飛ばす告知欄をつくることもできます。ダミーの電話番号が表示されます。