Velo 第４４回　Wixフォームを使う

2023年9月30日 17:16

Wixフォームはサイト訪問者からの情報を得るのに最適です。
サイトフォーム、スタンドアローンフォームの２つのタイプがありますが、ここではサイトフォームを取り上げます。
Wixフォームの基本的な使い方を動画で見る>>

Wixフォームは、エディターのパーツの追加 / フォームから各種のフォームを選択できます。
お問い合わせ、注文、登録等、豊富なテンプレートが用意されています。

カスタマイズ

Wixフォームをページに追加したら、「フォーム設定」、「新しい項目を追加」などでセットアップを行います。
ビジネス利用を前提にしているメニューがたくさん並んでいます。

「新しい項目を追加」で追加した項目はフォームコレクションや Inbox への通知に反映されます。

回答集計表

Wix フォームを追加するとシステムが自動的に回答集計用のコレクションを作成します。
エディターからは「データベース / Wixアプリコレクション / Forms」やフォーム設定の「回答集計を表示」ボタンから、さらにダッシュボードからも登録が確認できます。

送信通知

サイト訪問者が送信ボタンを押し、データがサーバーに届けば、サイト作成者は Inbox や登録メールを通じて通知を受け取ることができます。
受け取るメールアドレスは自分で設定ができます。

データのコーディング

Wixフォームを追加すると、コンテナとして「フォーム」が同時に追加されます。
オブジェクトとしては違うものですがセットになっています。
従って「フォーム」上に新たな入力要素を「新しい項目を追加」メニューで追加するとWixフォームの管理対象になり送信後に Inbox に通知されます。

例えば簡単な入力欄を非表示でフォーム上に置いて、サイト訪問者がフォーム入力以前に選択した内容などをフォームに乗せて送信、通知することが可能です。
以下の図をご覧下さい。

サイト訪問者は別ページでドロップダウンで「選択２」を選択してフォームへ移動する想定です。

このページのコードではフォームのページへ値を持って行くので session を使っています。

// このページのコード
import {session} from 'wix-storage'
import wixLocationFrontend from 'wix-location-frontend';

//　ボタンクリックでsessionにドロップダウンの値をコピーしフォームページへ移動
export function myButton_click(event) {

session.setItem('selection',$w('#myDropdown').value);
// url はフォームのページ
wixLocationFrontend.to('/blank')
}

フォーム上に、ドロップダウンの選択内容をコピーする入力欄を追加し、非表示にしておきます。

// フォームページのコード
import {session} from 'wix-storage';

// ページの初期化時に選択内容を非表示の入力欄にコピーしておきます
$w.onReady(() => {
	$w('#selectionInput').value = session.getItem('selection')；
　　$w('#imageGray').show()
})

// 送信ボタンのクリックイベントとして Veloマークを青色に変化させます
export function submitButton_click(event) {
	$w('#imageGray').hide()
}

イベントのコーディング

送信ボタンには、ボタンクリック時に発出する onWixFormSubmit( ) イベント、データ送信時に発出する onWixFormSubmitted( ) イベントがあります。
これらのイベントハンドラーは複数に分けて使えますので、適切なタイミングで処理の内容を考えることが可能です。

また、送信ボタンには通常通りのイベントハンドラーがあります。送信ボタンの onClick( ) イベントハンドラーは onWixFormSubmit( ) と両立します。
ここではクリックイベントを付加してみます。以下の図をご覧下さい。

フォームで入力を行います。コピーされた選択内容は非表示なっています。

送信ボタンを押すとVeloマークが青色に変わり、クリックイベントが送信と両立して動作していることが分かります。

回答集計表のコレクションには追加した入力欄のフィールドが自動作成されています。

inbox には追加入力欄の選択内容「このサイト訪問者は選択２を選びました」が通知されています。

サイト作成者にはメールで通知が届いています。

Velo開発のご依頼はこちら