フォーム・タグ取得方法（URL・QRコード・埋め込みHTML）

2018年3月16日2023年12月2日

登録ページURL/QRコード/埋め込み用HTMLの取得方法
- １. URLとQRコード
  - ①URL利用方法
  - ②QRコード利用方法
- ２. HTML埋め込みタグ
  - HTML埋め込みタグについてのよくある質問
Powered byの表示の有無（※有料ビジネス/エンタープライズ版のみ）
- 設定方法
オレンジフォーム埋め込み代行サービス（有料）
まとめ

オレンジフォームでフォームを作成後、そのフォームを配布するには以下の3つの方法があります。

URL
QRコード
HTML埋め込みタグ

用途に合わせて、作成したフォームの配布ができるようになっています。

URL：メールやウェブサイトに登録フォームのURLリンクをコピー＆ペーストして配布したい場合。一番簡単に登録フォームを配布でき、スマートフォン対応もバッチリ！

QRコード：ポスターなどの印刷物にQRコードを印刷したい場合や、スマートフォンやタブレットなどの携帯端末からの登録者用にQRコードリーダーを使用してキーボード入力の手間を省いていただきたい場合などにご活用いただけます。QRコード画像とウェブサイトに埋め込めるimgタグの2種類からご選択いただけます。画像は印刷用に、埋め込み用imgタグはウェブサイトやブログへ埋め込みください。

HTML埋め込みタグ：ウェブサイトやブログのページにフォームを埋め込みたい場合や、フォームのデザインを独自のデザインにカスタマイズしたい場合にご利用ください。HTMLコードはフォームデザインあり、なしの2種類あり、独自にカスタマイズしたい場合にはデザインなしをご選択ください。デザインありについてはスマートフォン対応となり、デザインなしの場合にはご自身でカスタマイズを行ってください。

また、オレンジフォームはすべてURLアドレスがHTTPSではじまり、SSL暗号化通信対応済みで安心です！

登録ページURL/QRコード/埋め込み用HTMLの取得方法

作成したフォームの管理画面を開き、[フォーム]＞[フォーム（URL&QRコード取得・埋め込みHTML取得）]メニューからお好きな方法をご選択ください。

１. URLとQRコード

[フォーム利用]＞[フォーム（URL&QRコード取得）]をクリックします。

フォームURL＆QRコード取得ページが表示となり、

登録ページURLが上段に、QRコードが下段に現れます。

①URL利用方法

登録ページURL（　https：//form.os7.biz/f/XXXXXXXX/　）が表示されます。
URLをクリックして、フルアドレスをコピーしてご利用ください。
URL横の[プレビュー]をクリックすると作成したフォームのプレビューが別タブで開きます。

②QRコード利用方法

2つの形式でQRコードを選択できます。
- ②-(1) 画像ファイル　（PDFやワード文章、ポスター等に掲載する場合。ウェブサイトやブログに貼り付ける場合）
- ②-(2) imgタグ　（ウェブサイトやブログに貼り付ける場合）
以下は上記画像のimgタグ<img src="https://qr.os7.biz/f/a49fb8dc.png" width="128″ height="128″>で埋め込んだQRコードです。

サイズ変更する場合には横幅・高さを変更してください。

横幅：width="128″
高さ：height="128″

数字の部分を変更するとサイズの変更ができます。
QRコードスキャナーやリーダーで必ず配布前にテストを行い、フォームが正しく表示されることをご確認ください。特にサイズ変更（縮小・拡大）を行った場合に読み込めることをお確かめください。

２. HTML埋め込みタグ

[フォーム利用]＞[フォーム（埋め込みHTML取得）]をクリックします。タグ取得(HTML表示)ページが表示となり、2つの埋め込み用HTMLコードが選べます。
1. 貼付用HTMLコード(デザインあり)　上段
  フォームのデザイン済みで、スマートフォン表示に対応しています。
2. 貼付用HTMLコード(デザインなし)　下段
  フォームにデザインがなく、スマートフォン表示に非対応です。
  HTMLコード（デザインなし）についての注意事項をお読みください。
