初心者でもContactForm7で作れる!シンプルなお問合せページの作り方(デザインのカスタマイズ可能)

2019年5月31日ContactForm7カスタマイズ,ページに使える機能・デザイン

最近では、どのようなサイトでもお問合せフォームを設置することがSEO的にも有利だと言われ、必須のページになってきています。

基本的なお問合せフォームの作り方から、さまざまな質問項目がある予約フォームや質問票などの作り方まで!

プログラミングがわからない初心者でもつくれる方法をご紹介します。

アレンジが不要な部分はコピペでOK!

お問合せContactForm7

お問合せプラグインContact Form 7とは?作成からカスタマイズまでの流れ

Contact Form 7をインストールします。

もっとも有名なお問合せ系のプラグインで、日本製なため日本語での説明もわかりやすいです。

メールアドレスと内容を入力して送信するだけのお問合せフォームなら、もっと簡単につくれるプラグインもあります。

ですが、お問合せ受付の確認メールを自動送信したり、自分で項目やデザインを自由に変えたい場合にはContact Form 7が一番です。


Contact Form 7ではショートコードを使ってフォームを作っていきます。

フォームを作るためのソースコード(HTML)を自分で書かずに、Contact Form 7で決められているショートコードを書くだけで自動的にフォームを出力してくれます。

フィールドの上にあるボタンから作成したいフォーム項目のタイプを選択すると、フォーム項目の詳細を設定するポップアップが出てきます。

ContactForm7のフォーム作成

ここで、フォーム項目の名前とプレイスホルダー(入力するところに表示されるテキスト)、CSSカスタマイズのためのクラスとIDなどを設定します。

するとContactForm7のフィールドにショートコードが挿入されます。

[text* your-name id:your-name class:contact-text placeholder "おなまえ"]

このようにして作ったお問合せフォームをページで表示すると、自動的にコードが作られて次のようになります。

フォーム部分はショートコードでつくられますが、ラベル(何を入力する項目なのかを示す部分)やデザインはHTMLでショートコードの周りに追加していきます。

<label class="contact-text"><span class="must">必須</span></label>
[text* your-name id:your-name class:contact-text placeholder "おなまえ"]

すると、ラベルや必須項目であることを示すマークなどが追加され、お問合せフォームになります。

こうしてできたフォームを設定したclassidを使ってCSSカスタマイズしたら、自分の思い通りのオリジナルなお問合せフォームが作れます。

コピペでOK!基本のお問合せフォームを作る

次のようなシンプルなお問合せフォームを作れます。

お問合せサンプル

プラグインContact Form 7をインストールしたら、ダッシュボードのメニューにお問合せができるので、新規作成します。

好きなお問合せの名前をタイトルとして入力し、フィールドに次のコードをコピペします。

<p>当サイトに関するお問合せ・ご連絡はこちらでお願いいたします。</p>

<label>お名前<span class="must">必須</span>
[text* your-name]</label>

<label>メールアドレス<span class="must">必須</span>
[email* your-email] </label>

<label>メッセージ本文
[textarea your-message] </label>
[submit "送信"][

1行目の説明文はお好きな文言に変えてください。

できたお問合せフォームを保存したら、お問合せフォームのショートコードをコピーして、お問合せフォームのための固定ページを作成し、本文にペーストして保存するとお問合せページになります。

次にデザインのカスタマイズをしていきます。

CSSカスタマイズでお問合せフォームのデザインを調整

外観CSSカスタマイズに次のコードを入力します。

/**/
/*お問合せフォーム*/
/**/

/* labelで囲まれた部分をすべて全幅に */
.wpcf7-form label{
width:100%;
}
/* 送信ボタン */
.wpcf7-form [type=submit]{
background-color:#ad8c5e;
color:#fff;
font-size:16px;
font-weight:bold;
width:100px;
margin-top:1em;
box-shadow:1px 1px 3px rgba(0,0,0,0.3);
border:1px solid #ad8c5e;
border-radius:0px;
}
/* 送信ボタン(ホバー) */
.wpcf7-form [type=submit]:hover{
background-color:#e5d7c7;
color:#ad8c5e;
}
/* 必須マーク */
span.must{
background-color:#ff6798;
color:#fff;
font-size:14px;
padding:1px 10px;
border-radius:30px;
margin-left:5px;
}

colorbackground-colorなどを自分のサイトに合わせて変更しましょう。

ボタンデザインはコピペでOKなテンプレートがたくさんあるので、検索してみましょう。

CSS ボタン デザイン

さやっと。では、紹介してるコピペCSSコードでどの{}内のCSSを書き換えればどこのデザインが変えられるかを解説しています。

変えたい部分の{}内のコードで赤色になっている部分(CSSプロパティ)をググると、解説記事が出ます。

CSSの知識がなくても、変えたい部分のプロパティを一つ一つ調べればカスタマイズ方法がわかります。

どのように書けばどんなデザインになるのかわかるので、コピペした元のコードも参考にしながらすぐ変えられる!

CSS プロパティ名で検索すると解説記事が見つかります。

CSS background

お問合せフォームの確認メールを設定

お問合せの編集ページでメールに移動したら、各項目に入力していきます。

送信先→お問合せが届いたことを確認するために使う自分のメールアドレス

送信元→変える必要なし

題名→[your-subject]という項目は使っていないので削除

メッセージのフィールドは題名:[your-subject]を削除し、あとは自分が見やすいように自由に調整します。

[your-name][your-email]の部分にはお問合せをしたユーザーが入力した情報が入ります。

差出人: [your-name]
連絡先:[your-email]

メッセージ本文:
[your-message]

確認メールを送信する場合はメール(2)を使用する

お問合せしてくれたユーザーに確認メールを送信する場合は、メール(2)を使用にチェックを入れます。

送信先→変える必要なし。お問合せしてくれたユーザーに送信されます。

送信元→サイト名とWordPressで使っているアドレスが表示されます。必要なら変えます。

題名→「お問合せありがとうございます」などの題名を付けます。

メッセージは自分のサイトの目的に合わせて入力します。

[your-name] 様 お問合せありがとうございます。
以下の内容でお問合せを受け付けました。


=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
[your-message]
=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
ご連絡先:[your-email]

通常3日以内にご対応いたしますので、お待ちください。

お問合せフォームが設置は、まともなサイトとしての準備として必須

以上で簡単なお問合せフォームが作成できました。

これで、サイトに興味を持ってくれたユーザーから意見や仕事の依頼をもらうことができます。

ContactForm7は他にも様々な情報をユーザーに入力してもらって予約フォームやアンケートなどに利用できるので、自分のサイトの目的に合わせて使っていきましょう。

さやアイコン
さや

さやに相談してみる

自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい!というとき
お気軽にご相談ください!

さやっとウェブ制作サポート

記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応!

ご利用ガイド