CREAMサポートブログ | はじめてのメディアサイト運用に

オウンドメディアに使いやすいフォームサービスを導入(formrun編)

オウンドメディアに使いやすいフォームサービスを導入(formrun編)

企業のオウンドメディアやブログへの導入が進むメディア構築CMS「CREAM」を使う際に、効果が高まる外部サービスとの組み合わせ活用の紹介です。今回はCVアップやコミュニケーション促進に、フォームサービス「formrun」を埋め込み導入します。


フォームサービスとは?

Webサイト上の入力欄に、直接必要な内容を記入して送信できるツールです。送信された情報はクラウドサービスに送られ、管理画面内で一覧表示ができ、指定先に通知が届きます。

例えば、お問い合わせや資料請求、イベント申し込み、採用応募などさまざまな使い方があります。

たんにメールの形式になって指定のメールアカウントに送信される「メールフォーム」もありますが、今回は管理画面に送信内容が蓄積されるWebサービス形式のものを「フォームサービス」と扱います。

CREAM標準のお問い合わせフォーム

CREAMにも標準で「お問い合わせフォーム」機能が用意されています。

この機能はメールとして送信されるのみで情報が残りません。入力項目が、名前、電話番号、メールアドレス、問い合わせ内容、の4点で固定になっていて、また「Gmailアプリパスワード」という情報が事前に必要なため、実は使いやすいとはいい難い機能です。

CREAMの主となる機能ではないため、この機能改善を行う予定はしばらくありません。

CREAM標準の問い合わせフォームです。(モバイル表示)

メールに転送されるだけのシンプルな「メールフォーム」です。

外部のフォームサービスを導入するには

CREAMを企業のオウンドメディアや企業ブログとして使っていただく際には、もっと使いやすく専門特化したフォームサービスを組み合わせて、リード獲得などのコンバージョン(CV)につなげて欲しいと考えています。


そのため、外部のフォームサービスの導入方法を紹介していきます。今回は、弊社でも実際に使ってみて導入しやすさや使い勝手がとても良いと感じた『formrun(フォームラン)』をCREAMに導入する流れを具体的に説明します。


無料プランでも、ある程度までの機能が使えてしまうところがおすすめポイントです。

無料で使えるメールフォームと顧客管理 | formrun (フォームラン)

https://form.run/ja

シームレスに統合された顧客管理ツールで、成果につなげるプロセスへ。

大きな流れは以下のとおりです。

ポイントは、CREAMの「ページ作成」機能を使うところです。


  1. フォームの作成
  2. CREAMのHTMLページ作成
  3. フォームサービスで設定
  4. 必要に応じてGoogleアナリティクスを設定

フォームの作成

まず、formrunのアカウントを作成します。

https://form.run/signup/user

+新規フォーム作成

フォームクリエイターで作成する

に続いて、テンプレートを選択します。
あらかじめ、用途に応じた項目がセットされていて便利です。

フォームの項目を追加、もしくは削除しながら、項目の設定していきます。

入力欄だけでなく、選択肢やスパム対策チェック、画像やテキストのブロックも設置できます。

ブロック単位で自由に作成、移動できる点がCREAMの記事作成画面と似ています。

詳しくはformrunのヘルプページ「クリエイターフォームとは」をご覧ください。
https://faq.form.run/creatorform

クリエイターフォームとは

https://faq.form.run/creatorform

formrunでは、フォーム編集画面を使って誰でも簡単にフォームを作ることができます。 このページでは、フォーム編集画面の見方・使い方について説明します。 フォーム編集画面は、公開画面・完了画面(サンクスページ)・非公開画面の3つのページ設定が可能となっております。 また、カバー画像の推奨サイズもこちらから設定可能です。

フォーム設定画面にある「iframe埋め込みフォーム」を開き、スクリプト設置用のHTMLタグをコピーします。

ここでいったん、ブラウザの別タブで作業します。

CREAMのHTMLページ作成

CREAMの管理画面に管理者権限でログインし、「ページ作成」アイコンから進みます。

簡易ページ一覧の画面で「HTMLページ」ボタン

