Read Article

武井がフォームクリエイターを半日いじるとここまで良くなる

武井がフォームクリエイターを半日いじるとここまで良くなる

こんにちは!ヒトカラこと一人カラオケという崇高な趣味を持つ武井です!!
最長ヒトカラ記録は13時間です!
以後、よろしくお願いいたします!!

ここ2年ほどで著しく高音の音域が広がっているのを実感しています!!

さて、ヒトカラと大体同じくらい崇高なプラットフォームであるkintone。

サイボウズスタートアップスでは、このkintoneをより使いやすくするためのツールを鋭意作成しております!

――その最右翼が――今――武井になろうとしている――

その中の一つで、アンケート作成等の用途で大活躍しているフォームクリエイター。

基本的な用途は余人に譲るとして、
早速武井がフォームクリエイターで3時間ほど遊んでみた結果をご報告いたします。

主に弊社に寄せられているお客様からのご要望の中で、
営業の方から「それはできないんですよー」なご回答に終始しているやつを中心に打開していきます。

1. 郵便番号を入力したら自動的に住所を挿入

やはりフォームクリエイターの主用途はアンケートのようです。

すると、必ず必要になって来るのが住所入力
住所入力と言えば、あると嬉しい「郵便番号による住所自動入力」

しかし、フォームクリエイターの中にその機能は残念ながら今はないので、
JavaScriptちゃんでちょちょいとできるようにしちゃいましょうね!

まず、例として以下のようなアンケートフォームを作成します。

anq1

ごくありきたりなアンケートですね。

それでは、赤枠で囲った郵便番号を入力したら、

自動的に住所が入力されるようにしたいと思います!

まず最初にjQueryを読み込んでいます。
(これは後の章段の説明では省きます)

また、フォームクリエイターでDOMをいじる場合、
画面がロードされた後でないとうまく動作しないようなので、$(window).loadしています。
(これも後の章段では省きます)

$(“#questions_郵便番号ID”)は郵便番号の要素のIDを置換し、
$(“#questions_住所ID”)は住所の要素IDを置換してください。

要素IDの取得方法やもろもろの設定方法等はこちらの記事を参考ください。

基本的に、ハイフンの有無にかかわらず7桁が入力された場合、
すなわち「1234567」か、「123-4567」の場合にのみ住所を挿入するようにしています。

また、該当する住所が見つからないおかしな郵便番号が入れられた場合は、
住所欄が空欄になるようになっています。

実行結果のサンプルを見てみましょう。

anq2

自動的に住所が入ったようですね!!

たまに「郵便番号から住所を検索」みたいなしゃらくさいボタンがありますが、
(しかも往々にして、画面がリダイレクトされる)
圧倒的に郵便番号入力後、自動挿入が楽チンですよねー!!

2. パスワードを隠す

パスワードを入力させたい場合、ソーシャルエンジニアリング対策として、
画面にパスワードを表示させたくない場合があると思いますので、
その手法を紹介します。

なんとこれだけでした。

anq3

いい感じに隠れてくれましたね!

ついでに以下も加えてみました。

パスワードフォームの最大文字数を4桁に設定しています。

3. 入力フォームを横並びにする

これは大変多くのご要望をいただいております!

複雑なレイアウトにかかわるところなので、完璧なものは難しいのですが、
以下のような感じであれば可能でした。

anq4

縦幅が短く、とてもスマートになりましたね!!!

JavaScriptとCSSを駆使して実現しています。

まずCSSですが、inline-blockで各要素を揃えています。

次にJavaScriptですが、
郵便番号の前に改行を挿入し、パスワードと住所のラベルを整形しています。

4. ラジオボタンでフォームの表示/非表示を切り替え

これもよくあるご要望のようです。
kintoneでもよくあります。

今回は、「持ち家ですか?」の設問に対して、
「持ち城」を選択した場合に「城名」を入力するフォームを出現させてみましょう!

まず、CSSで城名をデフォルトで非表示にしておきます。

ラジオボタンが変わるタイミングのイベントを設定し、
選択されたのが”ラジオボタンvalue”である場合は、城名を表示しています。

この”ラジオボタンvalue”は、要素IDと同じように、
ラジオボタンに設定されているvalueを解析してください。
この場合で言うと、「持ち城」の選択肢のvalueとなります。

anq5

城名が出ました!

もちろん「持ち家」を選択し直した場合には、城名は引っ込みますよ。

5. フォームにロゴ画像を出す

大変大変多くいただいているご要望です!

基本、弊社では「IframeによるHTMLで対応してくれ」という返答を差し上げているようです。

しかし、Iframeは使いたくないんや!というアナタにオススメの方法です!!

なんと一行でイケてしまいます。

‘アイコンURL’にはアイコンのURLを指定してください。
style=’max-width:200px; float:left;はお好みです。

max-widthは最大の横幅を200pxに、
float:leftはロゴをアンケートの左側に出します。
rightなら右側、特に指定しなければ左上の辺りに表示されます。

anq6

いい感じにロゴが表示されました!!

終わりに

いかがでしたでしょうか。

皆さんも「フォームクリエイター 武井plus」をぜひ活用してみてくださいね!!

ご注意:

※フォームクリエイターでのJavaScript/CSSカスタマイズはプレミアムコース専用となっております。
※上記プログラムの使用によるいかなる損失・損害も、責を負いません。
※個別のカスタマイズ案件には対応いたしかねます。
※「フォームクリエイター 武井plus」はまだ販売していません。

【更新】武井がフォームクリエイターのカスタマイズを再度試しました→フォームクリエイターの入力確認画面を自作HTMLで作ろう

この記事を書いた人

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

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

COMMENTS & TRACKBACKS

  • Comments ( 3 )
  • Trackbacks ( 0 )
  1. フォームクリエイターにてアンケートの作成にあたり、非常に参考になりました。

    1点、フォームを横並びにする際にですが、
    フィールド名の下に入力欄を配置する設定が解除され、横配置になってしまいます。
    これを回避する手立てはないのでしょうか?

    • 難しいですねぇ。
      可能か不可能かで言えば、可能だと思います。

      こちらですが、敢えて横配置にしているんですね。
      今回はお手軽にできる改良という前提でございましたので。

      もし、やるとすると、
      テーブル化するか、横並びにしたい要素群を更にそれぞれdivで囲うような処理が必要になりそうですね。

  2. 現在、アンケートフォームを作成しているのですが、

    以下のソースを、ラジオボタンのチェックではなく、
    チェックボックスのチェック有り無しで表示/非表示を
    切り替えることはできますでしょうか。

    #question-城名ID-dt,
    #question-城名ID-dd{
    display:none;
    }

    $(‘input[name=”questions[ラジオボタンID]”]:radio’).change(function () {
    if ($(this).val() === “ラジオボタンvalue”) {
    $(“#question-城名ID-dt”).css(“display”, “block”);
    $(“#question-城名ID-dd”).css(“display”, “block”);
    } else {
    $(“#question-城名ID-dt”).css(“display”, “none”);
    $(“#question-城名ID-dd”).css(“display”, “none”);
    }
    });

LEAVE A REPLY

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

Return Top