espar form は、PHPが不要な問い合わせフォーム(メールフォーム)ツールです。
JavaScriptのみで動作するため、静的Webサイトや静的ページでも簡単に問い合わせフォームを実装できます。(静的化サービス espar のご契約がなくても、単体で espar form をご利用頂けます)
サーバサイドスクリプト言語(PHP/Perl/Ruby等)・データベース・WordPress等のCMSに依存しませんので、静的なWebページはもちろん、どのようなWebサイトでも簡単に問い合わせフォームを組み込むことができます。
静的サイトでフォームを実現
espar form を使えば、静的なページで簡単に問い合わせフォームを設置することができます。
たった2ステップだけで、html内の <form> タグが動作するようになります。
指定のコードを貼り付ければ設置作業は完了です。あとは、<form>タグ内のクラス名を少しいじれば、それだけで問い合わせフォームが動作し始めます。驚くほど簡単にメールフォームを設置できる様子を以下動画でぜひご覧ください。(約2分)
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 は以下のビジネスチャットに対応しています。
(Slackは米Slack.Inc,の登録商標です。ChatworkはChatwork株式会社の登録商標です。directは株式会社LisBの登録商標です。)
espar form ではメール・チャット以外に、問い合わせフォームでの入力内容を RestAPI を持つ既存システムや各種クラウドサービスと連携することが可能です。
APIの形式やパラメタの渡し方などを柔軟に設定することができますので、任意のシステムとの連携が極めて容易です。以下のような事が可能となります。
- Google社 GSuiteスプレッドシートへの自動登録
- サイボウズ社 kintoneへの自動登録
- その他、独自の社内システムへの自動登録
RestAPIではない別のAPI(SOAPなど)を持つシステムとの連携も可能です。個別開発となりますのでお問い合わせ下さい。
(GSuiteは米国Google.Inc,の登録商標です。kintoneはサイボウズ株式会社の登録商標です)
espar form では、確認画面が表示された直後や、送信を完了した直後など、多数のコールバックを備えています。
| input_ready_callback | 入力画面が表示されきって準備が完了した直後 |
|---|---|
| confirm_ready_callback | 確認画面が表示されきって準備が完了した直後 |
| validation_failure_callback | 入力項目にエラーがあった時にエラーを表示した直後 |
| submit_success_callback | 送信が成功して完了した直後 |
| submit_failure_callback | 送信が失敗で終わった直後 |
コールバックには任意の Javascript 関数を指定することができますので、問い合わせフォームでの独自の挙動や画面遷移を容易に実装することができます。制約はありません。
フロントエンド側の開発で動きのあるページを実装している場合でも、既存のコードに大きな影響を与えることなく、簡単に問い合わせフォームを組み込むすることができます。
入力チェック(バリデーション)を標準搭載
入力値チェック(バリデーション)は一般的なものを標準で用意。<input>タグや<textarea>タグ等にCSSクラスを指定するだけの簡単設定です。標準で以下のような入力チェックが可能です。
| required | 必須項目の入力チェック |
|---|---|
| メールアドレス形式のチェック | |
| emailDomain | メールアドレス形式におけるドメインチェック |
| url | URL形式のチェック |
| number | 符号、小数点、３桁毎のカンマ付き半角数字のチェック |
| 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 ファイルを更新する必要はありません。
espar form がスパム削減にも有効です。技術的な情報はオンラインマニュアルの espar form のスパム対策 をご覧ください。