eFormによるコンタクトフォームサンプル

コンタクトフォーム

一般的なコンタクトフォーム用の入力フォームサンプル及び、サンキューメッセージのサンプルです。

送信後は、サンキューメッセージを表示します。

コンタクトフォームサンプル

すべての項目が必須項目となっています。

JavaScriptが有効な場合、入力エリアをクリックすると、初期値がクリアされます。

• 尚、このフォームは、サンプルのため、メールアドレスを入力しても、メールは配信されません。

サンプルコード

スニペットコールサンプル

[!eForm? &formid=`generalForm` &autosender=`no-reply@liolion.info` &automessage=`ef_automsform` &tpl=`ef_contactform` &report=`ef_contactreport` &thankyou=`ef_contactthanks` &vericode=`1` &jScript=`ef_js_valueclean` &cssStyle=`ef_css_formstyle`!]

フォームテンプレートサンプル

<!-- ### ef_contactform ### -->
<h3>コンタクトフォームサンプル</h3>
<p>すべての項目が必須項目となっています。</p>
<p>JavaScriptが有効な場合、入力エリアをクリックすると、初期値がクリアされます。</p>

<!-- [ ++ validationmessage ++ ] -->
[+validationmessage+]

<!-- ### Webフォームここから ### -->
<div class="formstyle">
  <form id="generalForm" method="post" action="[~[*id*]~]">
    <fieldset>
      <legend>送信内容</legend>

      <dl>
        <dt><label accesskey="n" for="Name">お名前</label></dt>
        <dd><input type="text" name="Name" id="Name" tabindex="101" maxlength="60" value="お名前" onfocus="clearform(this,'お名前');" eform="お名前:string:1:お名前を入力してください:#REGEX #[^(お名前)]#" /></dd>

        <dt><label accesskey="e" for="email">メールアドレス</label></dt>
        <dd><input type="text" name="email" id="email" tabindex="102" maxlength="40" value="メールアドレス" onfocus="clearform(this,'メールアドレス');" eform="メールアドレス:email:1" /></dd>

        <dt><label accesskey="s" for="regarding">メッセージの種類</label></dt>
        <dd><select name="regarding" id="regarding" tabindex="103" eform="メッセージの種類:string:1">
          <option value="" selected="selected">選択してください</option>
          <option value="サイトに関するご意見・お問い合わせ">サイトに関するご意見・お問い合わせ</option>
          <option value="WEBサイト制作に関するお問い合わせ">WEBサイト制作に関するお問い合わせ</option>
          <option value="パソコンアドバイスに関するお問い合わせ">パソコンアドバイスに関するお問い合わせ</option>
          </select></dd>

        <dt><label accesskey="c" for="message">メッセージ</label></dt>
        <dd><textarea cols="40" rows="10" name="message" id="message" tabindex="104" onfocus="clearform(this,'メッセージを入力してください');" eform="メッセージ:html:1:メッセージを入力してください:#REGEX /[^(メッセージを入力してください)]/">メッセージを入力してください</textarea></dd>

        <dt class="vericodeimg">画像認証</dt>
        <dd class="vericodeimg">
          <ul>
            <li><a href="[~[*id*]~]"><img src="[+verimageurl+]" alt="認証コード" width="148" height="60" /></a></li>
            <li><input type="text" name="vericode" id="vericode" tabindex="105" value=""/>　<label accesskey="c" for="vericode">（認証コード）</label></li>
          </ul>
        </dd>

        <dt class="submit"><label for="submit">送信</label></dt>
        <dd class="submit"><input type="submit" id="submit" name="submit" value="送信" /></dd>

      </dl>
    </fieldset>
  </form>

</div>

<!-- formstyle end -->
<ul>
<li>尚、このフォームは、サンプルのため、メールアドレスを入力しても、メールは配信されません。</li>
</ul>

フィールドフォーカス時に初期値がクリアされるスクリプト

以下のサイトを参考にさせて頂きました。

• フォーム - 構造: Webアクセシビリティ

report メールテンプレートサンプル

<br />
一般的なコンタクトフォームを使って [+Name+] さんから送信された内容です。<br />
<br />
<br />
--------------------------------------------------<br />
　お問い合わせ内容<br />
--------------------------------------------------<br />
<br />
おなまえ：　　　　[+Name+]<br />
メールアドレス：　<a href="[+email+]">[+email+]</a><br />
メッセージの種類：[+regarding+]<br />
<br />
メッセージの内容：<br />
[+message+]<br />
<br />
--------------------------------------------------<br />
　お問い合わせ日：[+postdate+]<br />
--------------------------------------------------

automessege 用テンプレートサンプル

<br />
お問い合わせありがとうございます。お問い合わせを受け付けました。<br />
担当者からの連絡を今しばらくお待ち下さい。<br />
<br />
--------------------------------------------------<br />
　お問い合わせ内容<br />
--------------------------------------------------<br />
<br />
おなまえ：　　　　[+Name+]<br />
メールアドレス：　<a href="mailto:[+email+]">[+email+]</a><br />
メッセージの種類：[+regarding+]<br />
<br />
メッセージの内容：<br />
[+message+]<br />
<br />
--------------------------------------------------<br />
　お問い合わせ日：[+postdate+]<br />
--------------------------------------------------<br />
<br />
このメールは自動返信機能により、送信しています。<br />
このメールには返信出来ませんのでご注意下さい。<br />
<br />
::**::**::**::**::**::**::**::**::**::<br />
　e-mail webmaster@xxx.com<br />
　WEB SITE http://xxx.com<br />
::**::**::**::**::**::**::**::**::**::

サンキューメッセージ 用テンプレートサンプル

<div class="formresult">
  <h3>サンキューメッセージ</h3>
  <p>お問い合わせありがとうございます。お問い合わせを受け付けました。</p>
  <p>あなたのお問い合わせ内容は、あなたのメールアドレスに自動送信されました。</p>
  <p><strong>※このフォームは、サンプルのため、メールは配信されてません※</strong></p>

  <dl>
    <dt>お問い合わせの種類</dt>
    <dd>[+regarding+]</dd>
    <dt>おなまえ</dt>
    <dd>[+Name+]</dd>
    <dt>メールアドレス</dt>
    <dd>[+email+]</dd>
    <dt>お問い合わせ内容</dt>
    <dd>[+message+]</dd>
  </dl>
</div>

<p>尚、自動返信メールが届いていない場合、入力されたメールアドレスが有効なメールアドレスでない可能性があります。</p>
<p>お手数ですが再度、<a href="http://xxx.com/form.html">Web フォーム</a>から送信してください</p>