WordPressサイトにお問い合わせフォームを設定する方法をご紹介します。

お問い合わせフォームのプラグインが便利

WordPressサイトの場合はお問い合わせフォームのプラグインを使うとプログラムにあまり詳しくなくともお問い合わせフォームを設定することができます。

Contact Form 7を例にお問い合わせフォームの具体的な作り方をご紹介します。

お問い合わせフォームのサンプルイメージ

Contact Form 7で次のようなお問い合わせフォームを作成します。

Contact Form 7でお問い合わせフォームを作る方法

Contact Form 7をインストール・有効化する

WordPress管理画面からContact Form 7をインストール・有効化します。

お問い合わせフォームの編集画面を開く

Contact Form 7をインストール・有効化すると、WordPress管理画面のメニューに「お問い合わせ」と表示されます。
これがContact Form 7のメニューになるので、メニューを選択します。

メニューを選択するとContact Form 7で作成したお問い合わせフォームの一覧が表示されます。
サンプルで用意されている「コンタクトフォーム1」を選択します。

コンタクトフォームを選択すると、その編集画面が開きます。

お問い合わせフォームの項目を設定する

「フォーム」タブでは、お問い合わせフォームに表示する項目の設定を行います。

サンプルで設定されている内容をそのまま利用します。

<label> 氏名
    [text* your-name autocomplete:name] </label>

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

ウェブページ上に「氏名」というラベルと、氏名を入力するためのテキストボックスを自動補完機能付きで表示します。
問い合わせ時の入力が必至で、その内容は「your-name」の名前で処理されます。

<label> 氏名
    [text* your-name autocomplete:name] </label>

ウェブページ上に「メールアドレス」というラベルと、メールアドレスを入力するためのテキストボックスを自動補完機能付きで表示します。
問い合わせ時の入力が必至で、その内容は「your-email」の名前で処理されます。

<label> メールアドレス
    [email* your-email autocomplete:email] </label>

ウェブページ上に「題名」というラベルと、お問い合わせの題名を入力するためのテキストボックスを表示します。
問い合わせ時の入力が必至で、その内容は「your-subject」の名前で処理されます。

<label> 題名
    [text* your-subject] </label>

ウェブページ上に「メッセージ本文 (任意)」というラベルと、お問い合わせの内容を入力するためのテキストエリアを表示します。
入力内容は「your-message」の名前で処理されます。

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

ウェブページ上に「送信」というラベルでお問い合わせの内容を送信するボタンを表示します。

[submit "送信"]

お問い合わせフォームの送信メールを設定する

「メール」タブでお問い合わせが送信される宛先メールアドレスやその内容を設定することができます。

宛先メールアドレスはデフォルトでWordPressの「管理者メールアドレス」になっています。

こちらもサンプルの設定をそのまま利用します。

Contact Form 7のショートコードをページに埋め込む

サンプル設定でContact Form 7のショートコードをページに埋め込むと、次のようなお問い合わせフォームが表示されます。

お問い合わせフォームをテストする

お問い合わせフォームの項目を入力して送信すると、次のようなメールがWordPressの「管理者メールアドレス」へ届きます。

お問い合わせフォームのデザインを整える

初期状態では項目などがページ左寄せで小さく表示されているので、それらを大きく表示するようにCSSで整えます。

input[class~="wpcf7-text"],
textarea[class~="wpcf7-textarea"] {
    width: 100%;
    padding: 10px !important;
}

input[class~="wpcf7-submit"] {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    transition: all .4s ease-in-out;
}

input[class~="wpcf7-submit"]:hover {
    opacity: .5;
    transition: all .4s ease-in-out;
}

上記のCSSを設定すると、お問い合わせフォームの見た目が次のようになります。

以下のCSSでは、各入力項目の大きさを設定しています。

input[class~="wpcf7-text"],
textarea[class~="wpcf7-textarea"] {
    width: 100%;
    padding: 10px !important;
}

以下のCSSでは、送信ボタンの大きさを設定しています。

input[class~="wpcf7-submit"] {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    transition: all .4s ease-in-out;
}

以下のCSSでは、送信ボタンがマウスホバーされたときの挙動を設定しています。

input[class~="wpcf7-submit"]:hover {
    opacity: .5;
    transition: all .4s ease-in-out;
}

まとめ

WordPressサイトでお問い合わせフォームを作る方法をご紹介しました。

WordPressでお問い合わせフォームを作るときは、ContactForm7のようなプラグインを使うとショートコード1つで設定することができます。

弊社ではウェブサイトの制作や保守を行っています。お気軽にご相談ください。