どんなウェブサイトにも無料でフォームを埋め込む方法

ウェブサイトにさまざまなフォームを作成・追加するための簡単なガイドをご紹介します。また、この作業を時間と労力を節約できるオンラインウィジェットについても解説します。

Valeria Polyakova

1時間前

無料でウェブサイトにフォームを追加する方法

簡単かつ無料でウェブサイトにフォームを追加したい方に朗報です！開発者がHTMLコードの手作業を減らすワンクリックソリューションを提供しています。コードを書く必要なく、あらゆる用途のフォームを作成可能です。多段階フォームの作成、ZapierやGoogle Sitesとの連携も簡単なフィールドで接続でき、条件付きロジック機能も備えています。これらの機能はすべて無料でオンラインで試せます。この記事ではForm Builderについて詳しく解説します。

数分でウェブサイトにフォームを追加する方法

Elfsightで無料アカウントを作成する。
Elfsightのオンラインウィジェット作成ツールにアクセスする。
必要なテンプレートを選ぶ。
ウィジェットをカスタマイズして保存する。
フォームの設置コードをコピーする。
HTMLコードをウェブサイトに貼り付ける。

フォームをウェブサイトに埋め込みました。エディターでウィジェットを試してみましょう！

ElfsightのForm Builderのメリットとデメリット

ここでは、Elfsightが提供するフォーム追加ソリューションがあなたのニーズに合うかどうか判断するための実情をお伝えします。

まずはForm Builderを使うことで得られる主なメリットの一覧です：

ほとんどのウェブサイトビルダーでフォームがサポートされており、コード知識なしで統合可能；
無料プランでフォームウィジェットを作成でき、有料プランに加入すればさらに多機能を利用可能；
ビルダーに満足できない場合、オンライン購読日から14日以内なら返金対応可能；
問題があればカスタマーサポートが常時対応し、フォーム埋め込みをサポート；
データ収集やレポート機能があり、ウェブサイト上でのビルダーの効果を分析可能；
多彩なフォームテンプレートで顧客のフィードバックを集め、リマーケティングに活用可能。

一方で、いくつかのデメリットも挙げられます：

年間契約や生涯契約のプランは用意されていない；
ビルダー使用開始時にウェブサイトのパフォーマンス評価が約3%低下する可能性がある；
シンプルなソリューションであり、統合型プラグインの機能には及ばない場合がある；
ウェブサイトとのインタラクション機能はやや限定的。

これらを踏まえた上で、試してみるかどうかの判断材料にしてください。

フォームウィジェットの機能一覧

以下の表では、Elfsightのオンラインフォーム埋め込みソリューションの全機能をご覧いただけます。

あらゆるフォームタイプ	Elfsight Form Builderなら、連絡フォーム、アンケート、その他あらゆる種類のフォームを一つのツールで作成し、ウェブサイトに埋め込めます。
柔軟なレイアウト	フォームのフィールドをカラムに分けて独特な見た目にしたり、ラベルを非表示にしたりグループごとに共通ラベルを作成したり、完全に横並びのフォームにしたり、フォーム幅を調整したり、ラベル・見出し・段落要素で構造化したりと、ウェブサイトに合わせて自由にカスタマイズ可能です。
多段階フォーム	フォームを複数ページに分けたい場合はページ数を設定し、フィールドを振り分けられます。各ページにタイトルや説明を追加してさらにカスタマイズも可能です。
20種類のフォーム要素	長文・短文テキスト、サムズアップやスマイリー、星評価、数値などの各種スケール、日付・時間選択など多彩な要素を備えています。各フィールドは必須設定や日付・時間フォーマット、アップロード可能なファイル形式など細かく設定できます。
フォームのスタイリング	コード不要で独自デザインが可能。ライト・ダークモードの選択、ブランドカラーの追加、フィールドごとのデザイン変更、フォント変更などができ、オンラインエディターで各コンポーネントを個別に調整して独特な見た目を作れます。
フォームヘッダー	フォームにヘッダーを設定し、タイトルや説明文を付けられます。ウェブサイトのカバー画像やブランドロゴも追加可能で、特にリンク経由でフォームを使う際に見栄えを向上させます。
フローティングフォーム	フォームの埋め込み方法を選べます。コンテンツ内に直接配置する「インラインフォーム」か、クリックでフォームパネルが開く「フローティングフォーム」ボタンのどちらかを選択可能です。
連携機能	MailchimpやGoogle Sheetsと連携してユーザーデータを効率的に収集可能です。オンライン作成ツールで設定すれば、フォームのデータが直接これらのサービスに送信されます。さらにZapierとも連携でき、5000以上のサービスと情報を統合し、ほぼあらゆる連携タスクを解決できます。
スパム対策	Google reCAPTCHAをサポートし、無料で効果的なスパム防止を実現。ユーザーはチェックボックス操作不要で自動的に保護され、スパムボットの侵入を防ぎます。
メール通知	フォーム送信時に様々なメール通知を設定可能。自分宛にフォーム内容を送信したり、ユーザーに送信完了メールを自動送信（オートレスポンダー機能）したりできます。通知ごとに送信パラメータやメールテンプレートをカスタマイズ可能です。
送信後のアクション	送信後に表示する成功メッセージ、別ページへのリダイレクト、フォームの非表示などを選択でき、オンラインフォームメーカーでコード不要で細かく調整可能です。
URLパラメータによる事前入力	URLパラメータを使って特定フィールドを事前入力する設定が可能。例えば、顧客が特定商品やサービスに興味がある場合、そのパラメータ付きリンクを渡すことで対応フィールドが自動入力されます。隠しフィールドを使った分析情報の事前入力も可能です。
多言語対応フォーム	カスタマイズしたフォームの全フィールドをスペイン語、フランス語、イタリア語、ポルトガル語、セルビア語など多言語に翻訳できます。

