Studioで外部フォームを埋め込む方法｜おすすめサービス2選も紹介
- 社内で使うフォームを統一したい
- 標準フォームは役不足なので理想のフォームが作れない
- 完全無料でフォームを運用したい
上記のようなときにおすすめなのが外部フォームの埋め込みです。
もちろんStudioの標準フォームでも基本的なフォームは作れますが、条件分岐などのカスタマイズが必要なフォームはまだ作れません。
そこで今回は、Studioで外部フォームを埋め込む方法について説明していきます。
ぜひ参考にしてみてください！
Studioの標準フォームで作りたい方は、以下の記事を参考にしてみてください！
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安18万円〜】
集客に強い・SEO特化のホームページ制作サービス
「デザインは良いのに問い合わせが来ない」それはSEO対策がしっかりできていないことが原因かもしれません。 月間10万PVメディアを運営する現役SEOコンサルが設計するから、 GoogleにもAI（ChatGPT等）にも選ばれるホームページが作れます。
- AI×人間の分業でSEO対策が圧倒的に低価格
- 公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（テンプレート不使用）
- Studio制作で自社更新もカンタン
- ホームページ制作実績、累計50サイト以上
今なら制作費30,000円OFF（毎月3組限定）。ご相談・お見積りは無料です。
Studioに埋め込めるフォーム一覧
Studioに埋め込めるフォームサービスだと、下記2つが主流です。
Studioに標準装備されているお問い合わせフォームと比べて、どのようなメリット・デメリットがあるのか詳しく説明していきます。
①：Googleフォーム
おすすめのサービス1つ目は、「Googleフォーム」です。
| メリット | デメリット |
|---|---|
| 複雑なフォームを実装できる 選択肢や条件分岐が使える 誰でも簡単に作れる 無料で運用できる | デザインをカスタマイズしにくい サイトの雰囲気を乱す可能性あり フォームの回答をStudio内では見れない |
1番のメリットは、条件分岐が使えるなど高カスタマイズなフォームが作れることです。
「Studioの標準フォームでは実現できない、、、」となった時に、Googleフォームで代用するのがおすすめです。
しかし、Googleフォームのデザインはどうしても浮いてしまう可能性が高いです。サイトの雰囲気を重視するのであれば、外部リンクでGoogleフォームに飛ばすことも検討しましょう。
②：formrun（フォームラン）
おすすめのサービス2つ目は、「formrun（フォームラン）」です。
| メリット | デメリット |
|---|---|
| 顧客管理機能が付いている より詳細にデータ分析できる デザインのカスタマイズが可能 | 無料プランだと月50件までしかお問い合わせを受けれない デザイン完全統一は難しい 作成ハードルが少し高い |
formrunを利用する1番のメリットは、顧客管理機能が使えることです。
下記はほんの一例ですが、お問い合わせしてくれたお客様に対してどのようにアプローチをしたのかを視覚的に確認することができます。
ただし、formrunは無料プランだと月50件までしかお問い合わせが受けられません。
またformrunは外部サービス連携になるので、もし有料プランに移行した場合「Studioの月額料金＋formrunの月額料金」となり、費用がかさむ原因にもなってしまいます。
「顧客管理機能は使わないかも、、、」という方は、Studioの標準フォームで実装するようにしましょう！
StudioにGoogleフォームを埋め込む方法
まずはGoogleフォームにアクセスして、新規フォームを作成します。
Kaji本記事では、Googleフォームの作成方法について割愛します！
Googleフォームの詳しい作り方については、以下の記事を参考にしてみてください！
新規フォームが完成したら、「送信」ボタンをクリックします。
「コピー」のボタンをクリックします。
「追加」→「基本」→「Blank」をクリックします。
追加された＜iframe＞ボックスを選択した状態で、右パネルの「エディタを開く」をクリックします
埋め込みコードの入力欄に、先ほどコピーしたGoogleフォームのコードを貼り付けます。
Kaji元々あった<iframe src=””></iframe>は削除してOKです！
これでGoogleフォームの埋め込みは完了です！
Studioにformrunを埋め込む方法【新エディタver】
formrunの新規フォームの作り方については、以下の記事を参考にしてみてください！
新規フォームが完成したら、フォームの設定画面にアクセスします。
左メニュー欄の1番下までいくと「フォームの埋め込み（iframe）」がありますのでクリックします。
フォーム設置先の入力欄に、Studioで作った自社サイトのURLを入力して、「更新する」をクリックします。
Kaji自社サイトを一度公開して、サイトURLを事前に取得しておきましょう！
「スクリプトの設置」を選択して、「スクリプトをコピー」をクリックします。
Studioのデザインエディタにアクセスして、「追加」→「基本」→「Blank」をクリックします。
追加された＜iframe＞ボックスを選択した状態で、右パネルの「エディタを開く」をクリックします
先ほどコピーしたスクリプトを、コード欄に貼り付けます。
「保存」をクリックして、デザインエディタに戻ったらformrunのフォームが表示されているはずです。
Studioにformrunを埋め込む方法【旧エディタver】
まずはformrun（フォームラン）にアクセスして、新規フォームを作成します。
Kaji本記事では、formrunの作成方法について割愛します！
formrunの新規フォームの作り方については、以下の記事を参考にしてみてください！
新規フォームが完成したら、フォームの設定画面にアクセスします。
左メニュー欄の1番下までいくと「フォームの埋め込み（iframe）」がありますのでクリックします。
フォーム設置先の入力欄に、Studioで作った自社サイトのURLを入力して、「更新する」をクリックします。
Kaji自社サイトを一度公開して、サイトURLを事前に取得しておきましょう！
「スクリプトの設置」を選択して、「スクリプトをコピー」をクリックします。
Studioのプロジェクトを開いて、左メニューの右矢印ボタンをクリックします。
「追加」→「埋め込み」→「formrun」をクリックします。
ページ上のサンプルフォームをダブルクリックします。下記のように、右側メニューが出てきたはずです。
先程formrunで取得したスクリプトを、埋め込みコードの入力欄に貼り付けます。
先程までサンプルフォームだったのが、自作フォームに変わっているはずです。
これでformrunの埋め込みは完了です！
Studioのサイト制作なら「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービスを運営しています。
サービスの強みを一言で表すなら、「集客に強いホームページが作れる」ということです。
- AI×人間の分業でSEO対策が圧倒的に安い
- SEO専門家による細部まで徹底したSEO対策（基本〜本格）
- はじめてのSEOガイド・公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（Webデザイナー専属）
- Studio製だから自社で簡単に更新できる
- ホームページ制作実績、累計50サイト以上
最安18万円〜とお手軽な価格ですが、徹底的にSEO対策されたホームページが作れます。なぜ安く作れるのか、その理由はシンプルで「人間が得意なことは人間、AIが得意なこと（リサーチなど）はAI」が担当しているためです。
オリジナルデザイン、かつ本格的に集客できるホームページがほしい方は、ぜひお気軽にご相談ください。
個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます