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