コンタクトフォーム7で選択項目にデフォルトでチェックを入れる方法

コンタクトフォーム7で選択項目にデフォルトでチェックを入れる方法
2018年11月13日2019年1月16日

コンタクトフォーム7シリーズ第2回は、ラジオボタンやチェックボックスの好きな箇所にデフォルトのチェックを入れる方法です。

ラジオボタンやチェックボックスを使用する時、あらかじめ決めた箇所にチェックを入れておきたい場合は多いものです。コンタクトフォーム7のフォーム作成画面上の説明だけでは、少々わかりにくいのでまとめておきます。

オプションの”default”を使用する

ラジオボタンやチェックボックスにあらかじめチェックを入れるには、”default”というオプションを使用します。ラジオボタンの場合は、そもそも選択が必須となりますので、普通に作成するだけでコードに”default:1”(1番目の選択項目にチェックが入った状態)と追記されます。下のような感じですね。前に書いたplaceholderと違って、オプション名の後にコロンが必要です。

これを別の位置に変更したい場合は、以下のように書き換えます。

2番目に変更

ちょっと当たり前ですが、デフォルトのチェックを2番目の項目に入れたい場合は下のように、default:2とします。

下の画像のようになりました。

defaultを”2”に指定したラジオボタン

「はい/いいえ」などの、最初からチェックが入っていると強引さを感じさせる内容の場合には、この方がユーザーは気分がいいですよね。3番目以降にチェックを入れたい場合も同様に記述しましょう。

複数にチェックを入れる場合

チェックボックスの場合は複数にチェックを入れておきたい場合もありますね。その場合は、アンダーバーで繋いで下のように書きます。

こちらは下のように出来上がりました。

デフォルトで複数の項目にチェックを入れた場合

最後に

適切な箇所にデフォルトチェックが入っているのと、そうでないのとでは、フォームの使いやすさや見た目に大きな違いが出ます。

小さな違いに感じてしまいがちですが、フォームはWEBサイトのゴールである場合も多い、とても大切な箇所です。細かい所まで気を配って、クオリティーの高いものにしましょう。

関連のある記事

コンタクトフォーム7でreCAPTCHA V3を導入する方法

コンタクトフォーム7でreCAPTCHA V3を導入する方法

記事を読む

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

コンタクトフォーム7で動的にデフォルト値や選択肢・送信先などを設定する方法

記事を読む

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

コンタクトフォーム7でフォームを判定して別々のサンクスページを表示する方法

記事を読む

コンタクトフォーム7にサンクスページを追加する方法

コンタクトフォーム7にサンクスページを追加する方法

記事を読む

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

コンタクトフォーム7で郵便番号から住所を自動入力させる方法

記事を読む

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

コンタクトフォーム7の「ありがとうございます」の表示位置を変更する方法

記事を読む


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages