Kairos3 マーケティングオートメーション

カイロス3設定方法 – 番外編 1ページに2つのインバウンドフォーム!?

Mr.S
Written by Mr.S

ドーモ。MA担当のMr.Sです。

先日、あるwordpressサイトの改修を行っていた時に起こった出来事です。

そのサイトでは、カイロス3のインバウンドフォームを複数使い分けしていたんですね。

カイロス3のフォームはこういった使い方もできます。それぞれで別のタグを自動付与しておけば、あとでソートするときも簡単ですね。

これまで、そのサイトでは2段階方式を取っていました。

具体的には、通常会員登録が終わるとそこで完了するか次ページのプレミアム会員登録に進むかを選べるような仕組みです。

キャプチャ

それを見ていて、ふと「別に2枚にページ分けること無いんじゃないかな?」と思いました。

wordpressだと、プラグインで簡単にタブなど実装できますよね。

長々とコードを書いて調整する必要もないので、いっそ1枚のページに格納しちゃえばいいのでは?

プラグインを入れたあと、タブ内に埋め込みコードを配置し、インバウンドフォーム2つを同じページにおいてみて、さてプレビューと思ってみてみると・・・・

なぞの現象が発生しました

sample

あれ?

2枚めが出ていませんね。高さが足りてない?

全く表示されないならともかく、これは一体・・・

順番を変えても、後ろのタブがどうしても表示されません。

タブのせいなのかと思い、タブを撤廃して縦に2つ並べておいてみても・・・

sample_vertical

やはり後ろが表示されない。

■困ったときはテクニカルサポートへ

小首をかしげながら、サポート窓口に相談

「すいませーんネスタのSですけどもー」

「あっ(察し)なにかトラブルですか?」

普段どれだけトラブル相談してるんだって話ですね。

技術担当の方に症状をお伝えし、こちらで試したことなどをお伝えしたところ、2時間くらいで以下の内容のメールが返ってきました。

_________________________________

-お世話になっております。
カイロスマーケティングの✕✕でございます。

先程はお忙しい中、お電話にてご対応いただき誠にありがとうございました。

当方でも確認したところ、display:noneを活用したタブを使っている場合等に、隠れている方のiframeの高さをうまく取得できないことがあるようです。

応急処置的な対応となりますが、埋め込みフォーム貼り付け時に高さを明示的に指定していただくと両方表示されると思いますので、お試しいただければと思います。

いずれに致しましても、本件は、Kairos3の機能改修の参考とさせていただきます。

________________________________

とのこと。ほんと即応していただけるのは助かります。

つまりheight:”auto”に設定されている箇所を、cssで個別に高さを設定してあげれば大丈夫とのことでした。

ちなみに2つのフォームに共通のIDが振られていますので、両方一緒に高さを設定しました。
wordpress内のCSSをちょちょっと書き換えて、無事タブ内に2つのフォームを入れることができました。

いかがでしたか?

なにが役に立つかわかりませんので、この情報を使う機会がありましたらぜひ役立ててください。