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

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

  • ホームページやLP、ブログなどでフォームが表示されない(オレンジメールの登録フォームも含む)
  • フォームを2つ表示させたいが表示がされない、表示されても1つのフォームしか反映されていない
  • 登録内容が文字化けしてしまう(HTMLの知識がある場合、CSSなどをご確認ください。)

また、登録データが文字化けする場合には文字コードをUTF-8にご変更頂く必要がございます。弊社のフォームはUTF-8となり、ウェブサイトがShift-JIS等になっていると正常にフォームが動作できません。

以下に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. 投稿結果が文字化けしてしまう場合の対処方法

オレンジメールとオレンジフォームで作成されるフォームの文字コードはUTF-8になります。フォームを設置したいウェブサイトの文字コードとフォームの文字コードがあっていないと、投稿内容が文字化けを起こしてしまいます。

設置されているウェブサイトの文字コードを確認してください。文字コードがShift-JISなどになっている場合には、コードを以下のように書き換えてください。charsetをUTF-8と指定してください。

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

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

また、ウェブサイトの文字コードをそのままにフォームのご利用をご希望の場合には、1のiframeタグで埋め込むか、フォームURLをリンクして、リンク先からフォームへ投稿するようにしてください。

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

 

まとめ

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