漫画・小説・ビジネス書なんでも最大100冊分が半額

Contact Form 7をプロ級フォームにカスタマイズする方法

Contact Form 7カスタマイズ

この記事では【Contact Form 7】の使い方〜カスタマイズ(コピペ可)まで丁寧に解説しています。

スパム対策プラグイン「Akismet」と連携させたコードを使用しているので、まずはそちらを設定しておくとスムーズになります。

現在「Akismet」は不要なプラグインです。フォームのスパム対策は以下のプラグインを推奨しているので、後ほど解説します。

Invisible reCaptcha for WordPressの設定【セキュリティ対策】

フォーム完成後は以下のようなデザインになります。

コンタクトフォーム7サンプルフォーム

PC表示

スマートフォンフォームサンプル

スマホ表示

スマホでは縦並びに変わるレスポンシブデザインです。

Contact Form 7をインストール

クリックorタップで画像拡大

コンタクトフォーム7インストール方法

管理画面

プラグイン

新規追加」をクリック

検索窓に「Contact Form 7」と入力」

今すぐインストール」をクリック

ボタンが「有効化」に切り替わったらクリック

Contact Form 7の設定

Contact Form 7カスタマイズ

管理画面

お問い合わせ

新規追加」をクリック

お問い合わせフォームのカスタマイズコード

こんな画面↓ ↓に切り替わるので、フォームに入力されているテキストを全部削除。

Contact Form 7カスタマイズ

そこに、以下のコードを貼り付ける。

