埋め込み用HTMLコードを使用して、フォームをウェブサイトに設置したら、表示が変だったり、フォームに登録したデータが文字化けすることがあります。以下のお問い合わせ例のように、埋め込み用コードのコピペ間違いや独自テンプレートのCSSに影響を受けてしまい、カスタマイズがうまくできない場合にはiframeタグを使用してフォームをウェブサイトに埋め込みます。

【よくあるお問い合わせ内容】

  • ホームページやLP、ブログなどでフォームが表示されない(オレンジメールの登録フォームも含む)
  • フォームを2つ表示させたいが表示がされない、表示されても1つのフォームしか反映されていない
  • 登録内容が文字化けを起こしている
  • 確認ボタンを押しても動作しない

以下に2つの対処法を紹介いたします。

 

1.iframeを使用したフォームの設置方法

以下のコードをコピーしてウェブサイトやウィジェットでなどでご利用ください。

【コードの内容】

<iframe src=”フォームURL” style=”height: ○○px; max-width: ○○px; width: 100%; border: 0;”></iframe>

“フォームURL” 設置したいフォームのURLに書き換えてください。フォームURLの確認方法はこちらをご覧ください。

height:○○px ページの高さです。項目が多いと高さがかわってきますので、実際の表示を確認しながら調整を行ってください。

max-width:○○px ページ横幅の最大値です。 

width:○○% ページの横幅です。

コードを設置後、表示を確認しながら丸の部分の数字を変更して、お好きな幅と高さにご調整ください。ここではwidthを100%指定にしており、横幅〇〇pxで表示をさせたいけれども、〇〇pxより小さい画面の場合には、画面からはみ出さないような設定になっています。

【WordPressをご利用の場合】

WordPressの標準設定では、iframeが利用できないようになっています。 iframeプラグインをインストールすることで、iframeを使用することができるようになります。
※上級者の方は、function.phpを書き換えるという方法もあります。詳しくは以下を参考になさってください。

参考サイト:http://lifeworker9.moo.jp/archives/862
PHPを書き換える方法は下記をご参考ください。
参考サイト:http://techmemo.biz/wordpress/iframe-disable-prevent/
また、サーバーなしでご利用のお客様は有料プランにする必要があります。

その他のサイトに関しましては、反映されない、 iframeタグが使用できない場合があるため、現在調査中です。

●ご注意
オレンジフォーム無料版は、広告費により運営されているので、無料でお使いいただけます。そのため、メルマガ、登録完了ページなど、広告を非表示にすることができません。オレンジフォーム・ビジネス版(有料版)をご契約いただくことで無料でお使いいただけます。

 

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()” />

その後、テキストモードのまま公開を行い、フォームが正常に作動することをご確認ください。

 

3. 投稿結果が文字化けしてしまう場合の対処方法

オレンジメールとオレンジフォームの埋め込み用HTMLは、自動的に設置されているウェブサイトの文字コードを判別し、投稿結果が文字化けしないような仕組みになっています。

しかしながら、それでも投稿結果が文字化けする場合があり、その場合には、コードを以下のように書き換えてください。charsetをUTF-8と指定してください。

オレンジフォームとオレンジメールは文字コードはすべてUTF−8となります。

【修正前】<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS“>

【修正後】<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8“>

 

また、ウェブサイトの文字コードを変更出来ない場合には、2のiframeタグで埋め込むか、フォームURLをリンクして、リンク先からフォームへ投稿していただく形にしてください。

※一般事項のため、HTMLについてはサポート対象外となりますので、あらかじめご了承ください。

 

まとめ

フォームを作成後、HTMLタグを使用してウェブサイトに埋め込む場合には、お客様のウェブサイトの環境によって、正常に動作を行わない場合があります。そのときには、  iframeタグ、お使いのテンプレートCSSの修正などを行ってください。また文字化けを起こしてしまう場合には文字コードの不一致がおこっていますので、HTMLタグのcharsetをUTF-8に変更頂くことで修正することができます。