お問い合わせフォームの作り方を解説！幅いっぱいに広げるカスタマイズも紹介

ブログやホームページを開設したらお問い合わせページを作成しましょう。お客様からのお問い合わせや、アドセンスの申請でも必要になってきます。

作成するのは、ほんの15分くらいあれば終わるので、ささっと解説していきたいと思います。

ちなみに今回紹介するのはブロガー向けの簡単なお問い合わせフォームになります。企業などのお問い合わせフォームに関しては、もう少し凝った方が良いかもしれません。

お問い合わせフォームの作成

今回は「Contact Form 7」というプラグインになります。お問い合わせフォーム作成プラグインでは有名で、多くの方がこのプラグインで作成しています。

お問い合わせフォームの項目としてはこの四つになりますが、カスタマイズもできるので、自分の好きな項目を入力することが可能です。

• お名前
• メールアドレス
• 題名
• お問い合わせ内容

作成方法を解説

STEP

プラグインをダウンロード

管理画面から「プラグイン」→「新規追加」から「Contact Form 7」と入力。出てきたら「今すぐインストール」をクリックします。

STEP

お問い合わせをクリック

インストールすると管理画面左に「お問い合わせ」という項目が出てくるので、クリックするとContact Form 7のページに。すでに「コンタクトフォーム1」という項目があるので、それをクリックします。

STEP

フォームを編集

このフォームの名前を決めます。デフォルトでは「コンタクトフォーム1」となっていますが、別にそのままでも構いません。私は「お問い合わせ」に変更しています。

ますはフォームの編集から。といってもデフォルトで写真のような氏名・メールアドレスなどが入力されているので、このままでも全然使えます。

ちなみにこのまま使うとこんな感じになります。

これでよければこのまま使っても大丈夫です。そのままでよければ右上の「保存」をクリック。青い部分に書かれたコードを全てコピーします。

STEP

お問い合わせページに移動

固定ページから「お問い合わせ」を作成。「HTMLを編集」というブロックを選択し、その中に先程コピーしたコードを入力します。

後はパーマリンクなどを設定したら「公開」をクリック。これで一通りの設定が完了しました。

ちなみに先程の感じだと左に寄っていたり、テキストエリアの大きさがばらばらだったりと見栄えが悪いので、少しカスタマイズしていこうと思います。それは後程解説。

編集方法

何か追加したい時や編集したい時は、フォーム上にある「テキスト」や「メールアドレス」の項目を使います。

例えば上の「テキスト」というボタンをクリックすると、このような画面が出てきます。これは氏名や題名などの一行のテキスト項目を作りたい時に使用します。

まずは一番上の項目タイプ。必須にチェックを入れれば、お問い合わせフォームで何かを入力しないと送信できないようになります。その時は入力してくださいという表示が出ます。

デフォルトではメッセージ本文（任意）以外は必須項目になっています。text右の*がそのマークになります。

名前はそのままでも変えても大丈夫です。

デフォルト値は、入力しておけば、お問い合わせフォームを入力する時に、すでにデフォルト値に登録されている文字が入力された状態になります。

その下にある「このテキストを項目のプレイスホルダーとして使用する」にチェックをいれると、項目に薄い字ですでに入力された状態になります。

デフォルト値と違って文字を入力し始めると消えるので、状況次第でどちらか選ぶといいでしょう。

その下のAkismetという項目。これはアンチコメントやスパムメールを除外してくれる機能になります。ただ設定に関してはAkismetプラグインを導入しないといけないなど…少しややこしいので、詳しくは調べてみて下さい。

ID属性やクラス属性は、細かくカスタマイズしたい時に使います。この後ちょっとカスタマイズするので、詳しく解説していきます。

設定が完了したら「タグを挿入」をクリック。するとカーソルがある場所に[○○]が挿入されます。

見た目をカスタマイズ

先程の感じではちょっと…という方に向けてカスタマイズしていきたいと思います。ちなみに完成形はこちら。

画面の都合上「お名前」の項目がないですが、実際は上にあります。

変更した部分は…

1. 入力ボックスの幅を画面幅いっぱい
2. ボックスと文字の間隔を広げる
3. 送信ボタンのカスタマイズ

input {
width: 100%;
margin-bottom: 10px;
}

textarea {
width: 100%;
}

.submit-1 {
    width: 200px;
    height: 50px;
    cursor: pointer;
    background-color: #1B224C;
    color: #FFFFFF;
    border-radius: 10px;
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin: 48px auto 0 auto;
}

input[type=submit] {
  -webkit-appearance: none;
  border-radius: 0;
}

このコードを固定ページのお問い合わせ投稿部分の下の「CSS」という項目に入力します。

inputが一行入力のボックスになります。widthを100％にしているので、スマホでもパソコンでも画面幅いっぱいに広がります。

その下のtextareaは複数行ボックスになります。お問い合わせ内容のボックスの部分ですね。そこもinputと同じく画面幅いっぱいにするコードです。

その下のsubmit-1ですが、ここだけはお問い合わせフォームの編集部分で入力してもらいたい項目になります。

一番下の送信ボタンの編集画面でクラス属性に「sumbit-1」と入力。

フォーム画面ではこのような形になります。

一番下のinput[type=submit]ですが、これはiPhone等でボタンの周りが勝手に丸くなるのを防ぐコードになります。別に気にしなければそのままでもいいんですけどね。

関連記事

あわせて読みたい

0からブログを始める方法を解説！開設から運営まで全てがわかります 初心者向け！ブログの始め方を解説！開設から運営まで全てがわかります。必要最低限の項目を一つづつ紹介。これを見るだけでほとんどの事がわかります。