ホームページビルダー17 お問い合わせフォーム

ビルダー17には、様々な便利な機能があり凄いです。今回は、その中の一つ、「お問い合わせフォーム」について説明します。

前提条件

今回は、WordPressサイト作成済みであることを前提とします。まだの方は、以下のいずれかを実施してください。

今回の内容は、XAMPPサーバーでは、実施できませんのでご注意ください。XAMPPで行う場合には、別途、メールサーバーの知識と場合によってネットワークの知識が必要です。

もし、ビルダーを閉じた場合には、メニューバーの「WordPress」の一番下の中から選んでサイトを開きます。

そもそも「お問い合わせフォーム」って必要?

お問い合わせフォームは、現在でも、お客様との接点として、とても重要な役割があります。

メールだと駄目なの?

別の方法として、メールによる送信もありますが、メールでは、以下の欠点があります。

  • 環境によっては、メールが使えない。(例:出先のホテルにあるパソコンなど)
  • メールが使えたとしても、セキュリティ上、パスワード系を入力したくない。(例:まんが喫茶など)
  • 場合によっては、送信元を知らせたくない
  • 自由なフォーマットで送信されてしまう

お問い合わせフォームには、上記の欠点がありません。

FaceBook・Twitterってどう?

SNSの普及により、お客様との接点として、FaceBook・Twitterなどがありますが、運営するには、スキルと時間が必要になるだけではなく、炎上などのリスクがあります。お問い合わせフォームには、炎上のリスクがありません。

現在でも、この「お問い合わせフォーム」は重要と言えます。

実現方法は、超簡単

ホームページビルダー16までは、CGI/Perlの知識が必要であったりと、一般の方には、敷居が高かったと思います。WordPressユーザも同様に例外ではありませんでした。

しかし、朗報です。ホームページビルダー17は、あらかじめ便利なWordPressプラグインが実装されており、超簡単に実現することができます。

実現方法

ワードプレス側の操作で実現できます。

ブラウザを立ち上げ、ドメイン名+wp-login.phpと入力します。

例)「http://pcmanabu.com/hpb17/」の場合は、「http://pcmanabu.com/hpb17/wp-login.php

または、右下のログインをクリックしてもいいです。

ログインしたら、「フォーム設定」をクリック

そして、メールアドレスを入力し、「設定を保存する」をクリックするだけで完成です。

動作確認

ホームページに移動します。WordPress画面から移動するなら、ブラウザ左上のブログ名をポイントし、「サイトを表示」

そして「お問い合わせ」をクリックし、送信できることを確認します。

何も入力しないで送信すると

きちんと必須項目を入力するように注意してくれます。

必須項目を入力して送信する

「*」をすべて入力して「送信」をクリックします。

これが送信したメッセージ。もうちょっとわかりやすくカスタマイズした方が良さそうですね。WordPress編集画面のトップページから「フォーム設定」⇒「送信が成功した場合」で目立つように変更できます。

以下が届いた例。これもカスタマイズしてわかりやすくした方が良さそうですね。

なぜ、送られるの?

私の場合、全自動すぎて、正直、怖い感じがしました。ここで、なぜ送れるのかを説明しましょう。理解することで、自由にカスタマイズできるようになります。

始めにお伝えしたように、本フォームは、WordPressプラグインによって実現されています。そのプラグインのある場所は、サーバー側の「\wp-content\plugins\hpbtool\form.php」です。この中身を理解することで、どうして送信されるかが理解できます。※パソコン上には、このファイルはありません。

理解するには、PHPの知識が必要になりますので、私が調査した結果を記載します。

ビルダーを起動し、メニューバーの「WordPress」の一番下の中から選んでサイトを開きます。

「WordPress」ビューから「お問い合わせ」をダブルクリック

そしてアンケートフォーム部分をクリックし、「HTMLソース」をクリックします。

主な部分が「form」タブ内です。ホームページビルダーで参照しました。ちなみに、このファイルは、「C:\Users\ユーザ名\AppData\Roaming\Justsystem\Homepage Builder Version 17\wordpress\wpsiteサイト作成年月日時間秒\contact.xml」にあります。

