【動画つき】初心者でも10分でできた！作ったフォームをiframeでサイトに設置する方法

こんにちは。formLab編集部です。
いつもformrunをご利用いただき、誠にありがとうございます。

お客様が作成されたフォームは、どのような形で公開していますか？

formrunでは、作成したフォームをご自身のWebページ内に設置して公開できる「iframe埋め込み機能」があります。FREEプランからご利用でき、コードを用いてフォームを作成したことのない人でも簡単に設定可能です。

そんなiframe埋め込み機能ですが、

「作成したフォームをWebサイトに埋め込みたいが、なんだか難しそう…」
「iframe埋め込みを試してみたが、なぜか上手くいかない…」
このようなお悩みをお持ちの方はいませんか。

コードが登場することもあって、iframe埋め込み機能は、Web初心者にとって無縁の・難しいことのように思えるかもしれません。

本記事では、iframe埋め込みの実際の操作手順を、コーディング未経験の弊社インターン生がWordpressで作ったページに実際にフォームを埋め込む実演の動画つきでご紹介します。

最後にformrunでiframe埋め込み機能を使うメリットについても紹介しているので、ぜひ貴社のサイトでも活用してみてください。

1. iframe埋め込みとは

iframe埋め込みとは、外部のサイトのWebページを自身のホームページにそのまま埋め込むことを指します。iframeのスクリプトをコピー＆ペーストすることで、ホームページへ埋め込むことができます。

例えば、自身で作成したホームページに Youtube や Google Map などの外部リンクを埋め込みたい場合、iframeタグをホームページに埋め込むことで表示させることができます。

formrunで作ったフォームの公開には、大きく二種類の方法があります。

①フォーム単体で公開する

formrunでフォームを作成すると、フォームのURLは「https://form.run/@XXXX（任意の文字列）」となり、独立したページとして存在します。

そのため、フォームURLをSNSやメール等でシェアしないと、お客様はフォームにたどり着けません。

②iframe埋め込み機能を使って公開する

一方、formrunの「iframe埋め込みフォーム」を活用すると、例として「外部のサイト（https://◯◯◯◯◯）」にformrunで作成したフォームを埋め込めるため、「外部サイト（https://◯◯◯◯◯）」のURLを顧客にシェアすることで、フォームからの回答を促すことができます。

次でいよいよ、iframe埋め込み機能の実際の操作手順について、動画で解説していきます。

2. 作成にあたり用意するもの

formrunで作成したフォーム
フォームを設置したい自社ホームページやLP（ランディングページ）

想定作業時間：10分程度
フォーム作成〜サイトへの埋め込み完了まで

▶︎フォームの作成の手順を1から知りたい方はこちら

3. 実際の作業手順（動画解説）

では、実際にformrunで作成したフォームをホームページに埋め込む際の手順を見ていきましょう。
今回は、CMSで最もメジャーな、Wordpressでの埋め込み方法をご紹介します。

他にSTUDIO、Wix、ペライチ、Ameba Ownd、Jimdoへの埋め込み方法については、こちらの記事でご紹介しております。
→【フォームをシェアしたい方必見！】iframe埋め込みを用いて、ホームページでフォームを共有しよう（STUDIO・Wix・ペライチ・Ameba Ownd・Jimdo・WordPress）

※ご注意
貴社のホームページが WordPress.com をお使いの場合、
・WordPressのビジネスプラン以上のご契約
・ホスティング設定を有効化する
の2条件がないと、埋め込みが正しく反映されない可能性があります。設定・プランについては、貴社内のWeb管理者に確認してみてください。
WordPress.org をお使いの場合は問題ございません。