【WordPress】お問い合わせページと送信後のサンクスページを簡単に作る方法！（Contact Form 7 プラグイン）

ブログサイトを運営していく中でユーザーからのアプローチの一つに「お問い合わせページ」があります。

ユーザーがサイト管理者への質問やお仕事の依頼などをするための必要な窓口になり、また、Google AdSense を申請するうえでも必要な機能とも言われています。

ブログ・サイトにとっては、設置は必須なページと言えるでしょう。

ポイント

本記事では、

「Contact Form 7」プラグインを利用した

「お問い合わせページ」の設置方法を紹介します。

＼ココナラ成功パターンを詳しく見たい方はこちらをクリックしてください／

1 「お問い合わせページ」を設置する方法と手順
2 作成したお問い合わせページ
3 サンクスページを追加する
4 まとめ：お問合せページ

「お問い合わせページ」を設置する方法と手順

お問い合わせページ（お問い合わせフォーム）を作る方法で最も簡単なのは「Contact Form 7」プラグインを使う方法です。

step
1プラグインをインストールする

「Contact Form 7」プラグインを利用します。「Contact Form 7」プラグインは、WordPress の管理画面から「プラグイン」→「新規追加」でインストールできます。

プラグインを確認して有効化します。

アイコンが山なのが特徴のプラグインです。

step
2お問い合わせフォームを新規作成する

プラグインを有効化すると、WordPress のメニューに「お問い合わせ」が追加されます。

「お問い合わせ」 → 「新規作成」をクリックします。

※ 「コンタクトフォーム（お問い合わせフォーム）」を新規作成します。

step
3コンタクトフォームの項目を整える

お問い合わせの項目を作成する画面を表示します。

コンタクトフォームの名前を入力します。（公開はされません。）
配置したい項目を追加（または削除）します。基本的な項目は配置済なので、そのままでも構いません。

項目の初期値

<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 "送信"]

項目	概要
text* your-name autocomplete:name	お相手の「お名前」を入力する欄を用意します。
email* your-email autocomplete:email	お相手の「メールアドレス」を入力する欄を用意します。
text* your-subject	お問合せの「題名」を入力する欄を用意します。
textarea your-message	お問合せの「本文」を入力する欄を用意します。
submit "送信"	「送信」ボタンです。

step
4メール送信先などを設定します

メールの送信先と、送信するメールの定型フォーマットを設定します。

「メール」タブをクリックします。

項目	概要
「送信先」	メールを送信する先（受取先）のメールアドレスです
「送信元」	メールの送り元を入力します。ドメイン（＠以下）は自身のドメインである必要があります
「題名」	メールタイトルです。「your-subject」に、投稿フォームで入力された題名を置換します
「追加ヘッダー」	「your-email」で、メールを返信する際の宛先が、投稿フォームで入力されたメールアドレスになります
「メッセージ本文」	メールの本文です

各項目の内容を確認してページ下部の「保存」ボタンをクリックして保存します。

step
5ショートコードをコピーします

記事や、固定ページに投稿フォームを埋め込むための「ショートコード」を確認します。

コンタクトフォームを保存すると、画面上に「ショートコード」を表示します。ショートコードをコピーして利用します。

step
6記事や固定ページにショートコードを埋め込みます

お問い合わせフォームを埋め込みたい記事（または固定ページ）に、ショートコードを入力します。

プレビューで表示して確認してください。

問題なく表示、動作していれば、お問い合わせページ完成です。

作成したお問い合わせページ

完成したページのイメージです。

よいお問い合わせがたくさん来るといいですね(^^)/

サンクスページを追加する

メールを送信（送信ボタンを押す）してメールの送信が成功すると、画面の下側に「ありがとうございます。メッセージは送信されました。」を表示します。

メール送信が成功した場合に「サンクスページ」に遷移したい場合は次の手順で設定します。

step
1サンクスページを用意する

固定ページで、「サンクスページ」を作ります。

step
2サンクスページに遷移するスクリプトを記入する

「Contact Form 7」プラグインのフォームの設定で、次のスクリプトを記入します。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://xxx/';
}, false );
</script>

ふと赤の「http://xxx/」は、サンクスページの URL に変えて記入してください。

保存して完成です。

WordPress のお役立ちテクニックはこちら

まとめ：お問合せページ

お問い合わせページ（お問い合わせフォーム）を作る方法で最も簡単なのは「Contact Form 7」プラグインを使う方法です。

ポイント

お問合せページを作るためには「Contact Form 7」プラグインを使う
サンクスページを利用する場合は、スクリプトを追記する

問い合わせページを作って、たくさん問い合わせくる人気ページを作りましょう。

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る