ウェブサイトの同じページに複数のフォームを設置したい
埋め込み用HTMLコードを使用し、ウェブサイトの1ページにフォームを2つ以上設置したら、別のカラーデザインを選択しているのに同じカラーになってしまったり、最初に埋め込んだフォームのみしか動作しないことがございます。
複数のフォームをウェブサイトの1ページでご利用される場合、下記方法でご対応をお願いいたします。
目次
複数のフォーム設置方法
１．ページ内リンク（１フォームを１ページ内の複数箇所に設置したい場合）
１．ページ内にフォームの設置は１つにします。
[オレンジフォーム]>[サンプルフォーム【A】]>[タグ取得(HTML表示)]を開きます。
フォームを設置するウェブサイトのページのhtmlファイルや、ブログ、ワードプレスなどのコンテンツマネジメントシステムの編集画面を開き、フォームを設置したい箇所のソースコード内にペーストしてください。
[貼付用HTMLコード（デザインあり）]のソースコードのうち、「<form～」から始まるタグ内の、id="OF_form*"（③）のアルファベットや数値をコピーして、別のテキストファイルなどにメモしておきます。プレビューやブラウザでフォームの表示を確認してください。
２．フォームに飛ぶようにリンクボタンを設置します。
フォームを設置したウェブページと同じページ内で、フォームより上にある登録ご案内の文章のブロックなどに、同ページ内下部のフォームへのリンクやボタンを設置します。
３．リンクボタンをクリックしたら、フォームAにページ内リンクで移動できるようにします。
htmlファイルやブログ、ワードプレスのCMSの編集画面で、フォームへリンクするテキストや画像、ボタンのソースコードを、a要素で囲みます。
a要素のhref属性に、[貼付用HTMLコード（デザインあり）]のソースコードからメモしたフォーム要素のid（例だと"OF_form1"の部分）を「#(半角)」をつけて指定します。
例）
<a href="#フォーム要素のid">フォーム登録をする</a>
テキストリンクやボタンのa要素にフォームへのページ内リンクの設定をしたら、編集したhtmlファイルやCMSの編集画面を閉じ、ブラウザで表示します。
リンクやボタンをクリックして、同じページ内の登録フォームに移動することを確認しましょう。
同じページ内の、ほかにもフォームへのリンクを設置したい箇所に、作成したテキストリンクやボタンのソースコードを貼付けてください。
２．ページ外リンク（２つ以上の異なるフォームを同じサイトに設置したい場合）
１．2つ以上の別のフォームを設置したい場合も、１ページにフォームの設置は1つにします。
フォームAを設置するページと、フォームBを設置するページはそれぞれ別のページになるように作成し、埋め込みHTMLを貼付けて編集してください。
※page2(formA), page3(formB)
２．フォームへのリンク元のページに、２つのリンクボタンを設置します。
１つのページ内(※page1)に、２つの別のフォームへのリンクまたはボタンを設置できます。
フォーム登録をご案内するウェブページのhtmlファイルや、ブログ、ワードプレスなどCMSの編集画面で、リンクやボタンを設置してください。
３．リンクボタンをクリックしたらフォームA・フォームBのページに移動できるようにします。
フォームA、フォームBそれぞれについて、formのidをコピーしておきます。
htmlファイルやブログ、ワードプレスのCMSの編集画面で、フォームへリンクするテキストや画像、ボタンのソースコードを、a要素で囲みます。
a要素のhref属性に、フォーム設置ページURLと、[貼付用HTMLコード（デザインあり）]のソースコードからメモしたフォーム要素のidを「#(半角)」をつけて指定します。
例）
<a href="https://フォームの設置ページURL/#フォーム要素のid">フォーム登録をする</a>
フォームA、フォームBそれぞれのリンクボタンについて設定します。
３．iframe（インラインフレーム）で２つめのフォームを表示する
１．ページ内にフォームの設置は１つにします。（フォームAを埋め込みHTMLで設置）
取得したソースコードを、フォームを設置するウェブページのhtmlファイルやブログ、ワードプレスなどのCMSの編集画面で貼り付けます。
プレビューやブラウザでフォームの表示を確認してください。
２．iframe（インラインフレーム）を利用して、もう一つ設置します。
（別ページのフォームBをiframeで読み込んで同じページに表示）
[オレンジフォーム]>[サンプルフォーム【B】]>[URL＆QRコード取得]を開きます。
「登録ページURL」をクリップボードにコピーし、テキストエディタなどにメモしておきます。
フォームAを設置したウェブページの編集画面の別ブロックに、iframe要素を作成します。
例）
<iframe src="https://フォームBの登録ページURL/" width="100%" height="320"></iframe>
width：フォームを表示する幅(％、またはピクセルの値を指定)
height：高さ(ピクセルの値などを指定)
プレビューやブラウザでフォームの表示を確認してください。
埋め込みHTMLで設置したフォームAと同じページに、インラインフレームで読み込んだ別ページのフォームBが表示されます。
登録する場合は、「確認ボタン」「送信ボタン」を押すと、同じページ上で入力内容の確認や「登録完了ページ」が表示されます。
【ご注意】
iframe（インラインフレーム）で設置したフォームは同じページ内に登録完了ページが表示されます。
また、スマホでは表示がずれてしまうことがございますので、ページ内リンク、またはページ外リンクでのご対応をお願いいたします。
お問い合わせは、お問い合わせフォームよりお願いいたします。