ブログ

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

カミハヤMA
2022.08.18

フォームボタンを大きく中央に配置する方法

本記事では、フォームの送信ボタンを標準サイズよりも大きくフォーム下、中央に配置する方法について説明します。

 

目次
 
 1.はじめに
 2.フォームボタンを大きく中央に配置する方法
 3.最後に 

1.はじめに

カミハヤMAのフォームには、いくつかテーマがあらかじめ用意されていますが、いずれもフォームボタンが小さくて左寄せとなっています。これを配置場所を中央揃え、ボタンサイズを少し大きく色も変更する方法についてご説明します。

2.フォームボタンを大きく中央に配置する方法

残念ながらシステム管理者にあるフォーム修正画面から今回の目的を達成することはできません。
今回の目的を達成するためには、オリジナルフォームのテーマを作成する必要があります。
といってもゼロから作成する必要はなく、例えばベースとなるフォームテーマをもとに次のように修正を加えていき、最後にオリジナルテーマとしてテーマ登録をする流れとなります。

①修正元とするフォームテーマをダウンロードします。(例:Neopolitan V2など)
②ダウンロードしたテーマはzip形式でダウンロードされますので、解凍します。
③解凍したフォルダの中にあるMauticFormBundle/Bulderの下にあるstyle.html.twigをエディタで開きます。
④ボタンの色を変更するために次の変更をします。
.mauticform-button-wrapper .mauticform-button.btn-default{background-color:の値を#ffc9d2;に変更します。(今回の例では、淡いピンク)
.mauticform-button-wrapper .mauticform-button.btn-default{border-color:の値を同じく#ffc9d2;に変更します。(今回の例では、淡いピンク)
⑤ボタンを中央位置へ変更するために次の変更をします。
.mauticform-button {display:inlineblock}をblockに変更します。そしてmargin:0 auto;を追加します。
⑥ボタンのフォントサイズを変更するために次の変更をします。
.mauticform-button-wrapper .mauticform-button{font-size:の値を好みのフォントサイズに変更します。
⑦ボタンのpaddingを変更するために次の変更をします。
.mauticform-button-wrapper .mauticform-button{padding:の上下の値を好みのサイズに変更します。

【style.html.twigの修正例】
 

⑧config.jsonにテーマ名、Authorの変更などを行いファイル一式をzip形式で圧縮します。
⑨作成したzipファイルをカミハヤMAのテーマとしてファイルアップロードします。

修正は以上となります。

【変更前のフォームLP/変更後のフォームLP】
 

3.最後に

いかがでしたでしょうか。システム管理者画面からは変更できませんが、フォームテーマの内容を変更することによりオリジナルデザインのボタンをフォームに配置することができることをご理解いただけたと思います。
フォームボタンは、コンバージョンにも影響を与える要因になると思いますので、今回の記事を参考に工夫なされてみてはいかがでしょうか。
 

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

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

カミハヤCMS

カミハヤCMS

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

もっと見る
カミハヤMA

カミハヤMA

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

もっと見る
カミハヤSEO

カミハヤSEO

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

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