フォームの設置方法-フォームズ

フォームの設置方法

ここでは、作成したメールフォームの設置方法を説明します。
メールフォームの設置方法は、大きく分けると2通りあります。

ページ内に埋め込む方法

問合せや資料請求などの簡単なフォームに適しています。ページの一部として表示されるので、見た目ではレンタルフォームであることが分かりません。フォームの大きさを意識して、設置する必要があります。

リンクをクリックして別ウィンドで開く方法

アンケートなど比較的入力項目の多いフォームに適しています。フォームの大きさを意識する必要はないので、設置は簡単です。

ページ内に埋め込む方法

下記のように、<iframe>タグを使用します。
フォームを表示したい部分にこのタグを埋め込みます。

<iframe src="フォームのURL" style="height: 500px; max-width: 620px; width: 100%; border: 0;"></iframe>
高さを変えたいとき
「height(縦)」値の値を変更します。例)height: 800px;
横幅を変えたいとき
「max-width(横)」の値を変更します。例)max-width: 700px;
「width: 100%」はそのままです。

表示しきれないときは、スクロールバーが表示されます。

下記にフォームURLを入力すると、上記の<iframe>タグを自動的に生成します。


iOS(iPhone)、macOSのブラウザには、「入力画面」→「内容確認画面(完了画面)」の切替時に、フォームの先頭部に戻らないバグがあります。
このバグを修正した設置用タグです。現時点ではこちらを使用してください。
リンクをクリックして別ウィンドウで開く方法

下記のように、<a>タグを使用します。クリックしてフォームを開きたい部分にこのタグを埋め込みます。

<a href="フォームのURL" target="_blank">メールフォーム</a>

<a>タグの間に、適当な言葉を挟んでください。

下記にフォームURLを入力すると、上記の<a>タグを自動的に生成します。

<a>タグ内から「target="_blank"」を消すと、同一ウィンドウでフォームを開きます。

少し難しい方法

Javascriptを使うと、ウィンドの大きさや位置を設定できます。
フォームズの問合せフォームはこのタイプです。以下にサンプルを示しておきます。
フォームURLを変えて、そのまま使用できます。

<a href="javascript:void(0)" onClick="javascript:window.open('フォームURL', 'mailform1', 'width=600, height=500, top=100, left=100')">メールフォーム</a>

このサンプルについては、サポートは行いませんので、あらかじめご了承ください。
Javascriptが分かる場合は、Javascriptのwindowオブジェクトのopenメソッドを参照してください。