Studio のサイトに申込フォームを付ける方法　埋め込みの手順と注意点

Studio の公式のヘルプによると、標準のフォームは追加パネルの［基本］タブから置くだけで使え、デザインもエディタの上で自由に変えられます。届いた回答は、フォームダッシュボード・通知メール・Google スプレッドシートの連携で確かめられます。ファイルを添付する欄も付けられます。

サイトと同じ見た目で問い合わせを受けたい、ファイルを添付してもらいたい、という受付なら、Studio の標準のフォームが向いています。わざわざ別のサービスを使う必要はありません。

Studio の「Embed（埋め込み）ボックス」には、ほかのサービスで作ったフォームを貼れます。公式のヘルプでは、Embed ボックスは有料・無料のプランに関わらず使えると案内されています。LEXORA Forms で作ったフォームを貼ると、次のような受付を設定だけで始められます。

• 申し込んだ人に受付の控えを送る。自動返信メールは、フォームにメールアドレスの設問を置き、通知設定でオンにするだけです。無料プランは決まった文面で、文面を自分で書くのは Light プランです。返信は作成者のアドレスに届きます
• 日程や回ごとに定員を決める。選択肢ごとの定員を付けると、埋まった日程は「満席」と出て選べなくなります（無料プランでも使えます）
• 郵便番号から住所を入れてもらう。住所の設問は、郵便番号を入れると都道府県・市区町村・町域が入ります
• 届いた申込を一覧で管理する。回答の対応状況とメモを付け、CSVで Excel 向けの文字コード（Shift-JIS）でも出せます

同じフォームを URL や QR コードでも配れるので、ホームページに貼ったフォームを、チラシや店頭のポップからも開いてもらえます。

1. 1

   LEXORA Forms でフォームを作り、公開する

   メールアドレスか Google アカウントで登録し、セミナー・イベント申込フォームや体験レッスン申込フォームなどのテンプレートから作ると、項目を直すだけで済みます。新しいフォームは非公開（下書き）で作られるので、上部のバーの「公開する」を押してから貼ります。
2. 2

   「共有」の画面で埋め込みのコードをコピーする

   「ホームページに埋め込む」に2つのコードがあります。Studio に貼るときは、下の「iframe のみ（スクリプトを貼れない場合）」のコードをコピーします（理由はこのあとの「2つのコードの違い」で説明します）。
3. 3

   Studio で Embed ボックスを置く

   Studio のエディタで、ナビゲーションの追加アイコンから［基本］タブを開き、［埋め込み］セクションの［Blank］を選びます。フォームを出したい場所（申込のセクションなど）に置きます。
4. 4

   埋め込みコードを貼って保存する

   置いたボックスを選び、右パネルの［埋め込み］タブで［埋め込みコード］の［エディタを開く］を押します。もとから入っている文字を消してコピーしたコードを貼り、右側のプレビューでフォームが出ることを確かめて［保存］を押します。
5. 5

   サイトを更新する

   公開済みのサイトを編集しているときは、公開パネルでサイトを更新するまで変更が反映されません。更新したら、公開中のページを開いてフォームから1件送ってみます。

2つのコードの違い

Studio の公式のヘルプでは、Embed ボックスに貼ったコードは、iframe のタグだけなら「iframe タイプ」、それ以外は「sandbox タイプ」として扱われ、sandbox タイプではセキュリティの制限で一部の機能に制約が出る場合があると説明されています。LEXORA Forms の「高さを自動で合わせる（おすすめ）」のコードは高さを変えるためのスクリプトを含むので、Studio では sandbox タイプになります。そのため、この記事では iframe のタグだけでできた「iframe のみ」のコードで説明しています。

どのページから申し込まれたかを記録する

同じフォームをトップページと料金のページの両方に貼るときは、隠しフィールドが役に立ちます。フォームに隠しフィールドを足してパラメータ名を「from」にし、コードの URL の?embed=1のあとに&from=topのように書き足すと、回答と一緒に「top」が記録されます。回答する人には見えません。貼る場所ごとに値を変えておけば、回答の一覧でどのページから申し込まれたかが分かります。

色と見た目

埋め込んだフォームは、背景と上部のカバーを出さず、カードだけを表示します。ボタンの色や角の丸みは LEXORA Forms のデザインで変えられるので、サイトのメインの色に合わせておくとなじみます。

通知の届き先

申込が届いたことは、新しい回答のお知らせで LEXORA Forms に登録したメールアドレスに届きます。Studio の通知メールとは別なので、Studio の標準のフォームから乗り換えたときは、届き先が変わることをチームの人にも伝えておきます。

• サイトとまったく同じ見た目にはできません。フォームは枠（iframe）の中に表示されるので、文字の書体やアニメーションまで Studio のデザインにそろえたいときは、Studio の標準のフォームのほうが向いています
• 無料プランではフォームに LEXORA の表示が入ります。埋め込んだフォームにも「Built with LEXORA Forms」の表示が出ます。消せるのは Light プランからです（LEXORA の表示）
• 無料プランには上限があります。フォームは5個まで、回答はアカウント全体で月100件までです。詳しくは料金プランをご覧ください
• 回答は LEXORA Forms に保存されます。Studio のフォームダッシュボードには入らないので、回答は LEXORA Forms の回答の画面で確かめます

問い合わせの窓口ならお問い合わせフォームから始められます。いたずらの送信は自動でブロックするので、追加の設定は要りません。