こんにちは。TAGUCHIです。
今回は、WordPressでお問い合わせフォームを作るときによく使用するプラグイン「Contact Form7」のカスタマイズ方法に関する記事です。
ホームページを作る際、どのサイトでもほぼ確実に作ることになる、お問い合わせフォーム。
毎回コードを書くの面倒だし、忘れちゃうなあと思って記事に残しておこうと思いました。
この記事で扱うフォームはシンプルなものなので、必要に応じてカスタマイズをしてみてくださいね＾＾
Contact Form 7とは
Contact Form 7は、WordPressサイトに簡単に問い合わせフォームを追加できる人気のプラグインです。このプラグインを使用すると、カスタマイズ可能なフォームを作成し、訪問者からの情報を収集できます。無料で使えることから、多くのサイトで利用されています。
制作者が日本人の方なので、非常に使いやすいプラグインだなと思います。
実装するフォームの説明
それでは、今回実装するフォームの説明です。
- 氏名
- 電話番号
- メールアドレス
- プルダウンメニュー
- PDFやWORDファイルをドロップダウンで追加できる機能
これらのフィールドを含むフォームを実装するための具体的な手順を紹介します。
Contact Form 7の準備をしよう
Contact Form 7を使うためには、プラグインをインストールして有効化する必要があります。以下の手順に従って準備を進めましょう。
プラグインのインストール
WordPressのダッシュボードにログインします。
「プラグイン」 > 「新規追加」をクリックします。
検索バーに「Contact Form 7」と入力し、表示されるプラグインをインストールします。
インストールが完了したら「有効化」ボタンをクリックします。
フォームの作成
ダッシュボードの左メニューから「お問い合わせ」 > 「新規追加」をクリックします。
新規追加をクリックすると、新しいフォームが表示されるので、下記のコードを貼り付けます。
<div class="contact-form">
[text* your-name placeholder "氏名"]
[tel* your-phone placeholder "電話番号"]
[email* your-email placeholder "メールアドレス"]
[select* your-option "選択してください" "オプション1" "オプション2" "オプション3"]
[file your-file limit:10mb filetypes:pdf|doc|docx]
[submit "送信"]
</div>
次に、CSSコード追加します。追加する場所は、スタイルシートもしくは、カスタマイズ ＞ 追加CSSに貼り付けましょう。このデザインは一般的なものなので、コードを変更することで自由にカスタマイズできます！
.contact-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact-form input,
.contact-form select,
.contact-form button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact-form button {
background-color: #0073aa;
color: white;
border: none;
cursor: pointer;
}
.contact-form button:hover {
background-color: #005177;
}
お問い合わせページにショートコードを設置
次に、作成したフォームのショートコードを取得して、お問い合わせページに設置をしましょう。
ショートコードは、フォームを保存したときに表示される下記のコードになります！
このコードをコピーして、お問い合わせフォームに設置します。
これで固定ページを開くと、お問い合わせフォームが完成していることがわかります！
お問い合わせフォームのボタンの色や背景色は、CSSで調整が可能です！
自動返信メールの設定
お問い合わせフォームを設置できた！と思ってよく設定をし忘れていたもの、それが自動返信メールです。
この設定をすることで、お問い合わせフォームからお問い合わせをしてくれた人に、お礼のメッセージを送れるようになります。
次はその設定をやっていきましょう！
まずは、「メールタブ」をクリックします。
次に、各フィールドの設定をします。
送信先フィールド： [your-email] を入力します。
送信元フィールド：自分のメールアドレスを入力します。
題名フィールド：適切な件名を入力します（例：「お問い合わせありがとうございます」）。
追加ヘッダーフィールド： Reply-To: [your-email] を追加します。
メッセージ本文フィールドには、返信内容を記載します。
[your-name] 様,
お問い合わせありがとうございます。以下の内容で受け付けました。
- 氏名: [your-name]
- 電話番号: [your-phone]
- メールアドレス: [your-email]
- 選択したオプション: [your-option]
追ってご連絡いたします。
よろしくお願いいたします。「Mail (2)」タブをクリック
自動返信メールの内容を設定します。同様の手順で設定できますが、送り先を管理者のメールアドレスに変更します。
これで全ての設定が完了です！
お問い合わせフォームを簡単に作れる、WordPressのプラグインってすごいなと感じますね笑
あとはテスト送信をやってみて問題がなければOKです！
Contactform7以外にも簡単にお問い合わせフォームを作るプラグインはたくさんありますので、色々と使ってみていただいて最終的に使うプラグインを決めてもらえればと思います！
最後までお読みいただきありがとうございました！
良い制作ライフを〜！