Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です！
今回はWixフォームをカスタマイズし、1つのボタンで、CMS送信フォームと同時にデータ送信する方法を解説致します。
コード以外の実装の過程は無料で読むことができますので、是非読んでいただければと思います！ それでは始めましょう！
Wix フォームとは
以下サポートセンターの文言を借ります。
「Wix フォームを使用すると、カスタマイズ可能なフォームを作成して、ビジネスの運営や成長に必要なあらゆる情報を収集することができます。
サイトには、リードの獲得や購読者の登録などのためのフォームを直接追加することができます。
フォームを作成したら、ダッシュボードからすべての回答内容を追跡することができます。
フォームが送信されると、Wix アカウントに登録しているメールアドレスと Wix アプリに自動的に通知が届きます。Wix オートメーションを編集すると、Wix Inbox に通知が届くようにすることができます。」
以上のようにWix フォームには通知機能が充実しており、管理上非常に便利な仕様になっていて、使われている方も多いと思います。
さらに標準で送信条件をつけることも出来ます。
つまり、フォームに条件ルールを追加して訪問者の回答に応じて異なる質問が表示されるインタラクティブなフォームを作成することができます。
このように、Wix フォーム内のエレメントに関しては必須などの条件ルールを設定することで送信をコントロールすることが出来ます。
Wixフォームについて詳しく解説した動画はコチラ
Wix フォーム外の入力状況で送信条件をつけたい
では、Wix フォーム外に多くの入力・選択エレメントがある場合、その入力・選択条件に応じてフォームの送信を制御することはできるのでしょうか。
Wix フォームの送信ボタンはWix フォーム内の条件がクリアされれば送信をしますが、標準ではWix フォーム外のエレメントで送信を制御することは不可能です。
では仕様どおり、Wix フォーム上内に全ての入力・選択エレメントを乗せればどうかと言うことですが、それらが多岐に渡る場合、例えば個人情報の登録やアンケート結果などですが、それらを全部 Inbox に送られてもやはり困ることになります。
Wix フォーム外の入力・選択エレメントの必要な内容のみ Inbox に送ってもらい、その他の内容はCMSに保存するというのがスマートなやり方です。
さらにこのとき、Wix フォーム外の内容が送信条件をクリアしていなければ送信できないようにすると同時に、CMSにも保存されないようにしたいものです。不備な内容でも無条件に通知やCMS保存されることは困ることになるからです。
Wix フォーム外のエレメントで送信条件をつける方法
Wix フォーム(myWixForm)内に必須入力ボックス(formInput)、フォーム外に必須入力ボックス(nameInput)があるとします。
また送信時に nameInput の内容を保存するための CMS(myCollection) が用意されているものとします。
今回のエレメントは条件付の送信原理を実装する目的ですから非常に単純化しています。
さて、Wix フォームは formInout が未記入なら送信しませんが、nameInput が未記入でも送信します。
一方 nameInput が CMS(myCollection)にリンクしていれば保存は行いません。つまり送信と保存がちぐはぐになります。
以下でこの不具合を解消するコーディングを考えます。
エレメントとCMSの設置
下図のように入力ボックス(nameInput)とWix フォーム(myWixForm)をページに追加します。設定等の詳細は以下に示します。
入力ボックス(formInput)を必須に設定します。
「＊」マークが付き未入力なら送信できなくなり、１つ目の送信条件となります。
新たにチェックボックス(formCheckbox)をフォーム上に設置し、必須に設定します。これが未チェックなら送信できなくなり、２つ目の送信条件となります。
チェックボックスが未チェックの場合に表示するエラーテキスト(errorText)を設置します。ユーザーに送信できない理由を伝えるためです。
次にCMS(myCollection)を作成します。
入力ボックス(nameInput)の内容を保存するためのものです。
実際には多岐に渡る個人情報やアンケート結果に対応するフィールドが存在することになりますが、今回は動作原理の説明ですのでフィールドを１個に単純化してあります。
さらにデータセット(myDataset)を設置し、CMSと書き込み接続をしておきます。
いつ頃からかデータセットが可視化されなくなっています。
最後に、入力ボックス(nameInput)の設定を必須にし、CMS(myCollection)のタイトルフィールド(title)への書き込み接続をしておきます。
以上で準備が完了です。
これらの設置のうちWix フォーム上のチェックボックスが大きな仕掛けになっています。
コーディングの方針
Wix フォームの送信ボタン(submitButton) は非常に精巧にできており、クリックイベントを実行した後、送信条件を満たせばサーバーにデータを送信します。
その際 送信済みイベントの onWixFormSubmitted( ) が発動されます。
従ってコードは送信ボタンのクリックイベントとWix フォームの送信済みイベントに書けばよく、その要点は以下の通りです。
CMSへの保存：入力ボックス(nameInput)の入力をブール値で判断します。そしてそのブール値をチェックボックス(formCheckbox)にコピーします。このブール値が false ならエラーメッセージを表示します。一方、送信が無事完了すればCMSへの保存を実行します。
Wixフォームの送信：必須設定した入力ボックス(formInput)とチェックボックス(formCheckbox)でフォーム自身に判断させます。送信できれば送信メッセージが表示されます。繰り返しになりますが、送信が無事完了すればCMSへの保存を実行します。
条件付き送信のコーディング
それではコードを確認していきます
※続きはこちらのnote記事でご確認ください。
Comments