Synergy Basicでリアルタイムバリデーションメールフォームを作る:その1

2014/11/30 2016/1/25 JS/jQuery, UI/UX

メールフォーム作成と言えばPHPで「sendmail」を思いつきますが、
以前PHPを使えない環境下でメールフォームを作るという案件がありました。その際に「Synergy Basic」を利用しました。
実はsynergy Basicを使ったフォームバリデーション作成は2回目だったので
まだまだ要望があるのでは？と思いまとめてみました。

「コンバージョンを挙げる為に」クライアントの3つの課題

1.フォームのデザインを変えたい。

→ユーザビリティを考えたデザインの変更、数字の出るデザイン。(Synergy BasicならオプションでABテスト、今回は0からデザインしますが、デザインテンプレートも利用できます。)

2.入力補助(リアルタイムバリデーション)を導入したい。

→javascriptによるリアルタイムバリデーション、郵便番号補助、その他UI、UX改善(ここはJSで構築します)

3.Analytics等のデータを取得できるaspを使いたい。

→ssl対応でGA、ADPLAN、アドエビスのコードがSSL対応で導入ができます。それ以外にもSynergy Basicに元々備わったデータ検証サービス(文字入力ミスなど)が使えます。

上記の課題は普通のサーバー環境を用意できる方は何も問題ないとおもうのですが、会社のしがらみ！？などの影響やセキュリティー的にそう出来ない場合があります。
ということで今回はdbとフォーム部分をSynergy Basicという有料aspを利用します。

Synergy Basicって何？

CRM・顧客管理クラウド型システム「Synergy!BASIC」
「Synergy!BASIC」は、基本機能として顧客の基本情報をすべてをひとまとめにして格納するWEBデータベースです。Eメールや電話、FAX、商談など、形式やタイミング、入力経路の違う顧客情報にもフレキシブルに対応。入力した顧客情報を、多様に分析・集計できる顧客管理システムなので、最適なCRM活動がおこなえます。

という訳でサクッと引用しましたがSynegyのサービスを1記事で語るのは不可能で多機能です。なんと言っても導入している錚々たる企業様。The信頼感ですね。

メールフォーム作成の手順(カスタムデザインの場合)

Synergy Basicでの契約
↓
データベースの作成
↓
データベースの項目をフォームに紐づける
↓
ローカルでデザイン制作
↓
synergy側のサーバーにアップ

Synergy Basicでの契約

まずは契約。だけどかなり機能が豊富でどーすればいいのか迷ってしまう。。。そんな時はお問い合わせで聞くのが一番早いと思います。有料サービスですので担当の方が親切に教えてくれます。最初はお問い合わせと、資料請求の選択肢しか無いので、いきなり登録、契約にはならないと思います。(お試し登録期間もあります)
独自ドメイン、SSLサーバ証明書代行、多機能フォームなどのオプションの追加などが選べ、後からの追加変更も出来ます。

さぁ契約が出来たら

まずはデータベースを作りましょう！とその前に…サイトにログインする際には証明書が必要です。証明書のインストールはこちらの記事が分かりやすいかと思います。
macの場合はkeyチェーンにインストールですね。(mac環境だとログイン中に一定時間でパスワードの入力を迫られます。セキュリティーがしっかりしてるという事でしょうか)

データベースの作成

それではデータベースの作成です。シナジーなら簡単にデータベースが作成できます。まずはフォームの項目を追加ですね。
データベースの項目は後で変更も出来ますが、項目が減ったりするとそれまでの得たデータが失われますので最初にしっかりデータベース設計しておくといいと思います。
まずはGナビ「データベース」→左サイドメニューの「データベース設計」から作成します。
余談ですが、masterIDという物がありますが、これはデータベースの通しIDのようなものです。データベースは項目によって並べ替えが出来たりしますので、masterIDが無いとめちゃくちゃになりますからね。ですので、アドレスの項目はこのIDを使えば大丈夫です。
また、追加する項目はこの時点である程度どういったフォームの種類にするか決めておく必要があります。
入力時にプルダウンで以下のカテゴリーを選択します。
例えば…
input type=”text”を使いたいなら「文字型」
input type=”radio”やselectを使いたいなら「単一選択型」
input type=”checkbox”を使いたいなら「複数選択型」
などです。

フォームの項目に必要な項目を漏らさず入力できればこれでDBの設定は終わりです。

データベースの項目をフォームに紐づける

設計が完了したらフォームへの紐付け作業です。
まずはメニューにある上部Gナビにあるフォームボタンから遷移して「新規作成」ボタンを押します。7種類のフォームタイプと右側にはPC向けと、ガラケー用が選択できます。

今回は通常のお問い合わせフォームなので2番目の「新規・更新登録フォーム」を選択。

まずは1.基本設定画面になりますが、タイトルとコメント、SSL、戻りURLなどの設定ができます。(後からも変更可能です。)任意の値を入力。
次に2.DB選択で先ほど作成したDBをプルダウンから選択します。

あとは3.確認、4.完了と進みます。
さぁフォームができましたので、紐づけます。再度フォームメニューから今度は編集ボタンから「項目設定」へ。

すると表示項目という箇所があるのでプルダウンで選択して「追加」していきます。
追加すると気づくと思いますが、これが先ほどDBで入力した項目を追加することになります。
全て入力したらそれぞれの項目を編集していきます。
例えば@で区切って2のinputを作るのか、@以降をプルダウンにするのか。
入力エラーの表示、全角、半角の自動変換もできます。