静的サイトのために開発された問い合わせフォームツール
espar form とは

espar form は、静的Webサイトや静的ページ向けに開発されたJavaScriptだけで動作する問い合わせフォームツールです。

サーバサイドスクリプト言語(PHP/Perl/Ruby等)・データベース・WordPress等のCMSに依存しませんので、静的なWebページはもちろん、どのようなWebサイトでも簡単に問い合わせフォームを組み込むことができます。

静的サイトでフォームを実現

espar form を使えば、静的なページで簡単に問い合わせフォームを設置することができます。

たった2ステップだけで、html内の <form> タグが動作するようになります。

指定のコードを貼り付ければ設置作業は完了です。あとは、<form>タグ内のクラス名を少しいじれば、それだけで問い合わせフォームが動作し始めます。

espar form によって不要になるもの

  • CMSにプラグインを入れる作業と設定 (WordPressのContactForm7など)
  • CMSのプラグインとCMS本体の相性問題や動作確認
  • sendmailサーバの稼働や設定・動作確認
  • PHPやPerl等でプログラム開発、セキュリティチェック

 

htmlを編集するだけでフォームが動き出す。これが espar form のコンセプトです。Webデザイナーやコーダーがコーディングしたhtml、または静的サイトジェネレータが自動生成した html に Javascript を貼り付けるだけですので、

  • 問い合わせフォームのページだけドメイン名が変わってしまう
  • 問い合わせフォームのページだけデザインやテイストが変わってしまう
  • 問い合わせフォームの動きや振る舞いを自由にカスタマイズができない

といった制約がなく、あらゆるフォームに適用することができます。

espar form が選ばれる理由

  • PHP/Ruby/Perlなどの環境が不要で静的ページ上で動作する
  • 制作担当者は原則 <form> タグ内の作成に集中できる
  • メール送信プログラムやサーバ環境を一切考慮しなくてよい
  • 問い合わせフォームのデザインや振る舞いに制約がない
  • 問い合わせフォームのページでホスト名(ドメイン名)が変化しない

柔軟なメールテンプレート

専用の管理画面から、メールの宛先やタイトル・本文などを自由に指定することができます。もちろん「通知メール」と「自動返信メール」を別々に設定可能です。

また、フォームで入力された値に置き換えるインプット変数を使用できるほか、下図のように入力日時やIPアドレスなどの環境変数も指定することができます。

if構文を使った条件分岐も可能です。例えば、ラジオボタンの値によって文面を変えたり、チェックボックスのON/OFFに応じてメールの宛先を変えるといった制御をすることができます。

elseif や else などの構文を併用することで更に高度な条件分岐を設定することができます。PHPのプラグラムを書いたり、プラグインをカスタマイズする必要は全くありません。

ビジネスチャット連携

espar form はビジネスチャット連携機能を標準で搭載しています。他の連携サービスを組み合わせたり、bot を個別に開発する必要はありません。

ビジネスチャット連携により、問い合わせフォームに入力された内容がそのままチャットに届くようになります。メールのように埋没するリスクがありません。

また、未既読を確認できるビジネスチャット(direct)と連動すると、誰がまだ問い合わせを見ていないかの確認もできるようになります。

2019年1月現在、espar form は以下のビジネスチャットに対応しています。

(その他のビジネスチャットにも順次対応予定です。連携に興味お有りのビジネスチャットベンダー様はこちらからお問い合わせ下さい)

業務システム・サービス連携

APIが提供されている既存のシステムやサービスと連携することも可能です。(個別の開発が必要となりますので別途ご相談ください)

連携の例

  • CRMツールやSFAツールとの連携
  • 問い合わせフォームの内容を整形して独自の業務システムに登録

コールバックによる高い拡張性

espar form では、確認画面が表示された直後や、送信を完了した直後など、多数のコールバックを備えています。

input_ready_callback 入力画面が表示されきって準備が完了した直後
confirm_ready_callback 確認画面が表示されきって準備が完了した直後
validation_failure_callback 入力項目にエラーがあった時にエラーを表示した直後
submit_success_callback 送信が成功して完了した直後
submit_failure_callback 送信が失敗で終わった直後

コールバックには任意の Javascript 関数を指定することができますので、問い合わせフォームでの独自の挙動や画面遷移を容易に実装することができます。制約はありません。

フロントエンド側の開発で動きのあるページを実装している場合でも、既存のコードに大きな影響を与えることなく、簡単に問い合わせフォームを組み込むすることができます。

Web制作者の手間を減らす便利機能

入力チェック(バリデーション)を標準搭載

入力値チェック(バリデーション)は一般的なものを標準で用意。<input>タグや<textarea>タグ等にCSSクラスを指定するだけの簡単設定です。標準で以下のような入力チェックが可能です。

required 必須項目の入力チェック
email メールアドレス形式のチェック
url URL形式のチェック
number 符号、小数点、3桁毎のカンマ付き半角数字のチェック
digits 半角数字のみの形式のチェック
alpha 半角アルファベットのみの形式のチェック
alphanumeric 半角英数字とアンダースコアのみの形式のチェック
zip 郵便番号形式のチェック
tel 電話番号形式のチェック
minlength 最小文字長のチェック
maxlength 最大文字長のチェック
min 最小値のチェック
max 最大値のチェック
equalTo 別入力項目と一致しているかどうかのチェック

<input>タグなどの入力要素に、クラス指定をするだけで入力チェックが機能し始めます。

またエラークラスを定義した <span> 要素や <div> 要素等でエラー文言をあらかじめ用意しておけば、入力値エラーが発生した時にエラー文言が自動的に表示されるようになります。(詳しくはオンラインマニュアルの バリデーションとエラー表示 のページをご覧下さい)

ローカル環境からの動作確認

espar form は、制作者のローカル環境でも動作確認が可能です。XAMPP / VirtualBox / Dockerコンテナなどローカルマシン上のWebサーバ環境からメール送信のテストを行うことができます。

(セキュリティの観点から、本稼働後には設定が強制的にオフになります)

また、本番環境以外の別ホスト名を割り当てたステージングサーバ上でも動作確認をすることができます。

サンプルフォームの提供

espar form を使ったサンプルフォーム・サンプルプログラムをご提供しています。espar form を使った実際の html/javascript を見て頂くことで、簡単に使用方法を理解することができます。

確認・完了画面の自動生成

espar form では、問い合わせフォームの確認ページを個別に作る必要がありません。espar form が <form> タグ内の構造を分析して自動的に確認ページを生成します。

また <form> タグを記載するページに、メール送信完了時の文言を記述しておくだけで、完了画面までも自動生成します。

espar form が自動生成する確認画面や完了画面では、入力フォームで指定されているクラス属性を保持しますので、CSSで見た目を自由に制御することができます。自動生成するページの代わりに任意のページを表示するなど、高度なカスタマイズも可能です(コールバックを使用する前提)

安心のセキュリティ機能

問い合わせフォームは往々にしてスパム行為に悩まされがちです。espar form ではプログラム等による不正投稿を防ぐため以下の機能を標準で搭載しています。

  • 連続送信の禁止指定
  • 指定ページ外からの投稿拒否

これらの設定を espar form の管理画面から変更することができます。変更は即時反映されます。問い合わせフォームのある html ファイルを更新する必要はありません。