フォームボタンを大きく中央に配置する方法
本記事では、フォームの送信ボタンを標準サイズよりも大きくフォーム下、中央に配置する方法について説明します。
目次
１．はじめに
２．フォームボタンを大きく中央に配置する方法
３．最後に
１．はじめに
カミハヤMAのフォームには、いくつかテーマがあらかじめ用意されていますが、いずれもフォームボタンが小さくて左寄せとなっています。これを配置場所を中央揃え、ボタンサイズを少し大きく色も変更する方法についてご説明します。
２．フォームボタンを大きく中央に配置する方法
残念ながらシステム管理者にあるフォーム修正画面から今回の目的を達成することはできません。
今回の目的を達成するためには、オリジナルフォームのテーマを作成する必要があります。
といってもゼロから作成する必要はなく、例えばベースとなるフォームテーマをもとに次のように修正を加えていき、最後にオリジナルテーマとしてテーマ登録をする流れとなります。
①修正元とするフォームテーマをダウンロードします。（例：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】
３．最後に
いかがでしたでしょうか。システム管理者画面からは変更できませんが、フォームテーマの内容を変更することによりオリジナルデザインのボタンをフォームに配置することができることをご理解いただけたと思います。
フォームボタンは、コンバージョンにも影響を与える要因になると思いますので、今回の記事を参考に工夫なされてみてはいかがでしょうか。
