Snow Monkey Forms カスタマイズ完全ガイド｜CSS・ボタン・必須マーク・reCAPTCHA設定まで解説

WordPressメモ

2026年07月17日

Snow Monkey Formsをもっと使いやすくしたい方へ

無料プラグイン「Snow Monkey Forms」を使い お問い合わせフォームを作成しました。
初心者にも使いやすい Snow Monkey Forms ですが、見た目や実装面でのちょっとしたカスタマイズを行い、サイトのUIを高めてみました。

Snow Monkey Forms の特徴として

◇ 初心者でも扱いやすい
◇ ユーザーが多く情報が安定している
◇ ブロックエディターでフォームデザインが簡単にできる

といった理由から、使ってみた方も多いのではないでしょうか。

しかし実際に使ってみると、

◇ 必須マークが表示されない
◇ ボタンが少し味気ない
◇ 入力フォームをもっと見やすくしたい
◇ reCAPTCHAでスパム対策したい
◇ 完了後にThank Youページへ遷移させたい

といったカスタマイズをしたくなる方も多いでしょう。

この記事では、実際に運営サイトで使用している設定をもとに、初心者でも導入できる Snow Monkey Forms のおすすめカスタマイズ方法7選 を紹介します。

cssやphpのコードも掲載しているので、そのままコピーして利用できます。

「必須」マークをつける方法
「入力画面」のカスタマイズ方法
ラベルカラム設定
ボタンのカスタマイズ
Google reCAPTCHAの設定
Snow Monkey Formsメリットデメリット
Snow Monkey Forms　よくある質問

１、Snow Monkey Formsで必須マークを表示する方法（CSS）

必須マークをCSSで追加した完成イメージ

デフォルトでは必須項目が分かりづらく、入力ミスの原因になることがあります。
そこでCSSを追加し、「必須」ラベルを自動表示させます。

下記のコードをCSSに記載します。
「外観」→「カスタマイズ」→「追加CSS」
又は
子テーマのCSSに追記します。

個人的にはカスタマイズの「追加CSS」は、データベースに格納され、サイトに負荷がかかるので「子テーマ」にCSS　追記を推奨します。

WordPressテーマをアップデートすると、親テーマのCSSへ直接追加したCSSやPHPは消えてしまいます。子テーマへ追加しておけばアップデートの影響を受けず、安全に管理できます。

子テーマについては こちらクリック


/* 必須マーク */
.smf-item__label__text {
	position: relative;
}

.smf-item__label__text::after {
	 position: absolute;
	 content: '必須';
	 color:  #fff;
	 width:  40px;
	 height: 22px;
	 top: 50%;
	 transform: translateY(-50%);
	 right: -50px;
	 display: grid;
	 place-items: center;
	 background: #f1b94a;
	 border-radius: 4px;
	 font-size: 12px;
}

.wp-block-snow-monkey-forms-item:nth-last-child(3) .smf-item__label__text::after {
	display: none;
}

必須マークをつけたくない項目は

◆ 1番目の項目は「first-child」
◆ 2番目の項目は「nth-child(2)」
◆ 最後の項目は「last-child」

私は最後から３番目はいらなかったので、
.wp-block-snow-monkey-forms-item:nth-last-child(3) としました。

２、入力フォームのデザインをCSSで見やすくする方法

それでは、実際の設定方法を見ていきましょう。

項目名を太字にする

項目名が細字になっているのを太字に変更します。

入力フォームのデザインを見やすく調整した例

テキストを選択し、その上のバーの「B」をクリックします。
メリハリが効いて問い合わせフォーム全体が見やすくなります。

CLASS属性を指定する

当サイトはフォームタイプを「レター」に指定しているので、
クラス名は .smf-form–letter です。
*各フォームタイプでクラス名は変わります

CSSでは、項目名と入力部分のバランスをとっています。


