ブログ

MAをこれから勉強したい人からカミハヤユーザーまで、
役に立つ情報のご紹介です。

カミハヤMA
2022.07.29

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

本記事では、カミハヤMAでフォームテーマのカスタマイズ方法の一例を説明します。

 

目次
 
 1.はじめに
 2.フォームテーマのカスタマイズ方法
 3.最後に 

1.はじめに

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

2.フォームテーマのカスタマイズ方法

フォームテーマをカスタマイズするには、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に変更することでチェックボックスを2列表示に変更しました。
以上で修正は完了となります。

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

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

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


3.最後に

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

カミハヤの製品ラインナップ

複数製品を組み合わせてのご利用も可能です。詳細はお気軽にお問い合わせください。

カミハヤCMS

カミハヤCMS

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMA

カミハヤMA

直感的で使いやすい管理画面、ノーコード。技術者無しでも素早くキャンペーンを始められる、BtoB向けマーケティングオートメーションツールです。

もっと見る
カミハヤSEO

カミハヤSEO

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMAトライアルキャンペーン実施中! MAトライアルのお申込み
資料ダウンロード
資料ダウンロード
お問い合わせ
お問い合わせ
よくあるご質問
よくあるご質問