ブログ

１．はじめに

カミハヤMAでフォームを作成している際にチェックボックスの縦並び表示を横２列表示にしたい場合、残念ながらシステム管理者のフォーム編集機能で設定変更できません。では、どのようにすれば設定変更できるのかについて説明します。

２．フォームテーマのカスタマイズ方法

フォームテーマをカスタマイズするには、HTML・CSSに関する理解が多少必要となってまいります。
今回は、フォームテーマのCSS設定を変更することにより縦並び表示のチェックボックスを横2列表示に変更する一例をご紹介します。

①変更したい対象のフォームをブラウザの開発者ツールで対象箇所（今回の例では、チェックボックス）の要素を確認します。今回の例では、どうやらmauticform-checkboxgrp-rowのクラス部分を、display:inline-blockとし、widthで幅調整をすればチェックボックスの表示を2列にできそうであることがわかります。

開発者ツールでは、擬似的に変更を反映させた場合どのようになるのか確認できるのでとても便利です。

【変更前のソース（例）】

②次に利用されてるフォームテーマをzip形式でダウンロードします。フォームテーマのダウンロードは、テーマ一覧画面より対象のフォームテーマを選択すればダウンロードできます。

③ダウンロードしたZipファイルを解凍した後、VisualStudioCodeなどのIDEでstyle.html.twigを修正します（IDEでなくともエディタで対象ファイルを開いて修正していただく方法でも問題ありません）。今回の例では、親要素の.mauticform_wrapperのmas-widthが860pxであることが確認できたので、.mauticform-checkboxgrp-rowのdisplayをinline-block、widthを410pxに変更することでチェックボックスを２列表示に変更しました。
以上で修正は完了となります。

最後に今回作成したフォームテーマを再利用できるように新しいフォームテーマとしてカミハヤMAにzip形式でアップロードします。アップロードはダウンロードしたテーマ一覧画面からアップロードできます。アップロードする前にconfig.jsonの内容を今回新しいフォームと分かるようにnameの値を修正してください。アップロードする前に必ずファイル一式をzipファイル化してください。

無事に変更が反映されたかどうかをフォームプレビューで確認をします。

今回のようにフォームテーマを修正することにより、今後も同様のニーズ（チェックボックス項目を2列表示させたいニーズ）があった場合、このフォームテーマを利用すれば今回のようなフォームテーマを修正することなくフォーム作成していただくことが可能になります。これでオリジナルフォームテーマが１つ完成したことになります。

３．最後に

いかがでしたでしょうか。
今回は、簡単なフォームテーマのカスタマイズ方法をご紹介しましたが、どのようにオリジナルフォームテーマを作成していくのかご理解いただけたのではないでしょうか。送信ボタンやフォーム幅の変更などの修正も同様の方法となります。自社オリジナルのフォームテーマを利用する一つのきっかけとして今後のご参考にしていただければと思います。