Wordpress Builder

WinRoad徒然草の管理人が提供するWordPressとホームページビルダーの情報サイトです。

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

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

このエントリーをはてなブックマークに追加

ホームページビルダー17には、標準でお問い合わせフォームが付属しています。プラグインのContact Form 7を使用しなくても、お問い合わせフォームからメールを受け取ることが出来ます。

1. 下記のようなフォームが標準で付属しています。ホームページビルダーから部品を追加したり、削除したり出来ます。

wordpress138

WordPressでフォーム設定

2. お問い合わせフォームの内容を受け取るためには、WordPressで設定する必要があります。『hpbダッシュボード』→『フォーム設定』をクリックします。

3. 『送信先メールアドレス』に、受信者(サイトの管理人)のメールアドレスを記述します。

wordpress139

4. 状況に応じて、送信が成功した場合や、送信が失敗した場合のメッセージ内容の修正して、設定を保存するをクリックします。画像も入れてみました。

wordpress140

フォームの修正

5. これで、一応フォームからメールを受け取ることが出来るようになりましたが、フォームの内容を修正したいと思います。

6. フォームを修正するには、ホームページビルダー17を起動して、お問い合わせのページを開きます。

7. とりあえず不要な箇所は削除します。不要な箇所をドラッグして選択し、Deleteキーで削除することが出来ます。

wordpress141

項目の削除

8. 次に不要な項目も削除します。削除したい項目をクリックして選択します。メニューから『表』→『行の選択』とクリックして、不要作業を削除します。

wordpress142

項目の修正

9. 修正したい項目をクリックして、『ページ/ソース』タブをクリックします。

10. ソースのお名前(漢字)をお名前に変更し、name=”name-kanji”をname=”name”に変更しました

wordpress144

11. 下記のようになりました。

wordpress145

項目の追加

12. ちょっと寂しいので、お名前の下に性別項目を作成してみましょう。

13. 『お名前』項目をクリックしたら、『表』→『行の挿入』→『下へ1行追加』とクリックします。

wordpress146

14. 行が追加されたら、表題(性別*)を入力します。部品を挿入するセルをクリックしたら、『入力部品』ツールバーの『ラジオボタンの挿入』をクリックします。

wordpress147

15. 属性ダイアログが表示されたら、グループ名をsex(任意)、選択値を男性と入力して、OKをクリックします。ラジオボタンのぽっちだけが表示されますので、その後に『男性』と文字を入力します。

wordpress148

16. もう一度入力部品ツールからラジオボタンを挿入します。同様にグループ名をsex、選択肢を『女性』と入力してOKをクリックします。同じ名前が存在しますが、よろしいですかと尋ねられますが、『はい』をクリックします。同様にラジオボタンの後に『女性』という文字を入力します。

wordpress150

17. 完成したら、上書き保存→サイトの公開でデータをサーバーに転送します。ブラウザのhpbダッシュボードが立ち上がったら、データの反映をクリックします。

18. それでは、実際にフォームからデータを送信してみましょう。

wordpress151

19. 送信完了のメッセージが表示されずに、404エラーが表示されました。

wordpress152

フォーム作成上の注意

20. 色々調べて理由が分かりましたので、いくつかフォーム作成上の注意事項を記述しておきます。

  • まず、今回の404エラーの原因は、お名前(漢字)のname=”name-kanji”をname=”name”に変更したのが、エラーの理由だと思われます。name=”お名前”に修正したら、エラーは表示されませんでした。
  • 次にEmailのname=”email”は変更しないようにして下さい。name=”Eメール”に変更したところ、届いたメールが(送信者不明)となっていました。
  • 下記に今回のHTMLタグの作成例を記述しますので、参考にして下さい。
  • <form action=”#” method=”post” name=”hpb_plugin_form”>
    <h3>お問い合わせフォーム</h3>
    <p>お問い合わせは、下記にて承っております。</p>
    <p>*は必須項目です。</p>
    <table>
    <tr>
    <th>お問い合わせ内容*</th>
    <td><textarea name=”メッセージ゙” cols=”40″ rows=”12″  required /></textarea></td>
    </tr><tr>
    <th>お名前*</th>
    <td><input type=”text” name=”お名前”  required /></td>
    </tr><tr>
    <th>性別</th>
    <td><input type=”radio” name=”性別” value=”男性” required /> 男性 <input type=”radio” name=”性別” value=”女性” /> 女性 </td>
    </tr><tr>
    <th>E-Mail*</th>
    <td><input type=”text” name=”email”  required /></td>
    </tr>

お問い合わせフォームの確認

21. それでは、実際にメールを送信してみます。修正したフォームで18と同じような内容で入力してみました。

22. メールが送信され、送信確認のメッセージが表示されました。

wordpress153

23. 下記のように実際にメールが届きました。

wordpress154

お問い合わせフォームの不満箇所

24. ホームページビルダーのお問い合わせフォームには、バリデーション機能がrequiredしかついていません。

25. つまり、emailの箇所にメール形式以外の文字を入力してもそのまま入力できてしまいます。

26. 次回のホームページビルダー18では、この辺を改良してもらえるように期待します。

以上。

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です