当ブログでは、WordPressでお問い合わせフォームをサクッと作れるプラグイン「Contact Form 7」の使い方やちょっとした小技の記事を10記事以上公開中。
「テキストエリアの文字数を制限する方法」「サンクスページを用意する方法」といった運営者側に役立つものから、「チャックボックスやラジオボタンのデザインをカスタマイズする方法」などの開発者向けのものまで網羅しています。
ぼくはこれまでWeb制作案件で幾度となくContact Form 7を用いてお問い合わせフォームを実装してきました。
その経験から「簡単に導入はできるけど案外カスタマイズしようとすると面倒くさい」と感じています。
ですので同じような悩みを抱える方の少しでも助けになれればと思い、備忘録を残している次第です。
この記事ではプラグイン「Contact Form 7」を使うときに役立つ記事をまとめて紹介します。
目次 [非表示]
Contact Form 7を使うときに役立つ記事まとめ
ラジオボタンをカスタマイズする方法
Contact Form 7のラジオボタンのデザインを思いのままにカスタマイズする方法の解説です。
コーポレートサイト制作案件では必ずと言っていいほど、そのサイトのテイストに合わせたラジオボタンが要求されます。
そのときにカスタマイズ方法を知らないと、そこで何時間も頭を抱えることになって結果、Contact Form 7が嫌いになります。
そうならないためにこの記事を作りました。
Contact Form 7のラジオボタンをカスタマイズする方法チェックボックスをカスタマイズする方法
Contact Form 7のチェックボックスのデザインをカスタマイズする方法の解説です。
こちらも上述したラジオボタン同様、極めて厄介ながら、頻繁に実装しなければならないパーツとなります。
困ったらこの記事に書いてあるやり方をぜひ試してみてください。
【Contact Form 7】チェックボックスのデザインをカスタマイズする方法返信メール内容を条件分岐させる方法
プラグイン「Contact Form 7 Conditional Fields」の機能を駆使して、ユーザーの選択肢ごとに返信メール内容を条件分岐させる方法を紹介します。
かなり便利なプラグインです。
Contact Form 7 選択肢ごとに返信メール内容を条件分岐させる方法【Conditional Fields】文字数制限する方法
フォームタグにmaxlengthで文字数を指定するだけで文字数を制限することができます。
おまけで入力文字数をリアルタイムで表示させる方法も解説しています。
Contact Form 7で文字数制限する方法と文字数カウントを表示する方法自動返信メールのテンプレ文
コピペですぐに使える、自動返信メールのメール文のテンプレを紹介しています。
【Contact Form 7】 自動返信メールのメッセージ本文のテンプレはこれだ！サンクスページを作る方法
お問い合わせ送信完了後にサンクスページへ遷移させる方法を解説しています。
固定ページでサンクスページを作成し、functions.phpにコードを貼り付けるだけで実装できます。
【Contact Form 7】サンクスページをたったの2ステップで実装！確認画面を作る方法
「Contact Form 7 add confirm」の機能を駆使すればコードをいじらずとも、簡単に確認画面を作ることができます。
上述したサンクスページと組み合わせて使うといいでしょう。
【Contact Form 7】確認画面を作るなら、「Contact Form 7 add confirm」で！エラーメッセージを非表示にする方法
必須項目を入力していない場合や入力内容になんらかの問題がある場合にフォーム下に表示されるエラーメッセージを非表示にするコードを紹介しています。
【Contact Form 7】 エラー/送信成功メッセージを非表示にする方法自動挿入されるpタグを削除する方法
Contact Form 7で作ったフォームは自動的に至るところにpタグが挿入されます。
それによって、本来あたっていたCSSのスタイリングが効かなくなり、表示崩れが起こることが多々あります。
wp-config.phpにあるコードを追記するだけで解決できます。
Contact Form 7で自動挿入されるpタグを削除する方法【cssが効かない!?】メールアドレス確認機能を作る方法
メールアドレスの確認用入力欄をコピペで作れるコードを紹介します。
【Contact Form 7】メールアドレス確認機能をコピペで作る方法
