【オレンジフォーム】「Q. ウェブサイトにHTML埋め込みしたら、フォームの表示や動作がおかしいです。」
暦では立春を過ぎましたが、
まだまだ寒い日が続きそうです。
インフルエンザには気をつけましょう。
こんにちは!
オレンジスピリッツ、サポートの杉浦です。
今回はオレンジフォームのHTML埋め込みで、
ウェブサイトでのフォームの表示や動作についてご説明します。
これからフォームをウェブサイトに埋め込む方、
フォームを埋め込んでいて表示や動作がおかしい・・・と思っている方、
ぜひご確認くださいね!
ホームページ、ブログ、LPなどの
ウェブサイトにオレンジフォームを埋め込んでみたら・・・
1.フォームの表示がおかしい(デザイン・フォームの幅など)
2.2つ以上のフォームを設置したら、1つ目のフォームしか動かない
3.設置後のフォームに登録をすると登録データが文字化けする
こんなことはありませんか?
サイト作成サービスをご利用している方で、ご質問の多いのがこの3つです。
Q. HTMLコードをサイトに埋め込むと表示がおかしくります。
Q. 2つ以上のフォームを設置すると動作しません。
という場合の対処方法をお答えしますね!
※技術的な対処方法がありますので、
サイトやフォームのCSS・HTMLをカスタマイズされる場合はご注意ください。
1.フォームの表示がおかしい(デザイン・フォームの幅など)
ウェブサイトのテンプレートのCSS(スタイルシート)によって、
表示がおかしくなってしまうことがあります。
対処方法はこちら!
・フォームデザインがテンプレートデザインを反映している
⇒フォームデザインを弊社のデザインにしたい場合、
iframe(インラインフレーム)をご利用ください。
●iframe(インラインフレーム)を使用したフォームの設置方法
https://support.orange-cloud7.net/form_no_display/
⇒また、CSS・HTMLの知識がある方は、
デザインなしのHTMLコードでカスタマイズを行なってください。
※カスタマイズによってはフォームが動作しないなど、
フォームに影響がありますのでご注意ください。
●HTMLコード(デザインなし)についての注意事項
https://support.orange-cloud7.net/of_no_design/
・フォームの幅が広くなっている
⇒幅を変更するHTMLタグ(widthタグ)を追加してください。
●ブログやホームページに貼り付けるオレンジフォームの幅を変更する
https://support.orange-cloud7.net/of-formwidth/
2.2つ以上のフォームを設置したら、1つ目のフォームしか動かない
2つ以上の同じフォーム、または違うフォームを設置場合、
1つ目以降のフォーム以外動かなかったり、
指定したデザインカラー反映できてないこともあります。
フォームのHTMLコードの関係上
同じページ内に2つ以上のフォームを設置できないため、
対処方法を確認して、ご自分に合った方法でご利用ください。
対処方法はこちら!
・ページ内リンク(同じフォームを同じページに2つ以上設置している場合)
・ページ外リンク(別々のフォームを同じページに2つ以上設置している場合)
・iframe(インラインフレーム)
この3つの対処方法がありますので、
詳しくは以下のサポートサイトをご確認ください。
●ウェブサイトの同じページに複数のフォームを設置したい
https://support.orange-cloud7.net/form_no_display/
3.設置後のフォームに登録をすると登録データが文字化けする
フォーム設置後に登録をすると文字化けしてしまうことがあります。
原因はフォームに埋め込んでいる文字コード(UTF-8)と
ウェブサイトのCSSに違う文字コードが設定されている場合です。
対策法はこちら!
・設置しているウェブサイトの文字コードを
フォームの文字コード(UTF-8)に変更してください。
●投稿結果が文字化けしてしまう場合の対処方法
https://support.orange-cloud7.net/form_no_display/
CSSやHTMLはウェブサイトを作成する時に必要な言語です。
私も始めてみよう!と思った時は
CSS?HTML?何に使うの??と分からなかったので、
色々調べて、自分でカスタマイズできるくらいには身につきました笑
もし、ウェブサイトを作成されていても
CSSやHTMLのカスタマイズが難しい時は
サポートの対象外で回答ができないこともあります。
その時は、CSSやHTMLが細かく記載されているサイトを
ご参考にすることをおすすめいたします!
●参考:1時間で作るホームページ WEBデザインの素
http://www.shoshinsha.com/hp/index.html
【編集後記】
最近販売されてかなり盛り上がってるゲームがありますね!
某動画サイトで多くのユーザーが生配信をしている・・・
【モンスターハンターワールド】
私もゲームが好きで、「モンスターハンター2G」からやってます。
一人でやると初期モンスターすら倒せなかったのですが、
「モンスターハンターフロンティア」というオンラインを始めて、
オンラインの友達と倒せたのを思い出します(^^♪
友達のおかげで一人でも倒せるようになって、
自信がついて、色んなモンスターに一人で挑むことがよくありました!
昔はゲームと言えば頭が悪くなると言われてましたが、
今はゲームでこそ学べることも多いと思います。
私がゲームから学んだのは、
始めは一人でできなくても他の人と一緒にやって、
自分に自信がついて、一人でやれるようになること!です(^^)v
今の私を変えてくれた1作品で、今でもモンハンは大好きです。
そんなゲーム好きの杉浦でした!!
記事一覧
【大好評!残席わずか】メルマガネタ出しの悩みを一瞬で解決!AI活用ワークショップ
「忙しくてメルマガのネタを考える時間がない」 「読者の興味を引くコンテンツが書けているのだろうか」 「ネタを考えるのが苦痛になってしまっている」 そんな悩みから解放され
2025年03月28日
こんにちは! オレンジスピリッツの野口です。 あなたは、セールスや営業に苦手意識はありませんか? もしも答えが「Yes」で、 もしもあなたが、セミナーや説明会で、スラ
2025年03月27日
【先着10名|無料】メルマガネタ出しの悩みを一瞬で解決!AI活用ワークショップ
こんにちは!オレンジメールの野口です。 いつもオレンジメールをご利用いただき、 誠にありがとうございます。 「メルマガのネタが尽きて困っている…」 「いつも同じような内容
2025年03月24日
こんにちは!オレンジスピリッツの高梨です。 メールや書類を作成するとき、 引用内容やフッターの連絡先情報などで、 「区切り線」が必要になることはないですか? シンプルな一
2025年03月21日
【OM100特別号】個別相談が大好評です:「こんなかんたんにネタが出せるなんて」【無料】
こんにちは! オレンジスピリッツの野口です。 ※このメールは、OM100ユーザーの中から特別な条件を満たした 1191名の方だけにお送りしています。 前回、前々回の
2025年03月21日
こんにちは! オレンジスピリッツの野口です。 あなたは、セールスや営業に苦手意識はありませんか? もしも答えが「Yes」で、 もしもあなたが、セミナーや説明会で、スラ
2025年03月20日
【無料相談会】「予約方法がわからない」「どうぜ何か売り込まれるんでしょ?」⇒その答え
こんにちは! オレンジスピリッツの野口です。 ※このメールは、OM100ユーザーの中から特別な条件を満たした 1191名の方だけにお送りしています。 いつもメールを
2025年03月17日
【OM100特別号】オレンジメール、活用しきれてますか?【無料】
こんにちは! 株式会社オレンジスピリッツの野口です。 私自身、会社経営をしながら2人の子供を育てるパパでもあります。 子育ては、初めての連続。 今では笑い話ですが、おむつの
2025年03月10日
【OM100特別号】売上アップにつながるステップメールのコツ【無料】
こんにちは! 株式会社オレンジスピリッツの野口です。 ※このメールは、OM100ユーザーの中から特別な条件を満たした 1191名の方だけにお送りしています。 メール
2025年03月04日
こんにちは。 株式会社オレンジスピリッツの野口です。 有料ユーザー様限定で、 超初心者向けミニワークショップが開催されます。 参加費は、無料です。 お時間も30分だけです
2025年02月21日
【明日開催】BtoB企業向けSEOウェビナー 最終ご案内【無料】
こんにちは。 オレンジスピリッツの甲斐です。 いよいよ明日、BtoB企業向けSEOウェビナーを開催します! 「サイト流入はあるのに、 ターゲット層のコンバージョンが少ない…
2025年02月17日
こんにちは! 株式会社オレンジスピリッツの野口です。 オレンジメール100円キャンペーンは、2月19日までです。 残り3日となりました。 実は、表(LP)には出ていな
2025年02月16日
こんにちは! 株式会社オレンジスピリッツの野口です。 「ステップメール事例集」が熱いです。 現在の事例集は、 ・BPOサービス会社 ・HRシステム開発会社 ・ITコ
2025年02月13日