🅰️

コラボフロー通常フォームの入力欄をいい感じなサイズに変更する

太郎

2023/12/09に公開

コラボフロー

tech

この記事はコラボフロー Advent Calendar 2023 の　９日目の記事です
コラボフローを知らない方はこちらを参考にしてみてください。

コラボフローのフォームって入力欄って小さくない？

コラボフローのフォームは入力欄周りのサイズ感が最近のフォームに比べると小さめ目です😢
コラボフローでは「通常フォーム」と「Excelフォーム」の２種類からフォームを作成することができますが、
「Excelフォーム」ではExcelで作った申請書をそのままフォームにすることができるのである程度のクオリティをコントロールすることが可能ですが、「通常フォーム」では決められたルールと入力欄のサイズになってしまうのでなんだか味気ないフォームになってしまう事が多いです😭

とりあえずやれるだけやってみる

とりあえずフォームのカスタマイズ機能を活用しながら頑張ります。

コラボフローで通常フォームを作ってみる

まずは通常フォームで今回は「テキスト（一行）パーツ」と「テキストエリアパーツ」を対象にしてどんな感じになるかを確認

やっぱり小さい😭
文字サイズと入力欄の高さが気になる。。。

そもそも使いやすい入力欄とは？

一旦Figmaで簡単に図にしてみる

すごーくざっくりですが入力欄のサイズ感は、
heightが40px以上
文字サイズが16px以上
をストレスなく使えそうなサイズ感として定義して実装して行きます。

カスタマイズ機能を使う

大きめの入力欄を作るためのCSSを作りつつ、入力要素に対してjavascriptでclassを付与していきます

使用するCSS

#formbase .Base{
    border: 1px solid #CCC;
    border-radius: 4px;
    background: #FFF;
    font-size: 16px!important;
    margin:0 8px 0 0;
    padding:0 8px;
  }
#formbase .Input {
    height: 40px;
  }
#formbase .Textarea {
    padding:4px 8px;
  }

フォームパーツにCSSを追加するjavascript

(function () {
    "use strict";
    collaboflow.events.on('request.input.show', function () {
        // テキストパーツ用
        const textInputElm = document.querySelectorAll(`div[id="formbase"] input[type='text']`);
        textInputElm.forEach(function (element) {
            element.classList.add("Base", "Input");
        });
        // テキストエリアパーツ用
        const textAreaElm = document.querySelectorAll(`div[id="formbase"] textarea`);
        textAreaElm.forEach(function (element) {
            element.classList.add("Base", "Textarea");
        });
    });
})();