Snow Monkey Formsの送信ボタンの色と形をcssでカスタマイズする

Yum-designのお問い合わせフォームでは、Snow Monkey FormsというWordPressのプラグインを使用しています（2024年8月現在）。

Snow Monkey Formsには確認画面・完了画面も、入力（１）ー確認（２）ー完了（３）のステップバーも付いていて、短時間でWordPressにフォームを導入したい場合、使い勝手が良いです。

が、標準でついている送信ボタンの見た目があまり目立たないので、cssを追加して変更してみました。

カスタマイズ後の見た目

変更後のデザインはこちらです。

cssの追加場所

WordPressテーマ「SWELL」では、カスタマイザーの中にcssを追加できる場所があります。

css追加のポイント

ブラウザの検証ツールでボタンのクラス名を確認します。

確認すると、送信ボタンに設定されているクラス名は「.smf-action .smf-button-control__control」ということがわかります。入力画面内の「確認画面へ」ボタンと確認画面の「戻る」ボタン・「送信する」ボタンの全てに同じクラス名がついています。

そのためクラス名だけで指定すると、それらのボタンが全て同じ色・デザインになってしまいます。「戻る」ボタンはあまり目立たせたくないため、デザインを変えたいところです。

【対応策】クラス名に属性を追加する

それぞれのボタンには属性（data-action）がついているので、属性と共にcssを指定します。

ボタンごとの属性はこちらです。

• 入力画面「確認画面へ」ボタンは[data-action=”confirm”]
• 確認画面「戻る」ボタンは[data-action=”back”]
• 確認画面「送信する」ボタンは[data-action=”complete”]

「確認画面へ」と「送信する」ボタンのcss

「確認画面へ」と「送信する」ボタンは同じデザインにしたいため、下記のように指定しました。
※色や形・paddingなど、WEBサイトのデザインに合わせてお好みのものを指定してください。

.smf-action .smf-button-control__control[data-action="confirm"],
.smf-action .smf-button-control__control[data-action="complete"] {
	background: rgb(0, 215, 183);
       background: linear-gradient(110deg, rgba(0, 215, 183, 1) 20%, rgba(0, 181, 215, 1) 100%);
	color:white;
	border-radius:30px;
	border:none;
	padding:10px 80px;
}

「戻る」ボタンのcss

戻るボタンは目立たなくするため、形は同じで色をグレーに、小さめサイズに指定しました。

.smf-action .smf-button-control__control[data-action="back"] {
	border-radius:30px;
	padding:10px 40px;
	margin-bottom:1em;
}

css追加後の表示

css追加後の表示はこのように、「戻る」ボタンが目立たず、「確認画面へ」と「送信する」ボタンが目立つ表示になりました。

実際の表示はこちらです。→Yum-designお問い合わせページ

「SWELL」内の追加cssで注意すること

最初追加cssが反映されず、困ったのですが、どうやら「SWELL」では追加css内にコメントを書くとエラーになるそうです。できれば備忘録としてどのパーツのcssかを書いておきたいのですが、仕方がないですね。

/* こんな風にコメントを入れるとエラーになる */

まとめ

標準で確認画面・完了画面やステップバーがついておすすめのSnow Monkey Formsですが、少しデザインをカスタマイズするとみやすい表示になって良いですね。