フォームブリッジのフォームをHTML出力したい方、お待たせです!

【2019/11/06 21:50追記】誠に恐れながら、フォームブリッジの仕様変更により、以前までのサンプルHTMLではフォームを表示できなくなりました。現在記事内にあるサンプルHTMLではフォームを表示できることを確認しております。

【2019/11/15 11:40追記】Apple製のブラウザ、Safariのデフォルト設定では、サードパーティCookieの送信を行わないようです(仕様非公開)。これが仕様であれば、iPhoneやMacユーザーが回答できないケースが想定されます。ご認識のうえ、こちらのコードはご利用くださいませ。

先週末は絶好のお花見日和でしたね!トッティです。

皆さん、花見しました?僕はしてません。今日、夜桜しようかな、と思ってます。

さて、話は変わりますが、今回はフォームブリッジをHTMLで出力したい!」これに応えていきましょう!

基本はフォームの公開URLか、iFrameコードでの出力

そう、フォームブリッジで生成されるwebフォームは、基本的にURL形式か、iframe形式でしか利用できなかったのです。

URLかiFrame用のコードが出力可能

ですが、これだと「自社のHPのテイストに合ったwebフォームにしたい!」といったご要望になかなか応えられなかったのですよね。お客様によっては、それがネックになったりしたわけです。

HTMLでも出力可能に

ですが、前回バージョンアップで、HTMLでの出力もできるようになりました!これは機能を実装したわけでなく、特定の記述に対応しただけなので、サポートの対象外ということだけ、ご理解いただきお試しください!

サンプルHTML

サンプルコードは下記です。是非コピーして、活用してください。

<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://form.kintoneapp.com/static/css/outside-form.css" rel="stylesheet" type="text/css" charset="UTF-8">
</head>
<body>
<div id="app"></div>
<div id="based-data" locale="ja" host="https://フォームのサブドメイン.form.kintoneapp.com" code="ここに各フォームのpathを入れます"></div>
<script src="https://form.kintoneapp.com/static/js/layout-asset.js" type="text/javascript" charset="UTF-8"></script>
<script src="https://form.kintoneapp.com/static/js/outside-form.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>

10行目のpathを入れる部分に気づいたでしょうか?ここに各フォームのpath情報を入力することで、目的のフォームを表示することができます。で、「pathってなんだ?」と思いますよね?

では次に、pathの入力方法をご紹介します。

各フォームのpath

各フォームのpathはフォームのURL内にあります。フォームブリッジのURLは下記のような構成です。

https://form.kintoneapp.com/public/form/show/ほげほげ/

上記のほげほげ部分がpathとなります。

/(スラッシュ)以降の値がpath

では、このpathをHTML内に入れてみましょう。

こんな感じになる

できましたね。テストとして、このファイルをブラウザで開いてみます。

うん、できた

あとは、自社のHPのテイストに合わせて、好きにカスタマイズしてみてください。

最後に

HTMLやjavaScript/CSSが分かる方には説明するまでも無いですが、HP内に設置しているjavaScriptやCSSによっては、フォームブリッジが期待通りの動き/見た目にならない場合もあります。ご注意ください。

また、繰り返しになりますが、今回のフォームブリッジHTML化はサポート対象外となります。ご理解のうえ、お試しください!

まだフォームブリッジを試してない!というかたはこちらから是非どうぞ!

それではまた。

トヨクモのkintone連携サービスは30日間無料でお試しが可能です。自動で課金が開始されることはございませんので、「やっぱり必要ないな」と感じた時も、特に解約等のご連絡は不要です。以下のボタンよりお気軽にお試しくださいませ。

最新情報をチェックしよう!