<form action="#" method="post" name="hpb_plugin_form">
	<h3>お問い合わせフォーム</h3>
	<p>弊社製品についてのお問い合わせは、下記にて承っております。</p>
	<p>*は必須項目です。</p>
	<table>
		<tr>
			<th>お問い合わせ内容*</th>
			<td><textarea name="message" class="l" cols="40" rows="12"  required /></textarea></td>
		</tr><tr>
			<th>お名前(漢字)*</th>
			<td><input type="text" name="name_kanji" class="m"  required /></td>
		</tr><tr>
			<th>お名前(フリガナ)*</th>
			<td><input type="text" name="name_kana" class="m"  required /></td>
		</tr><tr>
			<th>E-Mail*</th>
			<td><input type="text" name="email" class="l"  required /></td>
		</tr><tr>
			<th>電話番号(半角)*</th>
			<td><input type="text" name="tel" class="l"  required /></td>
		</tr><tr>
			<th>FAX番号(半角)</th>
			<td><input type="text" name="fax" class="l" /></td>
		</tr>
	</table>
	<input type="hidden" name="hpb_plugin_form_submit" value="true" />
	<input type="submit" value="  送信  " class="button" />
</form>

ルール1:お問い合わせフォームは、必ず<form>タグで囲む

基本中の基本として、これから記述することは、<form>タグ内に記述します。タグ外だと無効になります。

<form action="#" method="post" name="hpb_plugin_form">
</form>

駄目な例formタグの外に書いたinputタグは、無視される

</form>
<input type="hidden" name="hpb_plugin_form_submit" value="true" />
<input type="submit" value="  送信  " />
 

ルール2:必ず「name="hpb_plugin_form_submit"」を記載する

プラグインによって、この記述があると、アンケートフォームであると認識します。この部分は、見せたくないのでtype="hidden"指定です。表示関係ないからと誤って消さないように気を付けましょう

<input type="hidden" name="hpb_plugin_form_submit" value="true" />

ルール3:メールで届けたい名前を記載する

送信されるの左側の文字列は、name属性によって決まります。

下の赤い部分を日本語などに変えることによって理解しやすいものに変更することができます。

ルール4:入力必須項目には、「required」指定をする

required属性を指定することで入力必須にできます。

必須にしたい場合

<input type="text" name="email"? required />

任意にしたい場合

<input type="text" name="email"? />

ルール5:大きさによってclass=「l」,「m」,「s」を使い分ける

ビルダーでは、テキストボックスの大きさをClass指定で分けているようです。試しに以下のようにしましたのでご覧だくさい。

<input type="text" name="sizeL" class="l" />
<input type="text" name="sizeM" class="m" />
<input type="text" name="sizes" class="s" />

おおよその目安ですが、全角で
サイズLは、42文字
サイズMは、26文字
サイズSは、16文字
でした。

行の追加方法や、ラジオボタン、チェックボックスの追加方法など記載すべきことは、ありますが、本日は、以上とします。
では、次回もお楽しみに!
   このエントリーをはてなブックマークに追加       

  • ゲストたんぽぽ

    びっくりです。 ただ、その一言ですね

    • pcmanabu

      おはようございます。

      コメントを見たとき、エッチサイトのスパムコメントかと思ったら、たんぽぽさんではありませんか!
      いつもご愛読ありがとうございます。ビルダー16より、大幅に簡単になりましたね。

      この機能は、WordPressの機能を拡張できるプラグインによって実現してます。

      ジャストシステムさんは、プラグインを使いこなしていて、「WordPress」使いの自分もすごく勉強になります。

      hpb17は、いろんな機能を搭載していて、凄いですね!
      では、また!

      • tanpopo3781

        エッチサイト…(~_~;)

        それでは、色気のある質問をさせていただきます。

        タイトル →ホーム

        • pcmanabu

          レディに対して大変失礼しました。よく来るんです。エッチサイトへのお誘いが同じような言葉で。

          今回のご要望は、
          http://pcmanabu.com/?p=3321
          の一番下より少し上。

          「 教育方針・理念・スクールモットー」⇒「 教育方針」明記しました。

          同様の操作で
          「ホーム」⇒「Home」にできます。

          場所がご希望と違いましたら教えてください。