前回の記事でフォームの項目について設定しました。

前の記事: KAIROS3でお問い合わせフォームを作成する(その1)

次にフォームのデザインについて設定します。

KAIROS3のフォームの使い方は3つあります。KAIROS3でフォームのページを作成し、そのページへウェブサイトからリンクを貼る方法、KAIROS3で作ったフォームをiFrameでウェブサイトのHTMLに埋め込む方法、APIを使用してKAIROS3へ直接送信する方法です。

最後の方法が一番スマートなフォームを作れますが、それには月額25,000円のAPIオプション契約とプログラミングの知識が必要です。最初はフォームページを作ってリンクする方法でやってみましょう。

ヘッダーを細かく設定したい人は、右端の<>をクリックするとHTMLを記述することも出来ますが、ここではサンプルなので簡単に作ります。(ちなみにメールフォーム画面はナビゲーションやリンクなどが無いほうが離脱が少ないと言われています。)

ここではKAIROS3で作ったフォームにウェブサイトからリンクしますので、ページのデザインもドメインも変わってしまいます。ユーザーが別サイトに飛ばされた違和感を感じますので、ヘッダーには元サイトと同じロゴを設置しましょう。

画像の挿入ボタンを押して、ロゴ画像を挿入します。ロゴ画像は200〜300ピクセルぐらいのものが良いです。

デザインは自由で良いのですが、デザインなんかわからないよ、という方のために簡単にそれっぽくする方法をやってみます。

ロゴマークを挿入したら、書式の配置メニューでセンタリングします。

フォーム見出しには、ページのタイトルを入力し、書式の見出しメニューで文字を大きくしましょう。

概要説明文には、ご挨拶てきな文章や注意事項などを書きます。

プライバシーポリシーは必ずいれておきましょう。(気にする人は気にしています)

会社でプライバシーポリシーが決まっている場合はそれをここに貼り付けます。(リンクは離脱につながるので貼らないほうがいいそうです。めっちゃ小さい字でリンクされているサイトもありますが、むしろやな感じですよね。)

送信ボタンの文言は、次にまだ確認画面があることがわかるようにします。

reCAPTCHAを設定すると迷惑メール(セールス)を減らしてくれます。

これが reCAPTCHA です。

完了メッセージもこんな感じで設定します。

HTML TITLE は、ページに表示されるものではなく、ブラウザのタブに表示されたり、検索エンジンの検索結果に表示されるほうのやつです。普通に書いておきましょう。

スタイルのフォーム幅は1000ピクセルぐらいに、背景色はウェブサイトのテーマカラーの同系色で淡い色に、コンテンツ幅は600ピクセルぐらいがいいと思います。

次の画面で、フォームに名前と説明を書いたらお問い合わせフォームの完成です。ここでつける名前は、KAIROS3の中でフォームを判別するためのものですので、あくまで自分たちがわかりやすい名前を付けておきましょう。

これでお問い合わせフォームが完成しました。

次は自動返信メールの設定です。