Read Article

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

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

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

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

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

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

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

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

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

HTMLでも出力可能に

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

サンプル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を使い倒したい!」そんなあなた、奇遇ですね、僕もです。非開発者としての高みを目指しつつ、その道程を共有致します。

今日も張り切って行きましょう。
URL :
TRACKBACK URL :

COMMENTS & TRACKBACKS

  • Comments ( 1 )
  • Trackbacks ( 0 )
  1. この方法で、form bridgeをHTMLに出力したとき、
    多言語化機能でボタンの名前を変えていますが、それが反映されません。

    どうしたらよいでしょうか?

LEAVE A REPLY

*
*
* (公開されません)

Return Top