フォームサービスとは？
Webサイト上の入力欄に、直接必要な内容を記入して送信できるツールです。送信された情報はクラウドサービスに送られ、管理画面内で一覧表示ができ、指定先に通知が届きます。
例えば、お問い合わせや資料請求、イベント申し込み、採用応募などさまざまな使い方があります。
たんにメールの形式になって指定のメールアカウントに送信される「メールフォーム」もありますが、今回は管理画面に送信内容が蓄積されるWebサービス形式のものを「フォームサービス」と扱います。
CREAM標準のお問い合わせフォーム
CREAMにも標準で「お問い合わせフォーム」機能が用意されています。
この機能はメールとして送信されるのみで情報が残りません。入力項目が、名前、電話番号、メールアドレス、問い合わせ内容、の4点で固定になっていて、また「Gmailアプリパスワード」という情報が事前に必要なため、実は使いやすいとはいい難い機能です。
CREAMの主となる機能ではないため、この機能改善を行う予定はしばらくありません。
CREAM標準の問い合わせフォームです。（モバイル表示）
メールに転送されるだけのシンプルな「メールフォーム」です。
外部のフォームサービスを導入するには
CREAMを企業のオウンドメディアや企業ブログとして使っていただく際には、もっと使いやすく専門特化したフォームサービスを組み合わせて、リード獲得などのコンバージョン（CV）につなげて欲しいと考えています。
そのため、外部のフォームサービスの導入方法を紹介していきます。今回は、弊社でも実際に使ってみて導入しやすさや使い勝手がとても良いと感じた『formrun（フォームラン）』をCREAMに導入する流れを具体的に説明します。
無料プランでも、ある程度までの機能が使えてしまうところがおすすめポイントです。
大きな流れは以下のとおりです。
ポイントは、CREAMの「ページ作成」機能を使うところです。
- フォームの作成
- CREAMのHTMLページ作成
- フォームサービスで設定
- 必要に応じてGoogleアナリティクスを設定
フォームの作成
まず、formrunのアカウントを作成します。
https://form.run/signup/user
＋新規フォーム作成
フォームクリエイターで作成する
に続いて、テンプレートを選択します。
あらかじめ、用途に応じた項目がセットされていて便利です。
フォームの項目を追加、もしくは削除しながら、項目の設定していきます。
入力欄だけでなく、選択肢やスパム対策チェック、画像やテキストのブロックも設置できます。
ブロック単位で自由に作成、移動できる点がCREAMの記事作成画面と似ています。
詳しくはformrunのヘルプページ「クリエイターフォームとは」をご覧ください。
https://faq.form.run/creatorform
formrunでは、フォーム編集画面を使って誰でも簡単にフォームを作ることができます。 このページでは、フォーム編集画面の見方・使い方について説明します。 フォーム編集画面は、公開画面・完了画面（サンクスページ）・非公開画面の3つのページ設定が可能となっております。 また、カバー画像の推奨サイズもこちらから設定可能です。
フォーム設定画面にある「iframe埋め込みフォーム」を開き、スクリプト設置用のHTMLタグをコピーします。
ここでいったん、ブラウザの別タブで作業します。
CREAMのHTMLページ作成
CREAMの管理画面に管理者権限でログインし、「ページ作成」アイコンから進みます。
簡易ページ一覧の画面で「HTMLページ」ボタン
HTMLページ 一覧の画面で「追加」ボタン
「ページ追加」の画面が開きます。
HTML入力欄に、formrunの埋め込みタグを貼り付けます。
必要に応じて、フォームのあとに、補足情報を表示するためのHTMLを追記するのも良いでしょう。
URLに使われる「ページ名」は、すぐ使うためメモしておきましょう。
formrun埋め込みフォーム、モバイル表示の例です。
スパム対策の「reCAPTCHA」機能や、プライバシーポリシーのリンクURLを追加しています。
タスクル | 暮らしのお悩み解決サイトより。
formrunの設定をいくつか
別タブで残っている、formrunの「iframe埋め込みフォーム」に戻り、「フォーム設置URL」を入力します。
CREAMのHTMLページ作成で「contact」をページ名とした場合は、
CREAM導入トップページ/pages/contact/
が設置URLになります。
同様にHTMLページで「サンクスページ」を作成してあれば、「フォーム送信後リダイレクトURL」に設置URLを入力します。
サンクスページとは、フォーム送信後に開くページのことで「お問い合わせありがとうございました」の文章とともに、以降にアクションして欲しい内容や進んで欲しい遷移先を設定しておくページです。
実際のお問い合わせフォームです。
https://media.cream-cms.com/blog/pages/contact
実際のサンクスページです。
https://media.cream-cms.com/blog/pages/thanks
最低限のフォーム設置としてはここまでで完了なのですが、実際にフォームを活用するには、通知設定や自動返信などを設定しておくと良いでしょう。
「受信通知」の画面から、『メールアドレス』、『Slack』、『Chatwork』の受信設定ができます。
指定メールアドレスやSlack、Chatworkに、フォーム送信内容も含めて受信通知が届くため、見逃しを防ぐことができます。
「自動メール返信」の画面から、フォーム送信者に自動で送られるメールが設定できます。
お礼の文章とともに、問い合わせ内容の確認のため必要な項目を設定してメールに入れることができます。
Googleアナリティクスの「目標」設定
CREAMのHTMLページ作成を使って、埋め込み型でWebフォームを設置したため、ページ遷移がCREAM導入ドメインのまま継続していることにお気づきでしょうか。
外部のフォームサービスを利用する際、ボタンでフォームに誘導すると
CREAM導入ドメイン
↓
お問い合わせフォーム（フォームサービスのドメイン）
↓
サンクスページ（フォームサービスのドメイン）
となります。
埋め込み型にすることで、
CREAM導入ドメイン
↓
お問い合わせフォーム（CREAM導入ドメイン）
↓
サンクスページ（CREAM導入ドメイン）
となり、ヘッダー/フッターがCREAMサイトのままなので送信者に遷移上の違和感を与えないだけでなく、ドメインから離れないためセッション維持したままアクセス計測ができます。
Googleアナリティクスの「目標」を設定します。
ドメイン内のページ遷移のため、URLを指定するだけの「コンバージョントラッキング」ができます。
結果、どの記事を見てコンバージョンしたか、どこのチャネルから流入したコンバージョンか、といった情報が取得できます。（取得できない場合もあります）
Googleアナリティクスの目標にある参照元/メディアが「form.run」になる場合もあります。そのときは「参照元除外リスト」を設定しましょう。
Googleアナリティクスの設定内容については、あまりに奥が深いので割愛します。
以下の記事が参考になると思います。
ここで説明するタスクを行ったり、機能を使用したりするには、ビュー単位の
コンバージョンを正しく計測するためのGoogleアナリティクス「目標」設定
https://ferret-plus.com/curriculums/10547今回はGoogle アナリティクスで設定しておくべき「目標」について解説します。 目標が正しく設定されていないと、ホームページ上で一番重要なコンバージョンが正しく計測されず、データをどれだけ見ても意味がなくなってしまいます。正しく理解し、設定しておきましょう。
ほかの外部サービスも取り上げます
フォームサービスの他にも、CREAMと組み合わせて使っていただきたい外部サービスを今後も取り上げて、使い方紹介をしていきたいと思います。
できるだけ、CREAMならではの設定のコツも合わせて解説していくようにします。