/* 　入力項目*/
.smf-form--letter .smf-item {
  font-size: 0.9em;
  padding: 1.7rem 0;  
}
/* ラベル部分の下 */
.smf-form--letter .smf-item__col--label {
  padding-bottom: var(--_padding-2);
}

３、ラベルカラム（入力・確認・完了）のデザインを変更する方法

デフォルトのラベルカラム表示

カスタマイズ後のラベルカラム表示

ウェブやデザインの仕事とは、現役デザイナー発信の生情報、役に立つニュースはこちらから。デザイン制作のリアルな声、サイト構築やイラレ・フォトショ、プログラミングの仕事内容が見らます

Snow Monkey Formsのラベルカラム（入力・確認・完了）のカスタマイズ後のデザイン

ラベルカラムは、①入力 → ②確認 → ③完了　の進捗を表示します。
まず確認画面の表示をONにします。
フォーム設定 →「ラベルカラムを表示する」をON

ウェブサイト構築やホームページHTMLワードプレスの勉強のグループレッスン会社出張レクチャーサイト制作やリニューアルのサポートレッスン、集客とデザインを同時に向上するテクニックを個別レッスンでサポート、ウェブサイトの解析とレクチャー指南、検索順位をあげたいなら女性講師の個別指

ラベルカラムのカスタマイズ


/* ラベルカラムのカスタマイズ */
form .smf-progress-tracker {
  list-style-type: none;
  display: flex;
  width: 100%;
  padding: 0;
  margin: 2em auto 2em;
  overflow: hidden;
}
form .smf-progress-tracker li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 33.33%;
  padding: 0.4em 0 0.4em 0.4em;
  text-align: center;
  font-size: 0.8em;
  color: #656565;
  background: #f3f3f3;
}
form .smf-progress-tracker li:last-child {
  padding-right: 0.4em;
}
form .smf-progress-tracker li:before{
  display: none;
}
form .smf-progress-tracker li:after{
  content: "";
  position: absolute;
  z-index: 2;
  width: 0;
  height: 100%;
  top: 0;
  bottom: 0;
  right: -0.95em;
  left: auto;
  margin: auto;
  background: none;
  border-style: solid;
  border-width: 2.5em 0 2.5em 1.2em;
  border-color: transparent transparent transparent #f3f3f3;
}
form .smf-progress-tracker li:last-child:after{
  display: none;
}
form[data-screen="input"] .smf-progress-tracker__item--input,
form[data-screen="invalid"] .smf-progress-tracker__item--input,
form[data-screen="back"] .smf-progress-tracker__item--input,
form[data-screen="confirm"] .smf-progress-tracker__item--confirm,
form[data-screen="complete"] .smf-progress-tracker__item--complete{
  color: #fff;
  background: #92dcd0;
}
form[data-screen="input"] .smf-progress-tracker__item--input:after,
form[data-screen="invalid"] .smf-progress-tracker__item--input:after,
form[data-screen="back"] .smf-progress-tracker__item--input:after,
form[data-screen="confirm"] .smf-progress-tracker__item--confirm:after,
form[data-screen="complete"] .smf-progress-tracker__item--complete:after{
  right: -1em;
  border-color: transparent transparent transparent #6bdbc8;
}
form .smf-progress-tracker li .smf-progress-tracker__item__number{
  margin: 0 0.5em 0 0;
}
form .smf-progress-tracker li .smf-progress-tracker__item__text{
  margin: 0 0 0 0;
}

ラベルカラムの文言変更

①入力 → ②確認 → ③完了　の文言を変更するには functions.php に以下記載します。
　*①を「テキスト入力」　②を「テキスト内容チェック」　③を「お問い合わせ送信完了」に変更