さまざまなウェブサイトビルダーへのフォーム追加の詳しいガイド

ここでは、オンラインで作成・カスタマイズしたフォームを任意のウェブサイトに埋め込む方法を簡単に解説します。フォームウィジェットのコードをウェブページのHTMLフィールドに貼り付けるだけで完了です。さあ、始めましょう！

このプロセスは非常に簡単で、設置後すぐにウェブサイトでウィジェットの動作を楽しめます：

料金は無料：フォーム作成も機能確認も無料で利用可能
既存フォームの変更はElfsight管理画面でオンラインで行えるため、プラットフォームのコード編集は不要
フォームの更新は自動で反映され、手作業は一切不要

このステップバイステップの手順で、どんなサイトでもフォーム埋め込みが簡単にできることがわかります。動画もぜひご覧ください：

以下は動画の簡単な書き起こしです：

Elfsightに無料登録し、管理画面にアクセス；
ウィジェット作成ツールでレスポンシブフォームを作成；
設定完了後にForm Builderを保存；
ポップアップからフォーム設置コードをコピー；
ウェブサイトにアクセスし、HTMLフィールドにコードを貼り付け。

これで驚くほど簡単にフォームを設置できました。設置後はウェブページで動作を確認してください。もし問題があれば、Elfsightサポートチームがいつでも対応します！

WordPressでフォームを埋め込む方法

WordPressサイトにForm Builderを追加する方法をご紹介します。プラットフォームのユーザーによってはElementorを使う場合もあるため、2つの手順を用意しました：

方法1：WordPressのオンラインエディターを使う場合

Elfsightダッシュボードでレスポンシブフォームを作成・編集後、WordPressの管理画面を開きます。HTMLコードフィールドにElfsightのフォームウィジェットコードを貼り付けます。手順は以下の通り：

Elfsightのオンラインメーカーでフォームを作成。
フォーム設置コードをコピー。
WordPressにログイン。
「固定ページ」セクションへ。
フォームを設置したいページを選択。
必要な場所にカスタムHTMLコードブロックを追加。
無料ウィジェット作成ツールからコードを貼り付け。
「更新」をクリックして保存。

ウィジェットが埋め込まれた後は、Elfsight管理画面での変更が自動的に反映されるため、WordPress側でフォームを編集する必要はありません。

方法2：Elementorを使う場合

Elementorを選択した場合の簡単な手順はこちら：

Elfsightでカスタムフォームを作成。
フォーム設置コードをコピー。
WordPress管理画面にアクセス。
フォームを追加したいページを選択。
ページマネージャーまたはページ一覧へ。
「Elementorで編集」を選択。
「HTML」ウィジェットをドラッグしてフォームを追加。
「更新」をクリックして保存。

Elementorで作成した各ページにフォームウィジェットコードを追加すれば、すぐにレスポンシブなForm Builderが表示されます。

Wix HTMLサイトにフォームを埋め込む方法

