Googleフォーム、Calendly、Typeformをサイトに埋め込む方法

Googleフォーム、Calendly、Typeformの埋め込み

Googleフォーム、Calendly、Typeformをサイトに埋め込む | We.Inc

Googleフォーム、Calendly、Typeformで埋め込みコードがある場所、それぞれをスマートフォンに合わせる方法、そしてコードを整えてくれるビルダーを紹介します。

どのサービスも、ページに貼り付けるコードを用意しています。Googleフォームは「HTMLを埋め込む」からiframeを、Calendlyは「Add to website」からdivとscriptを、Typeformはdata-tf-widget付きのdivと埋め込み用scriptを提供します。スマートフォンに収まるよう、適切な高さ、title、width 100%を設定しましょう。

各サービスの埋め込みコードの場所（2026年10月時点）

サービス
クリックする場所
貼り付けるもの

Googleフォーム
その他メニュー（3点アイコン）> HTMLを埋め込む > コピー
iframe

Calendly
スケジュールページ > 3点アイコン > Add to website
divとscriptタグ

Typeform
フォームの共有設定にある埋め込みオプション
data-tf-widget付きのdivとscriptタグ

コードのコピーは簡単です。問題はその後に起こります。スマートフォンでフォームが途中で切れる、スクロールバーが二重になる、iframeにスクリーンリーダー用のtitleがない、予約ウィジェットがページを重くする、といったことです。このガイドでは、各コードの場所と、正しく動かす方法を解説します。

下のビルダーでサービスを選びます。
サービスから取得したもの（Googleのiframeコード、Calendlyのリンク、Typeformのリンク）を貼り付けます。
高さと、フォームの内容を表す短いtitleを設定します。フォームがファーストビューより下にある場合は遅延読み込みを選びます。
整えたコードをサイトのHTMLブロックまたは埋め込みブロックにコピーし、スマートフォンで動作を確認します。

すべてのiframeに「お問い合わせフォーム」や「通話を予約」のようなtitleを付けましょう。スクリーンリーダーの利用者は、中に入るかどうかを決める前にそれを聞きます。
ページの下のほうにあるiframeにはloading="lazy"を追加しましょう。訪問者が近くまでスクロールするまでフォームは読み込まれません。
固定のピクセル幅ではなく、widthを100%にしてmax-widthで上限を設けましょう。そうしないと小さな画面でフォームがはみ出します。
埋め込み後は実際に送信してテストしましょう。見た目が正しくても、別のアカウントや下書き版に送信されていることがあります。

よくある質問

埋め込んだGoogleフォームにスクロールバーが2本出るのはなぜですか？

iframeがフォームより短いため、ページと同時にフォームもiframeの中でスクロールしています。フォーム全体が収まるまでheight属性を大きくし、質問を追加したら再確認してください。フレームは自動では大きくなりません。

埋め込んだGoogleフォームを自分のCSSでスタイル設定できますか？

できません。フォームはGoogleが配信するページをフレーム内に表示したもので、自分のスタイルシートは中まで届きません。Googleフォーム内でテーマを変更するか、別の送信先を持つ独自のフォームを作りましょう。

Calendlyのインラインウィジェットが途中で切れないようにするには？

Calendly自身のコードが最小幅320pxと固定の高さを設定しています。イベントで追加の質問をする場合は高さを上げるか、ポップアップテキストやポップアップウィジェットを使って、スケジューラーがページの上に開くようにしましょう。

Typeformはどの埋め込み方式を使えばよいですか？

Typeformには、インライン、フルページ、ポップアップ、スライダー、ポップオーバー、サイドタブの埋め込みがあります。フォームがページの主役ならインライン、他のコンテンツの横にある補助的な操作ならポップアップかスライダーを使いましょう。

We.Incで作ったサイトでもこれらの埋め込みは動きますか？

はい。HTMLブロックまたは埋め込みブロックにコードを追加するか、エディターにセクション内へフォームを配置するよう依頼してください。コードは普通のHTMLなので、他のサイトと同じように動作します。