WordPressのお問い合わせフォームの作り方【CSSデザインアレンジも】

こんにちは、Sakiです!

WordPressのお問い合わせフォームの作り方を教えてください!
このような質問にお答えします。
WordPressでお問い合わせフォームを作るなら、「ContactForm7」というプラグインを使うのがおすすめです!



プラグインとはWordPressの拡張機能で、ContactForm7は多くの人が使ってるメジャーなものです!
この記事では、ContactForm7を使ったお問い合わせフォームの作り方を解説したいと思います!
また、おしゃれなフォームにするためのコピペでOKなCSSデザインアレンジや、メールの設定についてもご紹介しています。
ぜひこの記事を参考に、ホームページやブログに必要なお問い合わせフォームを設置してくださいね!
- 初心者でも直感で簡単に操作できる
- コードや難しい知識不要
- ホームページにもブログにも対応
- Webデザイナーに嬉しい100%GPL
- 利用者も多い人気テーマ
WordPressのお問い合わせフォームの作り方【Contact Form 7】
それではさっそく解説していきたいと思います!
プラグイン【ContactForm7】のインストール
まずはお問い合わせフォーム用のプラグイン【ContactForm7】をインストールします。


- 管理画面「プラグイン」→「新規追加」


- 「ContactForm7」を検索
- 「今すぐインストール」をクリック


- 「有効化」をクリック
お問い合わせフォームを固定ページに貼り付ける
お問い合わせフォームの内容をアレンジする前に、まずはフォームを表示させていきます。


- 管理画面「お問い合わせ」
- 「コンタクトフォーム1」を編集


- 上の青色部分に書かれたコードをコピー
固定ページ一覧へ移動します。


- 固定ページのお問い合わせ用ページを編集



画像は「お問い合わせ」というページ名ですが、お問い合わせ用ということが分かれば何でも大丈夫です!


- コードをペースト(貼り付ける)


ページの更新後に確認して、このように表示されていればOKです!
WordPressのお問い合わせフォーム【表示内容の設定】
お問い合わせフォームの設置が完了したら、次にフォームの内容を設定していきます。



最初に入っている内容のままでよければ、この設定は飛ばしていただいても大丈夫です!
お問い合わせフォームの内容設定


- 管理画面「お問い合わせ」からフォーム編集を開く
- 上のタイトルを分かりやすいものに変更



「フォーム」のタブを編集します!


画像ではサロン用として、ご用件や電話番号などを追加しています。
記載している内容は下記のものです。
ご用件を選択してください (必須)
[checkbox* checkbox-checkbox-choose exclusive use_label_element "お問い合わせ" "ご予約"]
<label> お名前 (必須)
[text* your-name] </label>
<label> ふりがな (必須)
[text* your-name-kana] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 電話番号 (任意)
[tel your-phonenumber] </label>
<label> お問い合わせ内容をご記入ください
[textarea your-message] </label>
[submit "送信"]


ページを更新して、設定通りに反映されているか確認してください!



上手く反映されていたら、これでフォームの内容設定は完了です!
WordPressのお問い合わせフォーム【CSSデザインアレンジ】
お問い合わせフォームのデザインをおしゃれにするために、アレンジを加えていきたいと思います!
解説はWordPressテーマ「SWELL」を使用したものです。別テーマを使用中で、同じアレンジにならなかった場合はごめんなさい(汗)
お問い合わせフォームのCSSデザインアレンジ


- 管理画面「外観」→「テーマファイルエディター」


- 「SWELL CHILD」のstyle.cssになっているか確認



なっていない場合は右側から変更できます!


- 下記のコードをコピーして貼り付ける
- 「ファイルを更新」をクリック
/*---------------お問い合わせページ---------------*/
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-name-kana"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-phonenumber"]
{
width: 100%;
height: 35px !important;
background: #fff;
}
.wpcf7 textarea[name="your-message"] {
width: 100%;
height: 300px !important;
background: #fff;
}
.wp-block-contact-form-7-contact-form-selector {
background-color: #EEEDFA;/* フォーム背景色 */
padding: 20px;
}
.wpcf7 input[type="submit"] {
width:50%;
padding:10px;
margin-top: 30px;
margin-left: 25%;
color: #fff;/* ボタン文字色 */
border-radius:10px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #e6b8c8;/* ボタン背景色 */
transition: 0.3s;
}
.wpcf7-submit:hover {
opacity: 0.7;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}



カラーコードの検索におすすめのサイトは、下記でご紹介しています。ぜひ参考にしてください!




ページを更新して確認してください。
このような感じで変更されていたらOKです!
WordPressのお問い合わせフォーム【ContactForm7メールの設定】
ContactForm7には、下記の2種類のメール機能が入っています。
- お問い合わせがあった際に自分に送られるメール
- 相手に送られる自動返信メール
自動返信メールは、ユーザーにきちんとメールが届いたことを伝えるためにも、設定しておくのがおすすめです!
自分用のメール設定


メールの設定では、タイトル(件名)の変更もできます。
- 「題名」の””の中に[checkbox-checkbox-choose]と入力
もしフォームでここが無い場合は、「”お問い合わせ”」のようにすればOKです!



この記事から[checkbox-checkbox-choose]をコピーするか、フォームの上にあるタグのコピーでも大丈夫です!


メールの内容は、それぞれの項目名が分かるように整理しておきます。
記載したのは下記の内容です。
差出人: [your-name] <[your-email]>
お名前: [your-name]
ふりがな: [your-name-kana]
メールアドレス: [your-email]
電話番号: [your-phonenumber]
お問い合わせ内容: [your-message]
--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
自動返信メールの設定
次に相手に送られる自動返信メールの設定です。


- 下の方にある「メール(2)」にチェックを入れる



メール(2)が自動返信メールの設定箇所です!


- 「題名」に「お問い合わせありがとうございます」と入力



この部分はお好きなタイトルで大丈夫です!


- 自動返信メールの内容を編集
画像の内容は下記の通りです。
[your-name]様
この度はお問い合わせいただきありがとうございます。
お問い合わせ内容を確認の上、3日以内に返信致しますので、しばらくお待ちくださいませ。
--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
以下の内容でメールを受け付けました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
お名前: [your-name]
ふりがな: [your-name-kana]
メールアドレス: [your-email]
電話番号: [your-phonenumber]
ご用件: [checkbox-checkbox-choose]
お問い合わせ内容: [your-message]
お問い合わせフォームを設置して大事な連絡を逃さないようにしよう!
この記事では、WordPressのお問い合わせフォームのプラグイン「ContactForm7」の設置について解説しました!
お問い合わせフォームは、ホームページやブログの運営には欠かせないものです。



少し難易度が上がりますが、カスタマイズ次第では、サービスのメニュー名や日時などの予約に必要な情報を入れることもできますよ!
WordPressでサイトを開設したら、ぜひお問い合わせフォームを導入して、大事な連絡を逃さないようにしておきましょう!

