エブリサイトでは、Webフォームに入力された内容をkintoneなどのデータベースに保存することができます。
この記事では、Webフォームの作成と、kintoneにデータを保存するための設定例を紹介します。
画面デザイン
まず画面デザインの設定をしていきます。
ページの全体像（レイアウト）を決める部分になりますので、いったん、紙の上や他のツール等でページのデザインを検討した上で、エブリサイトの画面デザインの設定に進んでいただくとスムーズです。
今回は、完成ページの画像を元に説明します。
完成ページ図
画面デザインページはこのようになっています。
区切られた１つずつの四角の部分のことを「タイル」と言います。
タイルを作っていく方法は、ドキュメントをご覧ください。
このページでは、ウィジェット「シンプル縦フォーム」の指定方法をご紹介します。
ウィジェットの設定
タイルを切った時は自動的に、ウィジェット「シンプルパネル」が設定されるので ウィジェット編集画面でウィジェットを変更します。
【ウィジェットカテゴリ】フォーム
フォームカテゴリにあるウィジェットは、データ入力に適したレイアウトを作成できます。また入力されたデータを、kintone に追加・更新することができます。
シンプル縦フォーム
ウィジェット「シンプル縦フォーム」は、項目（アイテム名）が左上に表示され、縦一列にアイテムを並べることができる入力フォーム形式です。
アイテムは、「データ入力」だけでなく、「テキスト」で文字を表示することも可能です。
Webフォームのような一般的な入力フォームを手軽に作成したい場合はこの「シンプル縦フォーム」が適しています。
「アイテム一覧カラム」からフォームに必要な「アイテム」をドラッグアンドドロップで「ウィジェットパラメーター入力カラム」に追加します。追加した「アイテム」を選択すると、右側に「アイテムパラメーター入力カラム」が表示されるので、「アイテム」の詳細を設定します。
「アイテムID」はkintoneにレコードを追加する際のマッピングで使用しますので、kintoneアプリのフィールドコードと合わせるなど、わかりやすい名称にしておくことをおすすめします。
「アイテム名」はページに表示されるラベルになります。
今回はアイテム「文字列入力（1行）」「文字列入力（複数行）」「ラジオボタン」「複数選択チェックボックス」を使用して、以下の部分をウィジェット「シンプル縦フォーム」で作成しています。
接続設定
次に、接続設定を行います。
今回はWebフォームで入力されたデータをkintoneアプリのレコードに追加したいため、kintoneアプリと接続します。
Webフォームは一般公開のWebサイトになるので「認証可否」は「認証なしで利用可」を選択します。
kintoneとの接続設定についてはこちらをご確認ください。
また、接続設定でどの「認証可否」を選べばよいかの判断については、次の記事の「接続設定における4種類の接続可否とは」項も併せてご覧ください。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
kintoneアプリのAPIトークンにはレコードの閲覧と追加の権限を付与します。
kintoneアプリのフォームはこのように設定しています。
※フィールド名とフィールドコードは同じに設定しています。
ページ内処理
最後にページ内処理の設定です。
全体の流れは次のようになっています。
それぞれのアクションについて、詳しく見ていきましょう。
ウィジェット「シンプル縦フォーム」で設定したアイテムに「必須項目にする」にチェックを入れていても、エラーチェックはされないため、ページ内処理のやること「入力エラーをチェックする」でエラーチェックをします。
「接続設定」で設定したkintoneアプリにやること「kintoneにレコードを追加する」でレコードを追加します。
また、追加条件で「入力アイテムにエラーがあるならば」を反転させた「入力アイテムにエラーがないならば」を設定します。
※この追加条件を設定しないと「入力エラーをチェックする」でエラーがあった場合でもアクションが実行されてしまいます。
マッピングの「セットする値」にはアイテムパラメーターで設定した「アイテムID」を、「セット先のフィールドコード」にはkintoneアプリで設定した「フィールドコード」を記述します。
最後にやること「情報ダイアログを表示する」でメッセージを表示して、やること「ページをリロードする」でページのリロードを行い入力内容をクリアします。
以上で、kintoneと連携出来るWebフォームの完成です！
実際にWebフォームに入力して送信すると、kintoneにはこのようにレコードが追加されます。
申し込みフォームやお問い合わせフォームなど、様々なシーンで利用できそうですね。