サイトやブログを運営する上で、お問い合わせページは必須ですよね。
当サイトでも、お問い合わせフォームを設けています。
ということで、今回はWordPressでお問い合わせフォームを作る方法をご紹介します。
のじはた絶対に作っておいたほうがいいですよ！
この記事の目次
お問い合わせページを作る手順
カスタマイズほど難しくありません。パパッと終わらせて記事を書くことに集中しましょう！
固定ページを新規作成する
まずは、お問い合わせフォームのページを作りましょう。固定ページを作成します。
| タイトル | お問い合わせ |
| パーマリンク | contact |
完成したら、何も書かずに下書きを保存しましょう。まだ公開はしません。
プラグインのダウンロード
今回は、Contact Form 7を使用しお問い合わせページを作成します。
日本の方が作成されたプラグインで、日本語に対応しています。
まずはContact Form 7をダウンロードしましょう。
ダッシュボード→プラグイン→新規追加→Contact Form 7を検索→ダウンロード&有効化
有効化ができたら、すぐに使えるような状態になりますが、少し手を加えます。
reCAPTCHAを導入しよう
BOTなどによるいたずらを防ぐために、reCAPTCHA(リキャプチャ)というものを導入します。Googleが提供するサービスです。
では、実際に設定していきましょう。
導入する手順
はじめにこのような画面になります。
インテグレーションのセットアップを行いましょう。
次に、2つのキーを取得する必要があります。reCAPTCHAの公式サイトへ行きましょう。
アクセスできたら、Admin Consoleを押します。
ログインしていない場合には、Googleアカウントにログインします。
まず+ボタンを押します。すると以下のような画面になります。
バージョンはv3を選択します。画像を選んだりする必要はなく、自動的にBOTかどうかを見極めます。必要事項を記入すればすぐに使えます。
次に、設定ボタンを押します。
すると、サイトキーとシークレットキーが表示されます。先程の画面に貼り付けましょう。
そうすれば、サイト全体にreCAPTCHAが読み込まれ、右下に表示が出ているはずです。
お問い合わせフォーム本体を作る
まず、タイトルを入力します。公開はされないので、分かりやすいものにしておきましょう。
次に、フォームのテンプレートを編集します。
<label> お名前 (必須)
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 題名
[text your-subject] </label>
<label> メッセージ本文
[textarea your-message] </label>
[submit "送信"]
これで大丈夫なのですが、入力してもらう項目全てを必須にしてみるとこうなります。
<label> お名前 (必須)
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 題名 (必須)
[text* your-subject] </label>
<label> メッセージ本文 (必須)
[textarea* your-message] </label>
[submit "送信"]
SANGOで送信ボタンのデザインを変える方法
初期状態では、何の装飾も施されていないボタンです。そこで送信ボタンを以下のように書き換えます。
[submit "送信"]↓
[submit class:raised class:blue-bc "送信"]
そして、まとめたのがこちらです。
<label> お名前 (必須)
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 題名 (必須)
[text* your-subject] </label>
<label> メッセージ本文 (必須)
[textarea* your-message] </label>
[submit class:raised class:blue-bc "送信"]
お問い合わせページにフォームを置く
コンタクトフォームを作成し終わると、以下のようなショートカットコードが発行されます。
{contact-form-7 id="0000" title="タイトル"}
こちらを、先程作成した固定ページに貼り付けます。
ただ、貼り付けるだけで表示されます。
まとめ
いかがでしたでしょうか。
今回はサイトやブログを運営する上で重要なお問い合わせページの作り方をご紹介しました。
最後までご覧いただきまして、ありがどうございました。
コメントを残す