メインコンテンツにスキップ

formrunを埋め込む

フォーム作成から顧客管理までワンストップで行えるサービス「formrun」で作成したフォームをStudioサイトに埋め込む方法を説明します。

今週アップデートされました

Sudioの標準機能でもフォームの設置回答管理は可能ですが、外部サービス「formrun」を使うとさらに詳細な運用が可能になります。

  • 住所や職業などのバリデーション付きフォームの作成

  • ロゴ入りの自動返信メール

  • formrunダッシュボードでのより詳細な顧客管理

Point:Studioでフォーム機能を利用する場合は、次の2つの方法があります。


1. Studioのフォーム機能を利用する

Studioに搭載されたフォーム機能では、エディタ上でフォームパーツを組み合わせて設計できます。
・送信された回答はフォームダッシュボードで確認・管理できます。
・必要に応じて、フォーム回答のメール通知や、Googleスプレッドシートとの連携を使って、回答データを活用できます。


2. 外部フォームサービスを埋め込む

より高度なフォーム機能が必要な場合や、既存のフォーム運用を継続したい場合は、次のような外部フォームサービスを埋め込めます。

formrunを埋め込む手順

(1) formrunでの埋め込み先設定

作成したフォームを、Studioサイトへ表示することを許可します。

  1. formrunの「開発者向け > iframe埋め込みフォーム」メニューを開きます。

  2. [フォーム設置URL]の入力欄に、StudioサイトのURLを入力します。

(2) Studioに埋め込みボックスを設置する

スクリーン上に、Embed(埋め込み)ボックスを追加します。

  1. ナビゲーションで追加アイコンをクリックします。

  2. [基本]タブをクリックします。

  3. [埋め込み]セクションから[Blank]の埋め込みボックスをクリックします。

  4. 埋め込みボックスがスクリーン上に配置されます。

(3) 埋め込みボックスにリンクを設定する

(1)で取得したリンクを、(2)で設置したボックスに設定します。

  1. 埋め込みボックスをクリックします。

  2. 右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。

  3. [埋め込みコード]の入力フィールド内で[エディタを開く]をクリックします。

  4. [埋め込みコードを編集]画面の左側に表示される編集画面で、もともと入っている文字を削除し、formrunでコピーしたリンクを貼り付けて[保存]します。

  5. 公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。

こちらの回答で解決しましたか?