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

Yum-design — Fri, 23 Aug 2024 08:23:24 +0000

フォームの送信ボタンの色を変えたい！

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

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

標準でついているステップバー。どのページにいるかひと目でわかります。

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

標準の送信ボタン（確認画面へのボタン）のデザイン。
ボタンがあまり目立たない。

カスタマイズ後の見た目

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

変更後のデザイン。サイトカラーに合わせます

cssの追加場所

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

管理画面の「外観＞カスタマイズ」が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追加後の表示はこのように、「戻る」ボタンが目立たず、「確認画面へ」と「送信する」ボタンが目立つ表示になりました。

css追加後の表示。戻るボタンが目立たなくなりました。

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

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

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

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

まとめ

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

css nite Coder’s High 2022 (Part 1)のアーカイブを見ました。

ヤム・デザイン — Mon, 17 Oct 2022 11:37:31 +0000

アーカイブの中で役に立ちそうなものを紹介します

2022年9月16日（金）に開催されたcss niteのオンラインセミナー、当日参加できなかったのでアーカイブを見させていただきました。

4つのセッション

下記の4つのセッションがありました。

サイト高速化入門ページ表示速度の計測とフォントのサブセット化
Next.jsで始めるモダンウェブ制作
WAI-ARIAから学ぶHTMLが面白くなる話
dialog要素でつくるモーダルダイアログ

この中でも私の実際の業務ですぐに使えそうな「高速化入門」と「dialog要素でつくるモーダル」について詳しく見ていきます。

サイト高速化入門

スマホの閲覧数の方が多くなってから、高速化についてちょこちょこは対応していました。このサイトも特にWordPress化してから表示が遅くなっていることが気になっていました。きちんと体型的に何をやれば良いかは整理されていなかったので、とても参考になりました。

こちらのセッションでは高速化のために、大きくは「PageSpeed Insights」の見方と「フォントのサブセット化」の２つについて解説されていました。「PageSpeed Insights」について、pcとスマホのそれぞれの点数やその下の要因をチラッと見るくらいでしたが、詳しい見方を教えていただいて、全然見ていなかった部分を知ることができました。

dialog要素でつくるモーダルダイアログ

jsを直接書いたりするのが苦手な私は、今までモーダル画面をコーディングする時は大体jQueryを使っていました。

css – Yum-design