Read Article

フォームクリエイターの入力確認画面を自作HTMLで作ろう

フォームクリエイターの入力確認画面を自作HTMLで作ろう

【追記】
「フォームクリエイター」は、2020年6月末日にサービスを終了させていただくため、新規お申込みは受け付けておりません。kintoneに接続するwebフォームであれば、後継版サービスのフォームブリッジを是非ご検討ください! こちらでご紹介している、フォームの”入力確認画面”の表示に関しましては、フォームブリッジでは標準機能の”確認画面あり”にチェックを入れるだけで、”入力確認画面”の表示が可能です。フォームブリッジは、こちらから30日間の無償トライアルも可能ですよ~!


こんにちは。武井です。

今回は、弊社のkintone連携アプリ「フォームクリエイター」について、
入力確認画面を自作HTMLで表示できるようにするサンプルをご用意しました。

前回のフォームクリエイターカスタマイズ記事はこちら→武井がフォームクリエイターを半日いじるとここまで良くなる

今回やること

  • フォームクリエイターに情報入力
  • 「確認する」ボタンを押下
  • 自動で新規タブでkintoneに遷移
  • kintoneのカスタマイズビューを確認画面として使用する
  • カスタマイズビュー内の「閉じる」ボタンで確認画面を閉じる
  • 「送信する」ボタンを押すと、情報の送信が完了

自社サーバーに自前のHTMLを確認画面として置きたい場合、
上記の「kintone(カスタマイズビュー)」の部分を「自社サーバーHTML」に置き換えて考えてもらえればOKです。

前準備

以下のように、フォームクリエイターの「フォーム設定」にて、
「確認画面を表示しない」の設定にしてください。

kakuningamen

今回、例として使用するのは、以前の記事でも使用した下記のフォームです。

form

JavaScriptカスタマイズ(フォームクリエイター編)

フォームクリエイターに以下のJavaScriptカスタマイズファイルをアップします。
処理内容は丁寧にコメントしておりますので、ご覧ください。

特に、文字列、ラジオボタン、チェックボックスで処理が少々異なる点などには注意です。
「#questions_******」の部分は、それぞれの環境のフィールドによって異なりますので、
要素を解析した上で、要書き換えです。
(要素の解析方法等についても以前の記事をご覧ください。)

ここまでで、「確認する」ボタンを押下することによって、
「window.open(“https://*****.cybozu.com/k/75/?” + url);」で指定したURLに新規タブで遷移することができます。

JavaScript&CSSカスタマイズ(kintone編)

次に遷移先のkintoneをカスタマイズしていきます。

まず以下のHTMLを持つカスタマイズビュー「確認画面」を作成してください。

次に、下記のJavaScriptをアップします。

さらに下記のCSSで見た目を豪華にします。

結果

フォームクリエイターに情報を入力します。

201609121600

すると、このようになります。

では、「確認する」ボタンを押します。

新規タブで下記画面が表示されます。

201609121602

kintoneがフォームクリエイターの確認画面になりました。

あとは、「閉じる」ボタンを押して、
フォームクリエイターの「送信する」ボタンを押せば、
データも送信されます。

実際のところ、kintoneを確認画面にする人はいないと思いますが、
自前のHTMLを使う場合もほとんど似たような手順なので問題ありません。

【免責事項】
上記プログラムは動作を保証するものではありません。
また、使用によるいかなる損失・損害も責を負いません。
個別の案件に対するサポートは行っておりません。

この記事を書いた人

武井 琢治
武井 琢治
サイボウズスタートアップス株式会社の武井と申します。
kintoneカスタマイズを行う上での勘所を敷衍して発信していきたいと考えております。
kintoneは中国語対応しているため、中国語でも発信していきたいと思います。
大家好,我叫QB,请多关照。我喜欢吃肠粉。

趣味は漢字です。
所持する資格は、日本漢字能力検定一級です。
URL :
TRACKBACK URL :

LEAVE A REPLY

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

Return Top