HTMLページ 一覧の画面で「追加」ボタン

「ページ追加」の画面が開きます。

HTML入力欄に、formrunの埋め込みタグを貼り付けます。

必要に応じて、フォームのあとに「個人情報保護方針の説明(プライバシーポリシー)」などを設定するもの良いでしょう。

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アナリティクスの設定内容については、あまりに奥が深いので割愛します。

以下の記事が参考になると思います。

目標を作成、編集、共有する - アナリティクス ヘルプ

https://support.google.com/analytics/answer/1032415?hl=ja

ここで説明するタスクを行ったり、機能を使用したりするには、ビュー単位の

コンバージョンを正しく計測するためのGoogleアナリティクス「目標」設定

https://ferret-plus.com/curriculums/10547

今回はGoogle アナリティクスで設定しておくべき「目標」について解説します。 目標が正しく設定されていないと、ホームページ上で一番重要なコンバージョンが正しく計測されず、データをどれだけ見ても意味がなくなってしまいます。正しく理解し、設定しておきましょう。

ほかの外部サービスも取り上げます

フォームサービスの他にも、CREAMと組み合わせて使っていただきたい外部サービスを今後も取り上げて、使い方紹介をしていきたいと思います。

できるだけ、CREAMならではの設定のコツも合わせて解説していくようにします。

CREAMへのお問い合わせ

この記事のライター

関連するキーワード


外部サービス連携 GA

関連する投稿


Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

メディア構築CMS「CREAM」のスポットページ作成機能を使う際に、自社名や店舗名が表示されたGoogleマップを埋め込む方法があります。Googleマイビジネスの説明と合わせて紹介します。


サーチコンソールに自分のサイトを登録する方法(所有権確認)

サーチコンソールに自分のサイトを登録する方法(所有権確認)

Googleサーチコンソール(Search Console)は、Googleが提供するWebサイト管理者向けの無料ツールです。サイトに訪問するユーザーがどのキーワードで検索されているか、サイトに致命的な問題が発生していないか、などの状態を確認でき、SEOに関する項目をチェックすることができます。


企業ブログのCVアップにMAツール活用を(SATORI編)

企業ブログのCVアップにMAツール活用を(SATORI編)

企業のオウンドメディアやブログへの導入が進むメディア構築CMS「CREAM」を使う際に、効果が高まる外部サービスとの組み合わせ活用の紹介です。今回はCVアップにMAツール「SATORI」のポップアップフォームを導入します。


「新規登録」の有効な使い方

「新規登録」の有効な使い方

メディア構築CMSのCREAMには「新規登録」の機能があります。会員限定サイトが目的ではないのにどう使うのか質問を受けることがありますので、活用方法を解説します。


メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

メディア構築CMSを使ったアフィリエイトの始め方(ASP編)

広告収益型のメディアサイトで実績が多いCREAMには、アドネットワーク広告以外にもアフィリエイト活用の機能が標準で用意されています。今回はASPの管理画面を使って具体的な設定例を紹介します。


最新の投稿


Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

メディア構築CMS「CREAM」のスポットページ作成機能を使う際に、自社名や店舗名が表示されたGoogleマップを埋め込む方法があります。Googleマイビジネスの説明と合わせて紹介します。


構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

Googleは、検索エンジンが理解しやすいHTMLタグに記述する特殊なコードである構造化データの利用を推奨しています。構造化データで記述することでリッチリザルトが表示され、検索ユーザーの目に触れやすくなります。メディア構築CMSのCREAMなら初めから機能が用意されています。


記事本文を装飾するには?ビジュアルエディターの使い方②

記事本文を装飾するには?ビジュアルエディターの使い方②

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は後編です。


記事本文を装飾するには?ビジュアルエディターの使い方①

記事本文を装飾するには?ビジュアルエディターの使い方①

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は前編です。


初期管理者やログインユーザー追加の使い方

初期管理者やログインユーザー追加の使い方

CREAM環境構築が終わり、初期管理者で管理画面にログインできるようになったら、まずは他のログインユーザーを追加登録しましょう。


 

ページTOPへ