// ラベルカラム文言変更
add_filter( 'gettext_with_context_snow-monkey-forms', function( $translation, $text, $context, $domain ) {
  if ( $context === 'progress-tracker' ) {
    switch ( $text ) {
      case 'Input screen':
        return 'テキスト入力';
      case 'Confirm screen':
        return 'テキスト内容チェック';
      case 'Complete screen':
        return 'お問い合わせ送信完了';
    }
  }
  return $translation;
}, 10, 4 );

入力・確認画面のカスタマイズ

入力ページに表示したいコンテンツに input-content
確認画面ページに表示したいコンテンツに confirm-content

各ページのクラス名は下記で指定できます。


/* 入力ページのクラス属性 */
form[data-screen="input"] {

}
/* 入力エラーページのクラス属性 */
form[data-screen="invalid"] {

}
/* 戻るボタンを押したページのクラス属性 */
form[data-screen="back"] {

}
/* 確認画面ページのクラス属性 */
form[data-screen="confirm"] {

}
/* 送信エラーページのクラス属性 */
form[data-screen="systemerror"] {

}

完了画面をThank Youページにリダイレクト

デフォルトでは送信後に「完了画面」が表示されますが、専用のThank Youページを作成し、自動転送させることが可能です。

子テーマの「functions.php」に追記して下さい。
　＊必ずバックアップを取ってから記載して下さいね

Thank Youページへリダイレクトするメリット

◆ Google広告のコンバージョン設定が簡単
◆ LINE登録や資料請求へ誘導できる
◆ サンクスページをSEO対象から除外できる


add_action(
    'wp_enqueue_scripts',
    function () {
        $form_id = 'snow-monkey-form-▲▲▲▲▲'; // ← 自分のフォームIDに変更します
        $thankyou_url = 'https://sample.com/▲▲▲▲▲/'; // ← 転送先URLに変更します

        $script = <<<JS
document.addEventListener('DOMContentLoaded', function() {
  var form = document.getElementById('$form_id');
  if (form) {
    form.addEventListener('smf.submit', function(event) {
      if ('complete' === event.detail.status) {
        window.location.href = '$thankyou_url';
      }
    });
  }
});
JS;
        wp_add_inline_script('snow-monkey-forms', $script, 'after');
    },
    11
);

４、ボタンデザインをカスタマイズする方法

キャリアコンサルティング国家資格を持つ講師がグラッフィックデザイン講座企業研修、WEBサイト運用、管理、作成講座研修します

Snow Monkey Forms各ボタンのデフォルトデザイン

デフォルトのボタンは地味で味気ないので、装飾していきます。

入力画面内の「確認画面へ」ボタン、確認画面の「戻る」/「送信する」ボタン 全てに同じクラス名がついているのでクラス名に属性を追加し差別化します。

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

こちらが↓出来上がりのボタンです。

送信ボタンを視認性の高いデザインへ変更

今回は「戻るボタン」のみ、デフォルトのグレーの地味なデザインにしてあります。

下記CSS、スマホ用のメディアクエリは、ボタンの位置に問題が出るための調整です。
　＊色や大きさ、形は自分の好みに変更してみて下さい。


/* ボタンカスタマイズ */
.smf-action .smf-button-control__control[data-action="confirm"],
.smf-action .smf-button-control__control[data-action="complete"] {
  background: #4d9edb;
  color:white;
  border-radius:30px;
  border:none;
  padding:10px 80px;
  font-size: 1.1em;
  font-weight: 200;
}
/* ホバー時のアクション */
form .smf-action .smf-button-control button:hover {
  transition: .3s;
  opacity: .6;
}
/* 戻るボタン */
.smf-action .smf-button-control__control[data-action="back"] {
  border-radius:30px;
  border:1px solid #cacbcc;
  padding:10px 40px;
  color:#949a97;
  font-size: 1.1em;
  font-weight: 200;
}
/*　画面サイズが480px以下　*/
/* 戻るボタン */
@media screen and (max-width: 480px) {
.smf-action .smf-button-control__control[data-action="back"] {
  margin-bottom: 1em;
} 
}