WordPress

【WordPress】「お問い合わせページ」を作る方法!([Contact Form 7] プラグインの利用で超簡単に作れます)




WordPress で記事をいくつか書いてきて気が付いた!

「あ!お問い合わせページが無いやん!」

そんなあなたに、超簡単に「お問い合わせページ」を設置する方法です。


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


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


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


[Contact Form 7] プラグインは WordPress のプラグインの新規追加で検索すると出てきます。

確認して有効化します。



なぜアイコンが山?(笑)


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


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



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

( [コンタクトフォーム(お問い合わせフォーム)] を新規作成します。)


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


お問い合わせの項目を作成する画面です。



  • コンタクトフォームの名前を入力します。(自分が認識するための名前なので公開はされません。)
  • 配置したい項目を追加(または削除)します。基本的な項目は配置済なので、基本的には、そのままでも構いません。

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


メールの送信先(どこあてにメールを送るか)や、送信するメールの定型フォーマットを設定します。



[メール] タブをクリックします。


[送信先]メールを送信する先(受取先)のメールアドレスです
[送信元]メールの送り元を入力します。
ドメイン(@以下)は自身のドメインである必要があります
[題名]メールタイトルです。
"[your-subject]" に、投稿フォームで入力された題名を置換します
[追加ヘッダー][Reply-To: [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 に変えて記入します。


保存して完成です。


まとめ


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


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

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



Enjoy!おくる~♪おくるーよー♪めーる~を~おくる~♪




WordPress の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

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