WordPress

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

広告:ページ内にてアフィリエイト広告を利用しています。

お問い合わせページを作る方法(Contact Form 7)

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

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

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

ポイント

本記事では、

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

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

おすすめ副業

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

PR

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

お問合せページを設置する方法

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

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

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

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

Contact Form 7

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

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 もっと!お役立ちテクニック

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

まとめ:お問合せページ

お問合せページのまとめ

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

ポイント

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

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

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

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

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

続きを見る

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

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

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

続きを見る

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

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

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

続きを見る

この副業
アフィリエイトスクール
ノートパソコン

Web サイト、ブログ関連の記事一覧はこちらをクリック!

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 81 番

吉


今日のメッセージ

苦難を乗り越える方法は我慢ではなく、ユーモアです。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記