WixサイトにForm Builderを追加するには、まずWixのダッシュボードを開き、カスタムHTMLコードを埋め込むオプションを探して以下の手順を行います：

Elfsight管理画面にアクセス。
フォームを作成し「保存」をクリック。
ポップアップに表示されたフォームウィジェットコードをコピー。
Wix管理画面にログイン。
「設定」セクションへ。
「カスタムコード」を選択。
「カスタムコードを追加」フィールドが表示される。
ここにフォームコードを貼り付け。

これで完了です！Wixサイトで無料かつレスポンシブなビルダーの動作を確認できます。フォームに変更を加えれば自動的にWixサイトに反映されます。詳しくはWixサイトへのフォーム追加方法をご覧ください。

Squarespaceにフォームを追加する方法

SquarespaceにHTML Form Builderを追加する簡単な手順はこちらです：

Elfsightダッシュボードにログイン。
ウィジェットメーカーでフォームを作成。
フォーム設置コードをコピー。
Squarespace管理画面にログイン。
Squarespaceのウェブサイトエディターを開く。
「コードブロック」をクリックしてフォームコードを挿入。
変更を保存。
Squarespaceサイトでウィジェットを確認。

保存後、フォームはすぐにSquarespaceサイトに表示されます。HTMLコードの編集は不要で、Elfsight管理画面での変更は自動的に反映されます。

ShopifyのHTMLサイトにフォームを追加する方法

ShopifyサイトにElfsightレスポンシブウィジェットを埋め込む手順はこちらです：

Elfsight管理画面にログイン。
オンラインメーカーでフォームを作成。
進捗を保存。
ポップアップからフォームコードをコピー。
Shopify管理画面にアクセス。
「オンラインストア」→「カスタマイズ」を選択。
メニューから「セクションを追加」を選択。
「カスタムコンテンツ」を選び「追加」をクリック。
デフォルトで設置されている部分を削除。
「コンテンツを追加」メニューへ。
「カスタムHTML」フィールドにフォームコードを貼り付け。
保存してサイトの動作を確認。

フォームの見た目や機能を変更したい場合はElfsight管理画面で無料で編集でき、変更は自動的にサイトに反映されます。

Webflow HTMLサイトにフォームを埋め込む方法

Webflowサイトにフォームを統合する簡単な手順はこちらです：

Elfsightの無料エディターを起動しフォーム作成を開始。
適切なデザインと機能を選択。
保存してフォーム埋め込みコードをコピー。
Webflowのホームページにフォームウィジェットコードを挿入。
編集を保存し、レスポンシブウィジェットの動作を確認。

コード埋め込みで問題があれば、いつでもサポートチームに連絡してください。サポートは常に対応しています。

Google Sites HTMLサイトにフォームを追加する方法

Google Sitesには新旧2つのバージョンがあるため、それぞれに対応したチュートリアルがあります。どちらのバージョンでもフォームを追加する方法をご紹介します。

方法1. 新しいGoogle Sites

Elfsightでウィジェットを作成・カスタマイズし保存。
ポップアップからフォーム設置コードをコピー。
Google Sitesエディターを開き「埋め込み」をクリック。
「コードを埋め込む」を選択し、フォームコードを貼り付けて「次へ」をクリック。
レスポンシブウィジェットの幅と高さを調整。

これで新しいGoogle Sitesにフォームが埋め込まれました。

方法2. クラシック（旧）Google Sites

こちらは少し複雑ですが、以下の手順で問題ありません。

Elfsight管理画面でレスポンシブウィジェットを作成。
オンライン作成ツールで要素をカスタマイズし保存。
ポップアップからフォーム設置コードを取得。

旧Google SitesはJSコードをサポートしないため、ウィジェットコードをiframeに変換する必要があります。変換方法はこちらのリンクをご参照ください。

iframeに変換後、以下の手順で埋め込みます：

Google Sitesエディターを開き「編集」をクリック。
「HTMLソースを編集」を選択し新しいコード要素を追加。
作成したiframeコードを挿入し「更新」をクリック。
「プロパティ」からウィジェットの設定やサイズを調整。
Google Sitesでウィジェットの動作を確認。

これで旧Google Sitesでもレスポンシブウィジェットが正常に動作します。もし問題があればElfsightサポートチームにご相談ください。いつでも対応しています。

Blogger HTMLサイトにフォームを追加する方法

Bloggerサイトにフォームを埋め込む手順はこちらです：