使用用途に応じてHTMLコードを選択して、[クリップボードにコピーする]をクリックし、ウェブサイトやブログなどに貼り付けてご利用ください。
ウェブサイトやブログへフォームを埋め込んだ後は、かならずテスト投稿を行ってください。
コードの誤りがある場合にはフォームが正常に動作しません。
オレンジフォームで生成されたHTMLをそのまま使うのではなくご自身のサイトに合わせてカスタマイズを行った場合には、特にお気をつけください。

【※ご注意】埋め込んだフォームの確認ボタンが押せない・文字化けする場合、

WordPressなどのCMS（コンテンツマネージメントシステム）をご利用の場合、お使いのテンプレート、プラグインやコード自動整形機能によりタグが変更されることがあります。

確認ボタンが押せなかったり、何らかのタグの変更が発生した場合には、
再度、タグをコピーして、テキストモード編集を行い公開を行ってください。

一度でもビジュアルモードをクリックするとコードが自動整形機能によって変更され、確認ボタンが押せないなど、フォームが正常に機能しなくなります。

例：確認ボタンが押せない場合
コードが以下のように自動整形機能により変更されます。

【自動整形されたコード】
■デザインなし
<input type="button" value="　確　認　" />
■デザインあり
<input class="OF_submit_btn1″ type="button" value="　確　認　" />

onclick="OF_submit()"　の部分が消えてしまうために、確認ボタンが押せなくなります。

その為、以下の部分を埋め込み用タグからコピーして該当部分にペーストし、修正します。

■デザインなし
<input type="button" value="　確　認　" onclick="OF_submit()" />
■デザインあり
<input class="OF_submit_btn1″ type="button" value="　確　認　" onclick="OF_submit()" />

その後、テキストモードのまま公開を行い、ホームが正常に作動しているかご確認ください。

なお、タグに問題がなく、確認ボタンが押せない場合には、ウェブサイトの文字コードをご確認ください。

オレンジフォームは文字コード「UTF-８」で作成しています。
それ以外の文字コードの場合、内部で文字化けが発生し、確認ボタンが押せなくなる場合があります。

※HTMLコードには、その時点でのフォームの設定が反映されており、埋め込んだ後にオレンジフォームの設定を変更した場合でも、一度埋め込んだフォームには反映されません。修正がある場合は、コードをコピー/貼り付けし直していただきますようお願いいたします。

HTML埋め込みタグについてのよくある質問

ブログやホームページに貼り付けるフォームの幅を変更する

Powered byの表示の有無（※有料ビジネス/エンタープライズ版のみ）

フォーム下部に表示される「Powered by メールフォーム『オレンジフォーム』」のコピーライトと販売サイトへのリンクの有無は、オレンジフォームビジネス/エンタープライズ版をご契約頂いている場合のみ、選択して非表示にすることができます。フォーム作成時に生成されるURLリンク（https：//form.os7.biz/f/XXXXXXXX/）に表示・非表示が設定されます。HTML埋め込みタグにはこの設定は反映されませんのでご注意ください。

※無料版をご利用の場合には、広告費にて運営しており、コピーライトを削除なさるとご利用規約違反となりますので削除されないようお願いいたします。

設定方法

[フォーム設定]＞[基本設定（編集)]をクリックします。基本設定ページが表示されます。「Powered byの表示」メニューの[表示する]をクリックして、[更新]ボタンをクリックします。管理ページに自動的に戻り、「基本設定を更新しました。」となり設定が保存されます。
管理画面右側の「フォーム表示」をクリックし、プレビューで設定が反映されているかご確認ください。
プレビューをクリックすると別タブでフォームが開きます。
プレビューが表示されたら、フォーム下部の「Powered by メールフォーム『オレンジフォーム』」が消えていることをご確認ください。
HTML埋め込み用タグの場合には、サイトやブログにコードを埋め込む際に、下記の部分を削除してください。
【削除となるコード】
<div> Powered by <a href="http：//orange-cloud7.net/form/" target="_blank">メールフォーム『オレンジフォーム』</a> </div>