【WordPressでオリジナルサイトを作ろう】⑭コンタクトフォーム編

「Contact Form 7」のインストール

まずは「Contact Form 7」をインストールします。

管理画面メニューの「プラグイン」をクリックしてプラグインのページを開いた後、「新規追加」ボタンをクリックします。

プラグインの検索窓に「Contact Form 7」と入力すると、Contact Form 7が表示されるので、「今すぐインストール」ボタンをクリックします。

インストールが終わるとボタンが「有効化」に変わるので、そのままクリックしてプラグインを有効化します。

「Contact Form 7」の設定

続いて、「Contact Form 7」の設定を行います。

管理画面メニューに「お問い合わせ」というメニューが追加されているので、クリックして開きます。
さらに、デフォルトで設定されている「コンタクトフォーム 1」というリンクをクリックします。

以上で「Contact Form 7」の設定は完了です。

ただし、この状態ではまだメールの送信ができないので、メールを送信するために必要なSMTPサーバの設定を行います。
SMTPサーバについても、WordPressには「WP Mail SMTP」というメジャーなプラグインがあるのでそちらを使用します。

「WP Mail SMTP」のインストール

SMTPサーバを使用するためのプラグイン「WP Mail SMTP」をインストールします。

プラグインの新規追加画面で「WP Mail SMTP」と検索すると上の方に表示されるので、「今すぐインストール」→「有効化」の順にクリックしていきます。

「WP Mail SMTP」の設定

「WP Mail SMTP」の設定を行っていきます。

管理画面のメニューに「WP Mail SMTP」が追加されているので、クリックして設定画面を開きます。
「送信先メールアドレス」「フォーム名」は送信元となるメールアドレスと名前を設定します。
「返信先」のチェックボックスにチェックを入れます。

SMTPの設定です。

おそらく実務ではサーバ上で独自ドメインのサイトを運営するケースが多いと思いますが、その場合は「メーラー」の「その他のSMTP」を選択します。

「SMTP ホスト」や「SMTP ポート」などは使用するメールアドレスのサーバ情報をもとに設定してください。
「SMTP ユーザー名」と「SMTP パスワード」は、メールアドレスとメールアドレスのパスワードを設定します。

今回は一旦、空のまま進みます。

お問い合わせページの作成

それでは、お問い合わせページを作っていきましょう。

先ほど作ったフォームを呼び出すために、コンタクトフォームの下記の部分をコピーしておきます。

管理画面メニューの「固定ページ」→「新規追加」で新規登録ページを開きます。

「タイトル」「URL スラッグ」を入力していきます。
「本文」には、先ほどコピーしたコードを貼り付けます。

入力が終わったら、「公開」ボタンをクリックして記事を公開します。

CSSのコーディング

最後に、コンタクトフォーム部分のCSSをコーディングします。

「style.css」に以下のコードを追記ます。

    style.css
    
/*-------------------------------------------
contact form
-------------------------------------------*/
input,
textarea {
  width: 100%;
  border: solid 1px #c8c8c8;
  padding: 8px;
  margin-bottom: 10px;
}
input[type="submit"] {
  background-color: #333;
  color: #fff;
  padding: 15px 0;
}
input[type="submit"]:hover {
  opacity: 0.7;
}
    
  

お問い合わせページの確認

お問い合わせページを表示してみましょう。

上記の通り表示されていればOKです。

「WP Mail SMTP」でSMTPの設定を行った方は、メール送信の確認もしてみてください。