弊社はKintone案件は知り合いの他社様をご紹介させていただいておりますが、メンテナンス案件としてたまにKintone系もお請けしております。
今回はKitoneでは有名なお問い合わせフォーム トヨクモ様製の「フォームブリッジ」をHTML出力していた場合、2021年10月12日以降の対応のメモです。

そもそもフォームブリッジのHTML出力とは

Kintoneで作成したお問い合わせフォームをWEBサイトに組み込みたいという要望が多いらしく、トヨクモ様ではiframeでの出力を行えるように設定しています。
しかし、普通にiframeで出力してしまうと、組み込もうとするWEBサイト側のCSSがクロスドメインで設定ができないというところでつまづきます。
つまり、WEBサイト側のCSSを適用できないため、お問い合わせフォームだけデザインがまったく違うということになります。

フォームブリッジ側を操作したことがないので、トヨクモ様のWEBサイトに書いてあることから推測すると、CSSの設定も行えるようになっている様子。

本来ならば、フォームブリッジ側でCSSを使用してWEBサイトのデザインに合わせて、それをiframeで組み込めば良いのですが、フォームブリッジ側の設定をクライアントが行うとcssまでは設定できないことがあります。
そういう場合にフォームブリッジのHTML出力を使用すると、クロスドメインにならないため、WEBサイト側のCSSを使用できるようになり、無理やりデザインを合わせるという作業が可能になります。

今回は他社が作成したWEBサイトのメンテナンスのみの作業だったため、このHTML出力を使用しデザイン合わせを行いました。

フォームブリッジの公開フォームURLの変更

2021年10月12日にトヨクモ様がフォームブリッジの公開フォームURLの変更を行いました。
iframeはリダイレクトが設定されていて、特に問題なくフォームが表示されていたようなのですが、HTML出力の方はリダイレクトがされず、突然お問い合わせフォームが表示されないという事態に。

フォームブリッジのHTML出力に関する元ネタ

フォームブリッジのフォームをHTML出力したい方、お待たせです！
公開フォームURLの変更に関する影響範囲について

修正方法

「フォームブリッジのフォームをHTML出力したい方、お待たせです！」にサンプルコードが掲載されています。出力部分だけを抜粋します。

元のコード

<div id=”based-data” locale=”ja” host=”https://form.kintoneapp.com” code=”ここに各フォームのpathを入れます”></div>

「ここに各フォームのpathを入れます」の部分も「フォームブリッジのフォームをHTML出力したい方、お待たせです！」に記載されていますので、ご参照ください。

新URLに対応するための説明は下記のとおりです。

・HTML出力を行い、外部サイトに埋め込んでいる場合
HTML出力を行っている場合、フォームを新URLに変更した場合は、”host” の部分を新URLに合わせて変更する必要があります。
変更しない場合、ページが表示されない場合がございますのでご注意ください。

また、合わせてHTML出力するWebページのドメインを追加する必要があります。
設定方法は外部サイトへのiframeの埋め込み方法の4番を確認してください。

出典：公開フォームURLの変更に関する影響範囲について

修正するコード

まずフォームブリッジ側のドメインの追加を行ってください。
追加はXXXXXXの部分だけです。publicなども必要ありません。

<div id=”based-data”>XXXXXX.form.kintoneapp.com” code=”ここに各フォームのpathを入れます”></div>

私が引っかかったのは、「https://XXXXXX.form.kintoneapp.com/」と書いてしまったこと。最後の「/」を書くと表示されません。ご注意を！