ContactForm7フォームテキスト
<table class="inquiry">
<tr>
<th>
<span class="haveto">必須</span><span>お名前</span>
</th>
<td>
[text* your-name class:textsp placeholder"影影 男男"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder"[email protected]"]</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>電話番号</span>
</th>
<td>
[tel your-tel class:tel placeholder"090-1111-2222"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ドロップダウンメニュー</span>
</th>
<td>
[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>チェックボックス横並び【1つを選択】</span>
</th>
<td>
[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "サンプル4" "サンプル5" "サンプル6"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>チェックボックス横並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-2 use_label_element default:1 class:check2 "サンプル7" "サンプル8" "サンプル9"]</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>チェックボックス縦並び【1つを選択】</span>
</th>
<td>
[checkbox checkbox-3 exclusive use_label_element default:1 class:verticallist class:check3 "サンプル10" "サンプル11" "サンプル12"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>チェックボックス縦並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>ラジオボタン横並び</span>
</th>
<td>
[radio radio-1 use_label_element default:1 class:radio1 "サンプル16""サンプル17""サンプル18"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ラジオボタン縦並び</span>
</th>
<td>
[radio radio-2 use_label_element default:1 class:verticallist class:radio2 "サンプル19""サンプル20""サンプル21"]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>数値のスピン形式</span>
</th>
<td>
[number number-1 min:10 max:100 placeholder class:number1 "数値の値は指定できる"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>日付</span>
</th>
<td>
[date* date-960 placeholder class:datesp ]
</td>
</tr>
<tr>
<th>
<span class="any">任意</span><span>中級者向け回答形式のタグ</span>
</th>
<td>
[quiz quiz-1 class:qyizsp "質問:2019年に発表された新元号は?|令和"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>郵便番号</span>
</th>
<td>
[text* your-postalcode class:p-postal-code placeholder"123-4567"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>都道府県</span>
</th>
<td>
[text* your-prefectures class:p-region placeholder"◯◯県"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>ご住所</span>
</th>
<td>
[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
</td>
</tr>
<tr>
<th>
<span class="haveto">必須</span><span>お問い合わせ内容</span>
</th>
<td>
[textarea* your-message class:content placeholder "1行以上のテキスト入力欄"]
</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn "上記の内容で送信する"]

必須」を消したい場合は、上記の<span class="haveto">必須</span>部分を削除。

任意」も同様に<span class="any">任意</span>部分を削除してください。

またデザインだけでなく「必須」と「任意」は、ショートコードの最初の文字列の最後* アスタリスクを付けるか否かで、設定できます。 コンタクトフォーム7必須の設定

その他の不要なコード(項目)は<tr>〜</tr>部分を削除してください。

回答形式のタグ=[quiz]は、質問に答えられないと送信できないため、botによるスパムを防ぎ、セキュリティを向上できます。(後ほどセキュリティプラグインを紹介しますが、プラグインを増やしたくない人はこの方法でもいいですね。)

また少し高度な使い方をすると、採用フォームやターゲット属性を絞りたい時に、特定の人しか答えられないような質問をし、スクリーニングをかけることもできます。

あとは「日本語部分」を好きな言葉に変更すればオリジナルフォームの原型ができます。(この後CSSで調整します。)

郵便番号から住所を自動入力したい

2018年10月8日:追記

読者の方から以下のような質問をいただいたので備忘録として、回答を載せておきます。

コンタクトフォーム7読者からの質問

コンタクトフォーム7読者からの質問

contact form7カスタマイズの記事を拝見させていただき、デザインも良く取り入れさせてもらっております。

郵便番号の方に自動住所入力を入れたいと思いまして、zipaddr-jpプラグインをインストールしコードをコンタクトフォームテキストのyour-postalcode の後の部分に挿入してみましたが、囲んでいるデザインが変わってしまい上手くいきません。

挿入する場所が悪いのでしょうか?それともフォームのソースコード自体を変えないと駄目なのでしょうか?宜しければご教授下さい。

郵便番号テキストフォーム

[text* your-postalcode class:p-postal-code placeholder”123-4567″] zipaddr-jpプラグインで取得した自動住所入力コード[text* zip id:zip]

私は「zipaddr-jp」というプラグインをこの問い合わせで知ったのですが、これは便利。

インストールして専用コードに置き換えるだけで郵便番号を入力すると番地以外自動入力されます。

郵便番号自動入力

郵便番号自動入力

zipaddr-jpをインストール

先ほどのコードを以下のように変更してください。

郵便番号
[text* your-postalcode class:p-postal-code placeholder"123-4567"]
郵便番号
[text* zip id:zip placeholder"123-4567"]

都道府県
[text* your-prefectures class:p-region placeholder"◯◯県"]
都道府県
[text* pref id:pref placeholder"◯◯県"]

ご住所
[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
ご住所
[text* city id:city addr id:addr placeholder "○○市○○1-2-3 ○○マンション 101号室"]

青字」部分を削除して「赤字」のプラグイン専用コードに置き換えています。

採用フォームなど住所入力必須の場合は重宝すると思うので、よかったら活用してください。

今回の「フォーム用コード」は「Tableタグ」を使っているので、もう少しデザインをカスタマイズしたい方は、こちらを参考にして下さい。

TableタグデザインHTMLテーブルをCSSでオシャレにデザインする為の講座

お問い合わせフォームのメール設定

まずは、お問い合わせがあった際、自分に送られてくるメール設定をしましょう。

※クリックorタップで画像拡大

コンタクトフォーム7メール設定

送信先:自分のメールアドレス

送信元:自分のメールアドレス

題名:任意のものを入力

追加ヘッダー:変更しない

メッセージ本文:任意の文と※ショートコードを入力

補足

※よく使われるショートコード

  • [your-name]ー相手の名前
  • [your-email]ー相手のメールアドレス
  • [your-message]ー問い合わせ内容

設定が完了したら、次は問い合わせをくれた相手に送る自動返信メール設定をします。※不要な方は飛ばしてください。

メール設定画面で下にスクロール【メール(2)を使用】にチェックをいれると、設定項目が表示されます。

※クリックorタップで画像拡大

コンタクトフォーム7メール2設定

送信先:[your-email]

送信元:サイト名や自分の名前<自分のメールアドレス>

題名:任意のものを入力

追加ヘッダー:変更しない

メッセージ本文:画像参照

補足

送信先を[your-email]にすると、問い合わせ時に頂いたメールアドレスに自動返信メールを送ってくれます。

これでメール設定は終了です。

お問い合わせメッセージ設定

続いて、お問い合わせフォームで表示されるメッセージを設定します。ここはデフォルトのままでも問題ないですが、変更する場合は以下の画像を参考にして下さい。(サンクスページを作るなら設定不要)

Contact Form 7設定

ここまで設定が終わったら「保存ボタン」を忘れずに。

補足

上記画像の「その他の設定」は設定不要。

Contact Form 7のCSSコード

続いてCSSを子テーマのstyle.cssにコピペします。

WordPressスタイルシート
手順
  1. 外観の中にある「テーマの編集」をクリック
  2. コード貼り付け
  3. ファイルを更新をクリック

子テーマの使い方はこちら

WordPress子テーマCyberduckの使い方WordPressの子テーマを分かりやすく解説
style.css
/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:15px;
 width:350px;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 margin:25px auto 0;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#ffaa56;
 border:2px solid #ffaa56;
}
補足

ボタンの幅を変更する場合は、width:350px;を変更してください。

送信ボタンカラーはbackground=背景カラーと緑字部分でお好きなカラーに変更してください。

Contact Form 7お問い合わせページの作成

ここまで来たら、あとはコピペするだけでお問い合わせページが完成します。

コンタクトフォーム7コンタクトフォーム

Contact Form 7設定

管理画面

お問い合わせ

コンタクトフォーム

先ほど設定したお問い合わせフォーム

ショートコードをコピー

続いて

WordPress固定ページ新規作成

管理画面

固定ページ

新規作成

先ほどコピペしたショートコードをエディタ(ビジュアルでもテキストでもOK)に貼り付け、タイトル入力後に公開。

お問い合わせページ作成

最後に、お問い合わせフォームから自分宛にメールを送りテストしてみましょう。

メールが届けば設定完了です。

Contact Form 7の読み込みを使用するページだけに変更

ContactForm7は重い、遅いという声が時折ネットに出ています。それならば、フォームを使用するページだけに読み込ませましょう。

以下のコードを「functions.php」に追記してください。

functions.php編集

functions.php編集

functions.php
//コンタクトフォーム7読み込み制限 
function wpcf7_file_load() {
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
if( is_page( 'otoiawase' ) ){
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
add_action( 'template_redirect', 'wpcf7_file_load' );

これでコンタクトフォーム7を使用しているページだけ読み込まれます。

ContactForm7のセキュリティを高める

ReCAPTCHAマーク

ReCAPTCHAマーク

Google推奨の上記セキュリティをプラグインで導入します。

これによりスパムとおさらばできます。

Invisible reCaptcha for WordPressの設定【セキュリティ対策】

Contact Form 7のDOMイベントでサンクスページを作成する

問い合わせフォームだけなら上記の設定だけで十分なんですが、ビジネスとしてサイトを活用している方はサンクスページの設定も知っておくと便利です。

注意

以前はon_sent_ok やon_submitを使用してサンクスページを作成していましたが、現在この方法は非推奨とされており、2017年度内に廃止されました。

ネット上にあるサンクスページの作成は古いものもあるので注意。

固定ページにサンクスページを作る

WordPress固定ページ新規作成

管理画面

固定ページ

新規作成

例えば、こんな感じのページを作成します。

サンクスページサンプル

これは問い合わせに対する簡易的なサンクスページですが、やり方を覚えておけば「クロスセル」などで別商品を勧めるページを作成することもできますね。

クロスセルとは?

ある申し込み(購入や登録など)に対し、類似するまたはセット購入するとお得な商品などを勧めること。

例:テーブルの申し込み→そのテーブルに合う椅子を勧めるなど。

上記サンプルは以下コードを使用しています。

HTML
<div class="thanksPage"><img class="wp-image-22" src="画像URL" alt="画像の名前" width="150" height="150" /></div>
<p>折り返し自動返信メール(確認メール)を送ってあります。</p>
<p>もし、届かないようでしたら、【<strong>メールアドレスの間違い</strong>】または【<strong>迷惑メールフォルダ</strong>】に入ってしまっている可能性がありますので、ご確認ください。</p>
style.css
.thanksPage img{
 float:left;
}

widthの値で画像サイズを調整できます。

この時、お使いのテーマに固定ページを「1カラム」に変更することが出来れば見た目が良くなります。

WordPress設定

実際の表示

サンクスページサンプル2

補足

ページ公開後、送信ボタンを押すとこのページに切り替わります。

サンクスページに「noindex」設定を忘れずに↓

サンクスページは「noindex」設定にする

サンクスページは、読者やお客さんのためになるページですがSEO的にはよろしくないページです。(内容がないページなので)

こういった場合は、このページを検索エンジンに検知されないようにする必要があります。

補足

noindexとは……検索結果に表示させないようにするもの。

やり方については、以下の記事を参考にしてください。

WordPressでnoindexとnofollow設定する方法WordPressでnoindexとnofollow設定をする2つの方法

「noindex設定」をしたら、XMLマップからも除外してあげると検索エンジンに対して親切です。

Google XML Sitemaps設定Google XML Sitemaps設定とサーチコンソールの登録はセットで行う

サイトマップからサンクスページを除外する

PS Auto Sitemap」というプラグインでサイトマップを作成している方は、サンクスページをサイトマップから除外しましょう。(除外しないとサイトマップから見れるのでサプライズ感がなくなります。)

その場合はこちらの記事を参考にして下さい

PS Auto Sitemap設定PS Auto Sitemapの設定と使い方【HTMLサイトマッププラグイン】

問い合わせページにサンクスページコードを埋め込む

先ほど作成したサンクスページのURLをコピーしてください。

注意

プレビューのURLではなく正規のURLをコピーする。

WordPress固定ページ表示

WordPressURLコピー

問い合わせフォーム(サンクスページを表示させたいページ)に移動し、テキストエディタの先頭に以下のコードを追加。

サンクスページ サンプル

テキストエディタ
<script>
document.addEventListener( 'wpcf7mailsent',function( event ){
 location = 'サンクスページのURL';
}, false );
</script>

サンクスページURL部分は、送信後に表示したいURLを貼り付けてください。後は、テスト送信して貼り付けたページが表示されればフォームの完成です。

2019年:5月追記

以前読者の方より、サンクスページが上手く動作しないとコメントをいただきました。その時は原因不明だったのですが、別の方よりコメ解決方法を提示したコメントをいただけました。

同じく上手く動作しない方は、以下の方法を試してみてください。

こちらの「Contact Form 7の読み込みを使用するページだけに変更」のコードを削除し、コンタクトフォームの編集のフォーム内の一番上のところにスクリプトコードを記述したらうまくいきました。

Contact Form 7【まとめ】

Contact Form 7】は最初の設定だけ面倒ですが、一度設定してしまえば後はイジる必要がないので、ぜひこの記事を見ながらイケてるフォームを作成してみてください。

WordPressプラグインWordPressのおすすめプラグインをまとめたページ【随時更新】

88 COMMENTS

アバター dM

input type=”tel”に対するCSSが設定されないためか、郵便番号や電話番号などの入力欄にスタイルが適用されません。
改善方法はありますでしょうか?

返信する
カゲオ カゲオ

dM様

ご質問ありがとうございます。

「input type=”tel”」だけということであれば

input[type=”tel”]{
display: block;
width: 100%;
height:45px;
margin-bottom:14px;
padding:0 12px;
border:0;
border-radius:3px;
background-color:#eaedf2;
box-shadow:none;
color:#5c6b80;
font-size:1em;
vertical-align:middle;
line-height:45px;
transition:background-color 0.24s ease-in-out;
}
こんな感じでどうでしょうか?
上記は当サイトで使用しているテーマ「SANGO」のコードです。
高さや背景カラーなどは、お使いのテーマの「inputタグ」に合わせていただければと思います。

よろしくお願い致します。

返信する
アバター Pon

ありがとうございます。
「問い合わせページにサンクスページコードを埋め込む」をやっても、サンクスページが表示されず、フォーム全体が表で表示されその上に「フォームは送信されました。ありがとうございます」と表示されます。

対処方法を教えてください。

返信する
アバター Pon

サンクスページが表示されない件、解決しました。サンプルコードをそのままコピペしていたのが原因でした。scriptの中にあった設定を削除したら表示されました。
お騒がせしました。すみません。

返信する
カゲオ カゲオ

Pon様
解決されたようで何よりです。

しかしながら、ご質問を受け久々に該当部分を確認したところ、赤字にするためのタグがそのまま表示されていたことに気付けました。

また少し分かりにくかったかなぁと思い、補足説明を改善しておきました。

今回の質問がなければ、気付かなかった点なので、こちらとしても非常に助かりました。

ありがとうございます。

今後とも「カゲサイ」をよろしくお願いします。

返信する
アバター maki

こんにちは はじめまして。こちらのフォーム大変きれいで、使わせていただきました。
ありがとうございます。

一つ質問させてください。横幅が360pxを切ると フォームが見切れてしまうのですが、対策方法はありますか?

返信する
カゲオ カゲオ

maki様

ご質問ありがとうございます。

”該当ページのURL”を送っていただければ、確認いたします。

返信する
アバター maki

カゲオさま

お返事ありがとうございます。ご協力いただき誠に感謝いたします。
まだ公開前のサイトなので、公開は非掲載でお願いできますか?
こちらの2つのサイトで利用いたしました。
http://◯◯〜/contact
http://◯◯〜/contact/

返信する
カゲオ カゲオ

maki様

サイトを確認いたしました。

上側のサイトは以下のコードを追記してください。
@media(max-width:360px){
table.inquiry {
margin-top:80%;
}
.content{
padding:10px 0px!important;
}}

下側のサイトは
.content{
padding:10px 0px!important;
}

だけでイケると思います。

ご確認のほどよろしくお願いします。

返信する
アバター maki

お忙しい中教えていただき誠にありがとうございます。
実機のですと動作確認ができなくて お返事が遅くなりすみません。
自分の手持ちのものが iphone4で古いためか、、 seなどで確認できたらまた連絡させてください。ありがとうございました。

返信する
アバター 三木高広

お世話になります。とても役立っています。弊社のサイトに適用しようと思いましたが

1.テーマがWING(アフィンガー5)の為同じように反映されないのか
2.そもそも、このページで紹介されている方法をちゃんと反映させてないのか

判断ができず、もし可能であれば、ご指導いただけますと幸いです。

該当URLは
https://◯◯〜

でございます。日本語URLで見苦しく、申し訳ございません。

返信する
カゲオ カゲオ

三木高広 様

サイトを確認いたしました。

デザインは問題なく反映されています。

おそらくキャッシュが原因かと思われるので、削除して確認してみてください。

よろしくお願いします。

返信する
アバター kaz

大変参考になります。
ありがとうございます。

ご教示頂きたいのですが、問い合わせフォームのカスタマイズコードで項目設定して、実装したのですが、返信されるメールにカスタマイズコードの入力事項が反映されません。

最下部の「お問い合わせ内容」のみ(差出人、題名は入っています)が、返信メールに反映されて送られてきます。

設定を間違っているのでしょうか?
お手数ですが、ご教示頂けると助かります。

返信する
カゲオ カゲオ

kaz様
コメントありがとうございます。
・返信されるメールは以下の赤枠部分のショートコードを追記すれば、欲しい情報を反映できます。
コードはフォームに入力したHTMLごとに違うので、ご自身のコンタクトフォームを確認してみてください。
contactフォーム7返信メール設定

よろしくお願いします。

返信する
アバター kaz

ちょっと説明足らずでしたので、補足を。

ドロップダウンメニューで選択した、各項目や、〒番号・住所等が、返信メールに反映しないのです。

ドロップダウン項目の、メールタグの記載がいるのだと思いますが、判りますでしょうか?

返信する
カゲオ カゲオ

kaz様
解決されたようで何よりです。
今後とも「カゲサイ」をよろしくお願い致します。

返信する
アバター kaz

カゲオ様、

もう1点教えて下さい。

「問い合わせページにサンクスページコードを埋め込む」をやっても、サンクスページが表示されず、フォーム全体が表で表示されて、その上に「フォームは送信されました。ありがとうございます」と表示がされます。

当然、サンクスページのURLに変更しての書き込みをしています。

tcdのテンプレートを使っているのですが、それも関係しているのでしょうか?
もし対処方法があればご教示頂けませんか?

宜しくお願いします。

返信する
カゲオ カゲオ

kaz様

コメントありがとうございます。

一点だけ確認を。
「ビジュアルエディタ」ではなく「テキストエディタ」になっていますか?

もし「テキストエディタ」に貼り付けても上手くいかないのであれば、貼り付けたコードを送ってください。

返信する
アバター kaz

カゲオ様、

ありがとうございます。
こちらです。
ーーーーーーーーーーーー

document.addEventListener( ‘wpcf7mailsent’,function( event ){
location = ‘http://◯◯/’;
}, false );

ーーーーーーーーーーーー
コードは、テキストエディタに切り替えて貼り付けています。
宜しくお願い致します。

返信する
カゲオ カゲオ

kaz様

コードを確認したところ合ってますね。
先ほどテストメールを送らせてもらい、実際の表示も確認しました。

うーん、なんでしょう。こちらのコード「問い合わせページ」の先頭に貼っているでしょうか?
サンクスページ」ではなく「問い合わせページ」の先頭です。

もしそこも合っているのであれば、申し訳ないですが原因は分かりかねます。

ご確認のほどよろしくお願いします。

返信する
アバター kaz

カゲオ様、
ありがとうございます。

問い合わせページの先頭です。
お手を煩わせて申し訳ありませんでした。

今後もブログを拝見させて頂きます。
ありがとうございました。

カゲオ カゲオ

kaz様

いえいえ、お力になれず申し訳ありません。

素敵なホームページですね。
今後とも「カゲサイ」をよろしくお願いします。

アバター masa

カゲオ様
いつも大変参考にさせていただいており、お世話になっております。
2019年5月13日のkaz様の問い合わせの関連で、サンクスページに飛ばないという件ですが、wordpressのバージョン4.910の時はサンクスページに飛んでいたのですが、5.2にバージョンアップしたところ、飛ばなくなってしまいました。バージョン5.2でも問題なく動作していますでしょうか?
Classic Editorプラグインも入れてみましたがうまくいかず、なにかご存知でしたら、ご教示願えますでしょうか?
よろしくお願いいたします。

返信する
カゲオ カゲオ

masa様

コメントありがとうございます。
参考になっているようで何よりです。

問い合わせフォームより、自己解決できた旨、了解致しました。

今後とも「カゲサイ」をよろしくお願いします。

返信する
アバター mayu

カゲオさま
とても素敵なフォームだったので、使わせていただきたいと思い、コピペしたところ、保存すると「閲覧できません (Forbidden access)」というメッセージが出てします。
そもそも、WordPressの設定として、コンタクトフォームの設置にあたり、何か必要なのでしょうか?初心者すぎて申し訳ありません・・。
現在、有料のテーマをインストールしてWEBページを製作しております。
もし、何か思い当たる点があればご教授いただけないでしょうか?
お手数おかけしますが、何卒よろしくお願いいたします。

返信する
カゲオ カゲオ

mayu様

コメントありがとうございます。

Contact Form 7を設置するにあたり、WordPressの設定やテーマにより、特別なにか必要ってことはないですよ。

おそらくですが、お使いのレンタルサーバーに「WAF設定」という項目があれば、そちらを一度「OFF」にすれば正常に戻るかもしれません。

ご確認のほど、よろしくお願いします。

返信する
カゲオ カゲオ

mayu様

おぉーよかったです。

今後とも「カゲサイ」をよろしくお願いします。

返信する
アバター mayu

カゲオさま、何度もすみません。もう一つ確認ですが、ラジオボタンやチェックボックスが最初から一つ選択されていますが、それをなしにする設定はどちらですれば良いでしょうか?もしも、記載されているのを見落としていただ申し訳ありません。よろしくお願いいたします。

返信する
カゲオ カゲオ

mayu様

ラジオやチェックの初期値を外すには以下の「default:1」部分を削除してください。
[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 “サンプル13” “サンプル14” “サンプル15”]

ただし、ラジオボタンに関しては初期値を設定することが推奨されているので、外すのであれば「チェックボックス」のが良いと思います。

よろしくお願いします。

返信する
アバター mayu

カゲオさま、何度もありがとうございました!

アバター じょーけん

カゲオ様

参考にさせて頂き、自分のHPに入れてみたのですが、パソコンサイトは問題ないのですが、スマホで閲覧すると、縦並びにならず見難い状態になっています。
使っているテーマはlightningなのですが、何か特殊な設定は必要でしょうか?
CSSのタグはそのままコピペで入れています。
になります。
お手数おかけしますが、よろしくお願い致します。

返信する
カゲオ カゲオ

じょーけん様

コメントありがとうございます。
「Lightning」は使ったことがないので、わかりませんが
該当ページのURLを貼っていただければ確認致します。

よろしくお願いします。

返信する
アバター じょーけん

すみません。何もしていないのですが、先ほど改めて確認したら縦並びになっていました。
理由がわかりませんが(時間が経てばOK?)解決しております。
ありがとうございました。

返信する
カゲオ カゲオ

じょーけん様

解決されたようで何よりです。

デザインが反映されない原因の99%は「キャッシュ」ですので、今後も反映されないことがあれば
キャッシュ削除の方法を覚えておくと便利ですよ。

「キャッシュ削除」でググれば、解説記事がたくさん出てきます。

今後とも「カゲサイ」をよろしくお願いします。

返信する
アバター wp初心者

カゲオさま
参考にさせて頂いており、助かっております。

ここで詳細されているラジオボタン横並び のように、「テキストを横並び」にするのはどうすれば良いのでしょうか?

2000年 普通免許取得 のように、2000年 を入力する部分と、普通免許取得 を入力するようなものにできないかと思っております。
ご教授頂けると幸いです。

返信する
カゲオ カゲオ

wp初心者様

コメントありがとうございます。

「テキストを横並び」とはどのような状態でしょうか?

参考になるサイトなどがあればURLを貼っていただけるとイメージしやすいです。

よろしくお願いします。

返信する
アバター wp初心者

カゲオさま
テキスト横並びの件ですが、下記サイトの「登録名」「ふりがな」のような感じです。
https://kouenkoushinavi.com/entry_lecturers/entry_lecturers_form

返信する
カゲオ カゲオ

wp初心者様

参考サイト確認いたしました。
この場合「HTML・CSS・ショートコード」3つを調整する必要があるので、ちょっとコメント欄では対応できないですね。
申し訳ありません。

返信する
アバター wp初心者

カゲオさま

そうねんですね。わざわざ確認までして頂きありがとうございました!
これからも参考にさせて頂きます。

返信する
アバター kaz

カゲオ様、

こちらのページ
http://◯◯
なのですが、スマホで見ると挿入枠が画面からはみだしてしまいます。

何か記述を間違えているのだと思いますが、お分かりになりますでしょうか?

返信する
アバター メロン

カゲオさま、とてもわかりやすく簡単に作成ができ、とても助かりました。ありがとうございます。

質問があります。
日付入力のところですが、横幅いっぱいスペースが取られてしまい、▼が右端にありすぎて気づかなそうです。カゲオさんの見本だとそ真ん中くらいに▼がありますが、この幅の調整はどこでしたら良いでしょうか?

返信する
カゲオ カゲオ

メロン様

お役に立てたようで何よりです。

さて、入力欄の調整ですね。
ここはテーマにより、違うので調整する場合は、以下の通りです。
inputのサンプルコード
①調整したい入力欄の上で右クリック

②「検証」をクリック

③そうすると「input〜」みたいなコード(赤枠部分)がズラーっと出てきます。
この中の「width:◯◯」で幅を指定しています。
なので、赤枠内を全部コピーして、style.cssに貼り付け、widthの値を変更すればOKです。

※キャッシュ削除を忘れずに。

ご確認のほどよろしくお願いします。

返信する
アバター メロン

かげおさま、さっそくありがとうございます!
レスポンシブなのでautoや50%など指定して、検証の際にやってみました。概ねうまくいくのですが、それ以外のところ(フリーで一行以上入力する項目など)も同じようにサイズが小さくなってしまいました。
かげおさんの見本だと、一行以上の入力項目欄は、100%のwidthで表示されていますが何か設定されていますか?

返信する
カゲオ カゲオ

メロン様

なるほど。部分的に調整したい場合は、先ほど全部コピーした「input〜」のうち
100%のままにしたい入力欄の上で「検証」→該当セレクタ(input〜)を除外すればOKですよ。

よろしくお願いします。

返信する
アバター kaz

カゲオ様、

2019年5月15日のmasa様の、サンクスページの自己解決ですが、解決法をご存じでしたら、ご教示頂けないでしょうか?

返信する
カゲオ カゲオ

kaz様

masa様の件ですが、アップデートしたところ、サンクスページのコード内に<br>タグが複数入っていたとのことです。
<br>タグを削除したところ、正常に動いたと報告をいただきました。

ご確認のほど、よろしくお願いします。

返信する
カゲオ カゲオ

kaz様

先ほど、読者の方よりサンクスページの不具合に関する、新たな自己解決法のコメントをいただきました。
記事中「Contact Form 7【まとめ】」の上に引用したので、もしまだ解決されていないようであれば試してみてください。

返信する
アバター Emi

こんにちは
サイト大変参考になりました。
送信完了ページにリダイレクトされない件、何十回もトライしたところ、
こちらの「Contact Form 7の読み込みを使用するページだけに変更」のコードを削除し、コンタクトフォームの編集のフォーム内の一番上のところにスクリプトコードを記述したらうまくいきました。
参考になればとこちらにのこさせていただきます。

返信する
カゲオ カゲオ

Emi様

大変有益なコメントをいただきありがとうございます。
またお手数をおかけして申し訳ありません。

さっそく記事に引用させていただきます。

今後とも「カゲサイ」をよろしくお願いします。

返信する
アバター どきん

カゲオさま

お世話になります。
先日、ご質問させて頂いた件については何とか解決することが出来ました。
しかし、サンクスページは、他の質問者さまと同様、送信しましたという案内が出るだけでページは表示されません。
サイトはCocoonを使用しています。https://◯◯/contact/
恐れ入りますが、ご確認いただけますでしょうか。
よろしくお願い致します。

返信する
カゲオ カゲオ

どきん様

サンクスページの件ですね。
2日前に読者の方が、解決方法をコメントしてくださいました。

当記事でも追記(最後のまとめの上あたりです)しているので、そちらの方法を試してみてください。

よろしくお願いします。

返信する
アバター どきん

カゲオさま

お世話になります。
サンクスページですが、やはりうまくいきませんでした。
記述がおかしいのでしょうか?

あと必須を右側に一行で表示したいのですが、display: inline-block;では
二行のままになります。
記述方法が違っていたのなら申し訳ありません。

合わせてご確認頂けると幸いです。

よろしくお願い申し上げます。

返信する
カゲオ カゲオ

どきん様

うーん、かもしれませんね。
コードが正しくても「JavaScript」は相性の悪いプラグインもありますので、一度プラグインを全停止→1つずつ有効化して干渉してるプラグインを停止させるのも1つの手です。

必須の件ですが、HTMLに<br>タグが入っちゃってますね。なので、削除すれば横に表示されます。

というか、サイトめちゃめちゃオシャレですね。Cocoonでここまでカスタムしてるサイトは初めて見ました。
まだ公開前だと思うんですけど、おそらくデザイン面で参考にしたい方かなりいると思いますよ。

少し脱線しましたが、よろしくお願いします。

返信する
アバター どきん

カゲオさま

お世話になります。
早々にご連絡ありがとうございました。
必須の件は無事思い通りに並びました!

JavaScriptの相性…。なるほど勉強になります!
先ずは試してみます。

あとサイトをほめて頂きありがとうございます!
40歳過ぎて、新たなチャレンジの一つがサイトを作るってことで始めたのですが、
デザインを兼ねたUIって本当に難しく、毎日葛藤している状態です。
興味はあったものの、超が3つくらいつくド素人なので、他のサイトも参考させて頂きながら、日々精進しております。。
こうしてお褒めの言葉を頂くことで活力になります。
完成まではまだまだ先が見えないですが頑張ります!
本当にありがとうございました。

アバター マサ

初めまして。とても参考にさせて頂いております。

ご紹介頂いているフォームを利用させてもらおうと設定してみたところ、
下記の二点でイメージ通りになりません。

1.PC表示の際、項目部分が上下中央揃いにならない
2.モバイル表示の際、表が崩れてしまう

該当のページアドレスは以下になります。
https:◯◯

お手すきの際にでもご教授頂ければ幸いです。

御多用の中お手数をお掛け致しますが
宜しくお願い申し上げます。

返信する
アバター マサ

度々失礼致します。
先程質問させて頂いたものです。

その後スタイルシートを修正し、
1に関しては解決致しました。

しかし、2に関して、classやidを指定しながらフォームが画面を突き抜けない様にしたのですが、
モバイル表示の際、今度は画面が100%で表示されずに、
右側が全体的に少し空いてしまいます。

widthの%での指定が間違っているのでしょうか。

教えて頂ければ幸いです。

以上、宜しくお願い致します。

返信する
カゲオ カゲオ

マサ様

コメントありがとうございます。

ただいまこちらで確認したところ、キャッシュ削除すれば問題なく表示されるはずですが、いかがでしょうか?

ついでに、問い合わせフォーム周りの枠線と背景色はテーマ独自のCSSだと思いますので、以下のコードを追記すれば消すことができます。
もし気になるようでしたらご参考までに。

.wpcf7 {
background: none;
border: none;
}

返信する
アバター マサ

カゲオ様

早速のご回答誠にありがとうございます。
フォーム周りの枠線と背景色の件、助かりました。
早速対応させて頂きました。

現状、私のiphoneでキャッシュを削除して表示させてみると、
下記の様にフォームが突き出てしまいます。
https://www.smalls-it.com/img/S__7503935.jpg

そこで、下記の部分を修正してみました。
@media(max-width:500px){
内にある、
width:100%!important;
の部分を
width:83%!important;
に変更。

https://www.smalls-it.com/img/S__7503936.jpg

↑の様に表示され、フォームは画面内に収まりますが、
トップの画像の右端がなぜか少し空いてしまいます。

スタイルシートがいまいち分からず困っております。
ご確認頂ければ幸いです。

返信する
カゲオ カゲオ

マサ様

ありゃ失礼しました。
確かに右側に大きくズレていますね。

では以下のコードを追加してみてください。
@media(max-width:500px) {
p-page-header__inner l-inner .p-page-header__desc {
text-align: center;
}
.p-entry__inner .l-inner{
width:100%;
}
.p-breadcrumb .c-breadcrumb .u-clearfix{
margin: 0 0 0 25px;
}}

ちなみに、基本WordPressのコメント欄は相手側から画像を送ることはできない仕様になっています。
プラグインや自前でカスタムすることもできますが、そこまでしてる方はあまりいないかなと。
ただコメントに対して、サイト管理者側はimgタグを使えば画像を載せることはできます。
こんな感じ↓
<img src=”https://www.smalls-it.com/img/S__7503936.jpg”>
余談でしたがご参考まで。

よろしくお願いします。

返信する
アバター マサ

カゲオ様

お世話になります。
ご回答ありがとうございます。
色々と勉強になります。

画像の件、失礼致しました(;^_^A

教えて頂いたコードを追加してみました。

やはり携帯で表示させると、
ヘッダー、フッターの部分がどうしてもフルサイズで表示されず、
右側が少し空いてしまいます。
コードの追加する場所が間違っているのでしょうか?(-_-;)

テーマ独自のcssが変に反映されているのか。。。

返信する
カゲオ カゲオ

マサ様

以前いただいた以下のコメント部分
ーーーーーーーーーーーーーーーーーー
@media(max-width:500px){
内にある、
width:100%!important;
の部分を
width:83%!important;
に変更。
ーーーーーーーーーーーーーーーーーー

こちらを100%に戻せば、問題ないかと思います。

またこちらのコードも反映されていなかったので、追記しておいてくださいませ〜。
@media(max-width:500px) {
p-page-header__inner l-inner .p-page-header__desc {
text-align: center;
}
.p-breadcrumb .c-breadcrumb .u-clearfix{
margin: 0 0 0 25px;
}}

<補足>

・上側のコードが、お見積もり〜の下にある文言を真ん中に寄せるコード
・下側はパンくずリストを左側に寄せるコード

となります。

よろしくお願いします。

返信する
アバター うさこ

はじめまして。
初心者ですが、カゲサイ様のサイトを参考にcocoon
元の検索キーワード: cocooonでHPを作成しています。
そこで何点か質問させてください。

問い合わせフォームはカゲサイ様のページを参考に作っています。

①問い合わせフォームに確認ページとサンクスページを作りたいのですが、
確認ページの作成方法が記載されていなかったので、自分なりに調べて
Contact Form 7 add confirmのプラグインを入れました。
しかし、確認ボタン等追加しても表示されません。
何か方法はありますか?

②「スパムメール防止のため、こちらのチェックボックスにチェックを入れてから送信してください。」
ですが、チェックボタンを押さなくても送信できてしまいます。そのような仕様でしょうか?
このボタンを押さなければエラーが出る方法等ありますか?

③記入例の文字の色が少し濃く感じたので自分なりに調べてCSSに追加したのですが
この内容で間違いないでしょうか?何か注意することはありますか?

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#ccc;
}
::placeholder{ /* Others */
color:#ccc
}

④添付ファイルを追加したくて、下記内容を追記したのですがよかったでしょうか?

ファイルを添付(最大2MB)
[file your-images1 limit:2mb filetypes:gif|png|jpg|pdf|ai|psd|xls|xlsx|doc.docx|ppt|pptx]
[file your-images2 limit:2mb filetypes:gif|png|jpg|pdf|ai|psd|xls|xlsx|doc.docx|ppt|pptx]
[file your-images3 limit:2mb filetypes:gif|png|jpg|pdf|ai|psd|xls|xlsx|doc.docx|ppt|pptx]

[confirm “確認”][back “編集画面へ”][submit “送信”]

[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのチェックボックスにチェックを入れてから送信してください。
[submit id:formbtn “上記の内容で送信する”]

初心者の為質問に失礼があったらすみません
どうぞよろしくお願いいたします。

返信する
カゲオ カゲオ

うさこ様

コメントありがとうございます。

さて、4つの質問について

①と④は、自己解決でお願いいたします。

②は記事内で紹介しているセキュリティプラグインでスパムを防げるので、コードを削除してプラグインで対応してくださいませ〜。

③のCSSは以下で変更できます。
ーーーーーーーーーーーーーーーーーーー
input::placeholder {
color: #ccc;
}
ーーーーーーーーーーーーーーーーーーー

基本的に、記事の内容に関する質問にはお答えしていますが、ここから派生させたカスタムをしたい場合は、ご自身で対応いただいています。

申し訳ありませんが、よろしくお願いします。

返信する
アバター うさこ

カゲオ様
お手数をおかけしました。
有難うございます。③すぐに改善しました。
②につきましては、記事再度確認し対応してみます。
ありがとうございました。

返信する
アバター マサ

カゲオ様

お世話になります。
ご回答ありがとうございます。

該当の箇所を100%にするとやはり右側に突き抜けてしまうんですよねぇ。

また、カゲオ様に教えて頂いた下記も追記しております。
@media(max-width:500px) {
p-page-header__inner l-inner .p-page-header__desc {
text-align: center;
}
.p-breadcrumb .c-breadcrumb .u-clearfix{
margin: 0 0 0 25px;
}}

ブラウザ特有の何かがあるのかと思い、
safari、chromeで試しましたが、
やはりモバイル表示だとうまくいきません。

返信する
カゲオ カゲオ

マサ様

ありゃそうですか。うーん、何でしょうね。
こちらでも色々やってみたのですが、どうもうまくいきませんでした。

お力になれず申し訳ありません。

返信する
アバター マサ

カゲオ様

いえいえ、ありがとうございました。
お陰様でとても勉強になりました。

こちらももう少し勉強したいと思います。

今後も参考にさせて頂きます。

返信する
アバター 修様

はじめまして。
参考にしてサイトを作っているのですが、スマホサイズで表示すると右側が切れてしまいます。
CSSをいじくればいいのかなと思うのですが、どうしてもできません。
ご教授いただければ幸いです。

https://◯◯〜

返信する
カゲオ カゲオ

修様

はじめまして。
サイトを拝見いたしました。

以下のCSSを追記してみてください。
@media (max-width: 900px)
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
width: 100%;
}
table.inquiry {
border: 1px;
}}
下側のCSSはフォーム外側の枠線を細くするためのものです。
ご質問とは関係ありませんが、その方がデザイン的にいいかな〜と思ったので提案してみました。

最後に1つ

@media (max-width: 900px)
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;

おそらくご自身で、上記の幅(width)を80%に変更されたと思うのですが、こちらを100%に戻していただければスマホでも綺麗に表示されます。

CSS変更後「キャッシュ削除」を忘れずに〜。

どうぞよろしくお願いします。

返信する
アバター 修様

カゲオ様

いい感じになりました!どうもありがとうございます。

1点だけ・・・提案していただいたフォーム外側の枠線を細くするためのCSSがイマイチうまくいかないというか、お手数ですが、もう一度ご確認いただけますか?

@media (max-width: 900px){
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;
}}

少しスペースができてしまう感じですが、これでいいですか?個人的には、このCSSがない方がぴったりハマる気がします。。。

よろしくお願いします。

返信する
カゲオ カゲオ

修様

申し訳ない。
お伝えの仕方がわかりにくかったですね。

@media (max-width: 900px){
.inquiry th, .inquiry td {
display: block!important;
width: 80%!important;
}}

の80%部分を100%に変更していただくと、バランスが取れますのでお試しくださいませ〜。

返信する
アバター 修様

カゲオ様

お忙しいところ、何度もすいません。
もう一つ教えてください。

コンタクトフォームを複製し、同じように作ったときに、なぜかこのページがCSSが反映されないようで(前回同様スマホサイズで表示すると右側が切れてしまいます。)、前回観ていただいたページは修正されています。

https://◯◯

ページごとにCSSを打ち込む必要があるのですか?
教えてください。

よろしくお願いいたします

アバター 修様

カゲオ様

何度もすいません。
@media (max-width: 900px){
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required{
width: 100%;
}
table.inquiry {
border: 1px;
}}

↑にinput.wpcf7-form-control.wpcf7-textを追加したら自己解決できました。お騒がせしてすみません。ただなぜこれで修正されたのかわかりませんが。。。ありがとうございました。

アバター アリ

カゲサイさま、はじめまして。
コンタクトフォームの設置に際し、とてもわかり安く利用させていただいております。
PC表示では問題ないのですが、スマホでの表示にした場合、なぜか縦並びになりません。
さらに「必須」「任意」などの文字が、色無しでそのままになってしまいます。
どのようにしたらきれいなレスポンシブデザインになるのでしょうか。
アドバイスいただけたら幸いです。
http://◯◯(サイトの公開は避けていだけたらと思います)

返信する
アバター アリ

何度もすみません。自己解決しました。
]でしっかり区切れていなかったのが原因のようでした…お恥ずかしいです。
無事素敵なレスポンシブデザインとなりました。ありがとうございました。
今後とも参考にさせてください。

返信する
カゲオ カゲオ

アリ様

自己解決の旨了解しました。
ご連絡ありがとうございます。

一応サイト拝見させていただきました。(現在出先なのでスマホ閲覧のみになります。)

気になった点を2点ほどお伝えします。

1.スマホで見た時のヘッダーが大きすぎるので小さく(当サイトくらいのサイズ)すると、見栄えが良くなります。

もう一つは、メニューの表記が英字なので、カタカナにしてあげると「アクセシビリティ」が上がるかなと思います。

ご職業柄、多種多様なお客様が閲覧されると思うので、特に見やすさにはこだわった方が良いかと思い、余計なお世話をしてしまいました。

今後とも「カゲサイ」をよろしくお願いします。

返信する
アバター アリ

カゲオさま

ヘッダーも小さくし、更にメニュー表記もわかりやすく日本語に替えました。老若男女対象にしているのでみやすさは大切ですね。デザインばかりにこだわり反省です…。アドバイス本当にありがとうございました!

返信する
カゲオ カゲオ

アリ様

いえいえ、いい感じになりましたね。

気が向いたらまた覗きに来てくださいませ〜。

返信する
アバター 木曜日

はじめまして。素晴らしいフォームデザインをご提供いただきありがとうございます!

こちらのフォームを使わせていただいているのですが、スマホ表示の際に枠が突き抜けてしまいます。コメント欄を見て試行錯誤してみましたが、自力では直せず…コメントさせていただきました。
https:◯◯(非表示でお願いします)
サイトはこちらになります。ご確認いただけますと大変幸いです。

また、フォームの枠が2重(?)になってしまうのですが、こちらも原因不明です…。テーマ特有のものでしょうか?(テーマはTCD社のOOPSです)
直す方法がありましたら、教えていただけますでしょうか。

返信する
カゲオ カゲオ

木曜日様

確認したところ、キレイに表示されていますね。

自己解決できたようで何よりです。

今後とも「カゲサイ」をよろしくお願いします。

返信する
アバター RON46

コンタクトフォームを利用させていただいております。
大変見やすくて感謝しております。

さて、ドロップダウンメニューで「include_blank」の代わりに、「first_as_label “選択してください”」としたいのですが、このタグを入れても反映しません。どうすればいいでしょうか。

またラジオボタン横並びの最後で「その他」の横にテキストボックスを入れる方法はあるでしょうか?

よろしくお願い申し上げます。

返信する
カゲオ カゲオ

RON46様

反映しないとは「選択してください」の文字列が表示されないということでしょうか?
もしそうなら、ショートコードミスの可能性が高いです。コードを送っていただければ確認いたします。

ラジオボタンの横に「テキストボックス」を入れる方法はありますが、少々面倒なのでコメント欄では対応できかねます。
申し訳ありません。

返信する
アバター INN

はじめまして、調べ方が悪いのか、CHECKBOXの構文のところで、
わからないところがあります。

[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 “サンプル4” “サンプル5” “サンプル6”]

例えば、この場合の書式で、checkbox-1ですとか、class:check1の役割がよくわからないのです…。ぜひ大きめのアンケートを作成したいと思っていまして、ここに何を書くべきなのか、そのままで良いのかが分からず、よろしければご教示おねがいできませんでしょうか…。(CONTACTFORM7専用の書式なんですよねきっと)

返信する
カゲオ カゲオ

INN様

初めまして。

カゲサイ運営者・カゲオです。

1つずつお答えしていきますね。

「checkbox-1」は、チェックボックスの内容を自動返信メールに反映させたい場合に使用するショートコードになります。

「exclusive」は、1つにチェックが入っていると他のボックスにはチェックできないようにするコードです。

「use_label_element」は、チェックボックス横のテキストをクリックしても、チェックが入るようになります。

「default:1」は、最初にフォーム画面が表示された際、一番左側のボックスにチェックがされた状態にするためのものです。

「class:check1」は、チェックボックス部分だけをCSSで変更したい時に、使うものです。

.check1{}

大きめのアンケートがどのようなものか分かりませんが、チェックボックスの基本的な使い方としては

好きな動物は?

□犬□猫□熊

のように、ユーザーの手間を省く&簡単な選択肢に使うものなので、アンケート内容(チェックボックス横のテキストが複雑な場合など)によっては、チェックボックス以外のフォームを利用した方がいいかもしれません。

よろしくお願いします。

カゲサイ

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です