当ブログテーマ【SWELL】を使った正直な感想 詳しくみる

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

こんにちは、さくらこです!

女の子

WordPressのお問い合わせフォームの作り方を教えてください!

このような質問にお答えします。

WordPressでお問い合わせフォームを作るなら、「ContactForm7」というプラグインを使うのがおすすめです!

さくらこ

プラグインとはWordPressの拡張機能で、ContactForm7は多くの人が使ってるメジャーなものです!

この記事では、ContactForm7を使ったお問い合わせフォームの作り方を解説したいと思います!

また、おしゃれなフォームにするためのコピペでOKなCSSデザインアレンジや、メールの設定についてもご紹介しています。

ぜひこの記事を参考に、ホームページやブログに必要なお問い合わせフォームを設置してくださいね!

目次

WordPressのお問い合わせフォームの作り方【Contact Form 7】

それではさっそく解説していきたいと思います!

プラグイン【ContactForm7】のインストール

まずはお問い合わせフォーム用のプラグイン【ContactForm7】をインストールします。

STEP
ContactForm7のインストール
  • 管理画面「プラグイン」→「新規追加」
  • 「ContactForm7」を検索
  • 「今すぐインストール」をクリック
  • 「有効化」をクリック

お問い合わせフォームを固定ページに貼り付ける

お問い合わせフォームの内容をアレンジする前に、まずはフォームを表示させていきます。

STEP
コードのコピー
  • 管理画面「お問い合わせ」
  • 「コンタクトフォーム1」を編集
  • 上の青色部分に書かれたコードをコピー
STEP
コードの貼り付け

固定ページ一覧へ移動します。

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

固定ページの作成がまだの場合は、固定ページを作成してください!「新規追加」のボタンから作成できます。

さくらこ

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

  • コードをペースト(貼り付ける)
STEP
ページの確認

ページの更新後に確認して、このように表示されていればOKです!

WordPressのお問い合わせフォーム【表示内容の設定】

お問い合わせフォームの設置が完了したら、次にフォームの内容を設定していきます。

さくらこ

最初に入っている内容のままでよければ、この設定は飛ばしていただいても大丈夫です!

お問い合わせフォームの内容設定

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

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

STEP
内容の変更

画像ではサロン用として、ご用件や電話番号などを追加しています。

記載している内容は下記のものです。

ご用件を選択してください (必須)
[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 "送信"]

不要なものは各項目の<label>~</label>までを削除してください。

STEP
ページの確認

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

さくらこ

上手く反映されていたら、これでフォームの内容設定は完了です!

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

お問い合わせフォームのデザインをおしゃれにするために、アレンジを加えていきたいと思います!

解説はWordPressテーマ「SWELL」を使用したものです。別テーマを使用中で、同じアレンジにならなかった場合はごめんなさい(汗)

お問い合わせフォームのCSSデザインアレンジ

STEP
スタイルシートを開く
  • 管理画面「外観」→「テーマファイルエディター」
  • 「SWELL CHILD」のstyle.cssになっているか確認
さくらこ

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

STEP
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);
}

色を変更する場合は、/* フォーム背景色 *//* ボタン文字色 *//* ボタン背景色 */の3か所のカラーコードを変更してください。

さくらこ

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

STEP
ページの確認

ページを更新して確認してください。

このような感じで変更されていたらOKです!

もし変更が反映されていない場合は、「キャッシュクリア」をして再度確認してみてください。

WordPressのお問い合わせフォーム【ContactForm7メールの設定】

ContactForm7には、下記の2種類のメール機能が入っています。

  1. お問い合わせがあった際に自分に送られるメール
  2. 相手に送られる自動返信メール

自動返信メールは、ユーザーにきちんとメールが届いたことを伝えるためにも、設定しておくのがおすすめです!

自分用のメール設定

STEP
メールの情報

メールの設定では、タイトル(件名)の変更もできます。

  • 「題名」の””の中に[checkbox-checkbox-choose]と入力

今回はタイトル部分に、フォームで選ぶご用件「お問い合わせorご予約」が反映されるようにしています。

もしフォームでここが無い場合は、「”お問い合わせ”」のようにすればOKです!

さくらこ

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

STEP
メールの内容

メールの内容は、それぞれの項目名が分かるように整理しておきます。

記載したのは下記の内容です。

差出人: [your-name] <[your-email]>

お名前: [your-name]
ふりがな: [your-name-kana]
メールアドレス: [your-email]
電話番号: [your-phonenumber]
お問い合わせ内容: [your-message]

-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

自動返信メールの設定

次に相手に送られる自動返信メールの設定です。

STEP
自動返信メールの項目を追加
  • 下の方にある「メール(2)」にチェックを入れる
さくらこ

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

STEP
自動返信メールの情報
  • 「題名」に「お問い合わせありがとうございます」と入力
さくらこ

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

STEP
自動返信メールの内容
  • 自動返信メールの内容を編集

画像の内容は下記の通りです。

[your-name]様

この度はお問い合わせいただきありがとうございます。

お問い合わせ内容を確認の上、3日以内に返信致しますので、しばらくお待ちくださいませ。

-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
以下の内容でメールを受け付けました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

お名前: [your-name]
ふりがな: [your-name-kana]
メールアドレス: [your-email]
電話番号: [your-phonenumber]
ご用件: [checkbox-checkbox-choose]
お問い合わせ内容: [your-message]

もしシステムにエラーがあった場合に備えて、「連絡が無かった場合は○○○.com宛に直接ご連絡ください」の一文を入れるのもおすすめです!

お問い合わせフォームを設置して大事な連絡を逃さないようにしよう!

この記事では、WordPressのお問い合わせフォームのプラグイン「ContactForm7」の設置について解説しました。

お問い合わせフォームは、ホームページやブログの運営には欠かせないものです。

少し難易度が上がりますが、もう少しカスタマイズすれば、メニュー名や日時などの予約に必要な情報を入れることもできます。

ぜひサイトを開設したら、お問い合わせフォームを導入して、大事な連絡を逃さないようにしておきましょう!

お問い合わせフォームを設置すると、「スパム」という海外からの迷惑メールが入る場合があるので、事前の対策がおすすめです!

よかったらシェアしてね!
目次