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

2019年10月17日

タグ取得方法

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

  1. URL
  2. QRコード
  3. HTML埋め込みタグ

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

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

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

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

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

 

フォーム配布用リンク/QRコード/埋め込み用HTMLの取得方法

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

 

 

1.URLとQRコード

1.[フォーム利用]>[フォーム(URL&QRコード取得)]をクリックします。
フォームURL&QRコード取得ページが表示となり、

配布用URLが上段に、QRコード下段に現れます。

URL利用方法

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

QRコード利用方法

1.2つの形式でQRコードを選択できます。

  1. 画像ファイル (PDFやワード文章、ポスター等に掲載する場合。ウェブサイトやブログに貼り付ける場合)
  2. imgタグ (ウェブサイトやブログに貼り付ける場合)

以下は上記画像のimgタグ<img src="https://qr.os7.biz/f/1d0cf582.png" width="128″ height="128″>で埋め込んだQRコードです。

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

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

数字の部分を変更するとサイズの変更ができます。

 

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

 

2.HTML埋め込みタグ

1. [フォーム利用]>[フォーム(埋め込みHTML取得)]をクリックします。タグ取得(HTML表示)ページが表示となり、2つの埋め込み用HTMLコードが選べます。

  1. 貼付用HTMLコード(デザインあり) 上段
    フォームのデザイン済みで、スマートフォン表示に対応しています。
  2. 貼付用HTMLコード(デザインなし) 下段
    フォームにデザインがなく、スマートフォン表示に非対応です。
    HTMLコード(デザインなし)についての注意事項をお読みください。

使用用途に応じてHTMLコードを選択し、クルップボードにコピーをクリックし、ウェブサイトやブログなどに貼り付けてご利用ください。

 

タグ取得(HTML表示)

2. ウェブサイトやブログへフォームを埋め込んだ後は、かならずテスト投稿を行ってください。
コードの誤りがある場合にはフォームが正常に動作しません。
オレンジフォームで生成された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-8」で作成しています。
それ以外の文字コードの場合、内部で文字化けが発生し、確認ボタンが押せなくなる場合があります。

 

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

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

HTMLタグ埋め込みで、フォームが正しく表示されないて

登録・解除フォームのURLやHTMLを確認したい

 

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

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

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

 

設定方法

1. [フォーム設定]>[基本設定(編集)]をクリックします。基本設定ページが表示となり、Powered byの表示メニューの[削除する]にチェックマークをつけて[更新]ボタンをクリックします。管理ページに自動的に戻り、「基本設定を更新しました。」となり設定が保存されました。

[フォーム設定]>[基本設定]>[Powered byの表示]

2. 管理画面右側の「フォーム表示」をクリックし、プレビューで設定が反映されているかご確認ください。
プレビューをクリックすると別タブでフォームが開きます。
でフォーム下部の「Powered by メールフォーム 『オレンジフォーム』」が消えていることをご確認ください。

3.HTML埋め込み用タグの場合には、サイトやブログにコードを埋め込む際に、下記の部分を削除してください。

【削除となるコード】
<div> Powered by <a href="http://form.orange-cloud7.net/" target="_blank">メールフォーム 『オレンジフォーム』</a> </div>

 

 

オレンジフォーム埋め込み代行サービス(有料)

オレンジフォームは自社サイトのデザインに合わせて埋め込むことが可能です。
HTMLやCSSといった技術が必要となるため、弊社で埋め込み代行サービスをご提供しております。

ご自身でフォームのカスタマイズが難しい場合など、お気軽にご相談ください。

https://www.orange-cloud7.net/support/it-support/

 

まとめ

オレンジフォームでは作成したフォームを簡単に配布できるようになっています。
配布方法は3つあり、URL、QRコード、埋め込み用HTMLがあり、
初心者のかたにも、上級者にも対応いたしております。是非、ご活用ください!

 


記事はいかがだったでしょうか?
ご意見・ご感想をお聞かせください




Powered by このフォームは『オレンジフォーム』で作成しています