お問い合わせフォームなどを作成して公開したあとに、皆さんはフォームをどこに設置していますか？
どこかのページやサイト、メールやSNSの投稿にフォームのリンクを貼り付けるなど…
サイトや個人のブログなどに設置する場合、URLをそのまま貼り付けるのはもちろん問題ないですが、実はフォームをページに「埋め込む」という方法もあります。
フォームをページに埋め込むことについて、フォームメーラー上ではフォームの「外部設置」といいます。今回はフォームメーラーのフォームを使って「外部設置」について、どういうメリットがあるのか、そして実際にフォームの外部設置の方法について紹介していきます。
そもそも外部設置とは？
外部設置とは、フォームをHTMLコードまたはiframeで既存のサイトのソースコードに記述して、フォームをサイトに埋め込むことです。リンクを直接貼り付けるほうが簡単で誰でもできますが、わざわざ外部設置の形でフォームを設置する必要があるでしょうか？
では、外部設置のメリットについて簡単に説明します。
自社のフォームとして認識される
自社のサイトにフォームを埋め込む場合、自社サイトのURLのままで変わらないので、フォームの回答者は自社のフォームだと認識して、外部サービスを利用していることはバレにくいです。
入力する場所がすぐわかる
リンクをページ上に直接貼り付けると、リンクの場所がわからないことがたまにあります。その場合、回答者にとってフォームを探さないといけない手間がかかりますが、フォームを外部設置すると入力画面はそのまま表示されるので、フォームが見つからないことはなくなります。
ページ間を遷移する回数を減らせる
フォームのリンクを貼り付ける場合、フォームにアクセスすると入力画面は新しいウィンドウで開くことが多くあります。外部設置する場合は基本的に1つの画面上の遷移となるので、画面上で遷移する回数が減ると、フォーム投稿者のストレスも軽減されるでしょう。
HTMLコードでの設置とiframeでの設置の違いは？
フォームを外部設置する場合、HTMLコードまたはiframeで設置できると最初に説明しましたが、その2つの方法の違い、そしてメリットとデメリットについてこれから説明していきます。
HTMLコードでの設置
メリット
CSSは自身で編集できるので、フォームのスタイルを設置先ページに合わせたい場合は自由にカスタマイズできます。
デメリット
フォームメーラー上ではCSSを編集する機能はありませんので、自身で行う必要があります。
また、一部フォームメーラーの機能が制限されます。
確認画面のURLは設置先のURLではなくフォームメーラーのものになります。
どういう人におすすめ
コーディングができるなどHTMLの知識がある人。
iframeでの設置
メリット
フォームメーラーの機能制限がない、フォームメーラーに設定されたデザインをそのまま反映されます。
デメリット
フォームのCSSを調整できないため、フォームのスタイルを設置先ページのデザインに合わせることができません。また、画面は遷移しないためページのURLは変わりません。
どういう人におすすめ
フォームを外部設置する初心者。
実際の設置手順
外部設置について一通り紹介しましたが、これからは実際にフォームの外部設置を行います。一般的にページの更新方法は下記の3ステップとなります。
①ページのHTMLファイルの編集
↓
②編集後のHTMLファイルをFTPを通じてサーバー上にアップロードする
↓
③ページのURLにアクセスして更新を確認
次はHTMLコードで設置する場合とiframeで設置する場合、それぞれの手順を説明していきます。
HTMLコードでの設置
①管理画面よりフォームのコードを取得
フォームメーラーの管理画面にログインした後、フォーム一覧画面より設置したいフォームの「コード出力」ボタンをクリックすると、フォームのURL、QRコード、iframeとHTMLコードが表示されます。
HTMLコードの右下にある「コードをコピー」ボタンをクリックすると、自動的にコードがコピーされます。
②ページのHTMLファイルを編集
次はコピーしたコードを設置します。
今回はフォームを下記画像のページ「まずは30日間無料トライアル」ボタンと「事例紹介」の間に設置します。
（赤い矢印が指すところ）
取得したコードを記載するために、ページのHTMLファイルを開きます。
管理画面で取得したHTMLコードを設置したい場所に記載してファイルを保存します。
③ページのHTMLファイルをアップロード
HTMLファイルを編集して保存した後、FTPを通じてHTMLファイルをアップロードします。これでフォームの設置が完了です。
④フォームが正常に表示されるか確認する
設置先ページにアクセスして、フォームが正常に表示されるか確認します。HTMLコードで設置すると、下記画像のようなデザインがない入力画面になり、CSSを調整する必要があります。
iframeでの設置
①管理画面よりフォームのコードを取得
HTMLコードと同じ「コード出力」画面より、今度はiframeのコードを取得します。
②ページのHTMLファイルを編集
管理画面で取得したiframeのコードを設置したい場所に記載してファイルを保存します。
③ページのHTMLファイルをアップロード
HTMLファイルを編集して保存した後、FTPを通じてHTMLファイルをアップロードします。これでフォームの設置が完了です。
④フォームが正常に表示されるか確認する
下記画像のように、iframeで設置する場合、フォームメーラー上と同じデザインの入力画面が表示されます。
なお、どちらで設置しても確認画面と完了画面はフォームメーラーのもので表示されます。
※もし独自の完了画面を利用したい場合、「リダイレクト設定」を利用ください。
以上が実際にフォームを外部設置する時の手順です。
まとめ
フォームを外部設置する場合のメリットや実際の設置方法について説明しました。初めてフォームを設置する、コードの編集などに知識がない人にはiframeでの設置がおすすめです。
また、フォームメーラーでは他にも便利な機能が多くあります。無料版でも外部設置用のコードを提供しておりますので、初めての方なら無料版で気軽に試してみてください。有料版を利用したい場合、有料版の「Business版」は14日間無料でお試しできますので、ぜひ一度登録してください。
【Business版の14日無料トライアル】