漫画・小説・ビジネス書なんでも最大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のおすすめプラグインをまとめたページ【随時更新】

57 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様

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

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

よろしくお願いします。

返信する
アバター mayu

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

アバター じょーけん

カゲオ様

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

返信する
カゲオ カゲオ

じょーけん様

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

よろしくお願いします。

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

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

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

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

返信する
カゲオ カゲオ

wp初心者様

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

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

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

よろしくお願いします。

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

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

返信する
カゲオ カゲオ

wp初心者様

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

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

カゲオさま

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

返信する
アバター kaz

カゲオ様、

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

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

返信する
アバター メロン

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

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

返信する
カゲオ カゲオ

メロン様

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

さて、入力欄の調整ですね。
ここはテーマにより、違うので調整する場合は、以下の通りです。
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://commonlife.work/contact/
恐れ入りますが、ご確認いただけますでしょうか。
よろしくお願い致します。

返信する
カゲオ カゲオ

どきん様

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

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

よろしくお願いします。

返信する
アバター どきん

カゲオさま

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

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

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

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

返信する
カゲオ カゲオ

どきん様

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

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

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

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

返信する
アバター どきん

カゲオさま

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

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

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

コメントを残す

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