Elfsight管理画面でフォームを作成。
デザインを設定し変更を保存。
ポップアップからHTMLコードをコピー。
Bloggerのホームページで「テーマ」をクリック。
「HTMLを編集」を選択しコード編集画面を開く。
「body」タグを探し、「div class」の後にコードを貼り付け。
保存してレスポンシブウィジェットの動作を確認。

これでBloggerサイトにフォームが埋め込まれました。

ウェブサイトでフォームを使う際に知っておくべきこと

BuiltWith Trendsの統計によると、トップ1000サイトの40%がユーザーデータ収集のためにフォームを利用しています。フォームが顧客に評価され、コンバージョン率を高めることが研究で示されているのも納得です。ここではフォーム設置前に押さえておきたいポイントや事実を紹介します。

1. フォーム利用で売上アップは本当か？

もちろんです！例えばVenture Harbourによると、多段階フォームは300%ものコンバージョン増加をもたらすと報告されています。

私のキャリアで最も驚いた発見の一つは、多段階フォームの高いコンバージョン率でした…2014年に「快適ゾーン」を測るオンライン計算機をリリースした際、従来のウェブフォームは役に立ちませんでした。ユーザーの詳細情報を取得したかったのに、長いフォームがコンバージョン率を下げていたのです。
多くの調査とテストの末、多段階フォームのコンセプトに出会い自作しました…多段階フォームは多くの質問（メール、名前、電話番号、給与など）を含みながらも、訪問者の53%をリードに変換しました。
Marcus Taylor

2. いつユーザーの個人情報を収集すべきか？

調査によると、65%の訪問者は「個人情報が多すぎる」フォームは送信しないと回答しています。理由は明白で、顧客は知らない相手に電話番号やメールアドレスを教えたくないのです。したがって、初めて訪れるユーザーに対してはこうした質問を避けるほうが疑念を抱かせません。

重要な情報（電話番号など）は、信頼関係が築けて見込み客が次のステップに進む準備ができた時に収集しましょう。
Huff Industrial Marketing, KoMarketing, & BuyerZone

3. フォームのフィールド数はどのくらいが適切か？

フォームの質問数を増やすか減らすかを検証した研究は複数あります。再びVenture Harbourの調査によると、フォームの長さが効率に与える影響は一概には言えず、以下の要因によって異なります：

コンバージョンの種類：メール登録やアカウント作成では求められるフォームが大きく異なる。
ユーザーの期待：価値を感じれば喜んで入力する。
インセンティブ：摩擦を減らすための動機付けがあるか。
必要な情報量：質の高いリードを得るためには多少の摩擦も許容される場合がある。
フォーマット：多段階フォームは長いフォームでも摩擦を減らすデザインが可能。
ベストプラクティス：あくまで指針であり、すべてのデザインが常に効果的とは限らない。

ワンクリックであらゆるフォームタイプを作成できるオールインワンソリューション

Elfsight Form Builderウィジェットは、ワンクリックであらゆるフォームを作成できるオールインワンツールです。お問い合わせフォーム、フィードバックフォーム、アンケートフォーム、注文フォーム、カスタムフォームなど、ニーズに合ったフォームを埋め込めます。

Elfsight Form Builderなら、必要なフォームタイプを一か所で簡単に作成できます。

Template Catalog

300以上のForm Builderテンプレートをチェック

あらゆる用途に使える既成テンプレートをもっと見るか、自分だけのフォームを作成しましょう！

Show More Templates

まだ疑問がある場合

これでどのウェブサイトビルダーにも簡単にフォームを追加できる方法と、その効果がわかりました。また、Elfsightのレスポンシブウィジェットであらゆるフォームタイプを作成できることもご理解いただけたと思います。もしこの記事でカバーされていない疑問があれば、以下の方法をご利用ください：

ウィッシュリストで、まだForm Builderにない機能のリクエストを投稿する。

ヘルプセンターでForm Builder関連の記事やチュートリアルを参照する。
既存のテンプレートをチェックしてカスタムツールを作成する。
Elfsightコミュニティで同じ志を持つ人々と交流し、意見を共有する。

フォーム埋め込みに関するこの記事がお役に立てれば幸いです。またのご訪問をお待ちしております。ご覧いただきありがとうございました！

また、他にも素晴らしいガイドがあります。例えば、Googleビジネスレビューをウェブサイトに埋め込む方法もぜひご覧ください！