色々な設定方法をご紹介します。

WordPress(ワードプレス)の固定ページへコンタクトフォーム(Contact Form 7)を設置する方法 その4

2016年12月01日
WordPress(ワードプレス)の様々な設定方法の紹介です。

Contact Form 7を使ってお問合せフォームを設置します。 

Contact Form 7を使ってお問合せフォームを設置する その1 はこちら
Contact Form 7を使ってお問合せフォームを設置する その2 はこちら
Contact Form 7を使ってお問合せフォームを設置する その3 はこちら

今回は出来上がったフォームに入力された内容を正しくメールに送信されるように設定します。

 

1.ダッシュボード>お問合せ>コンタクトフォーム をクリックします。

1.ダッシュボード>お問合せ>コンタクトフォーム をクリックします。

 

2.WordPress(ワードプレス)の固定ページへコンタクトフォーム(Contact Form 7)を設置する方法その1で作った、「練習お問合せ」の編集をクリック

2.WordPress(ワードプレス)の固定ページへコンタクトフォーム(Contact Form 7)を設置する方法その1で作った、「練習お問合せ」の編集をクリック

 

3.先ほどの編集画面になりましました。赤枠の”メール”をクリックします。

3.先ほどの編集画面になりましました。赤枠の”メール”をクリックします。

 

4.メール設定の画面です。最初に入っているテキストは全て消してしまいます。

4.メール設定の画面です。最初に入っているテキストは全て消してしまいます。

 

5.上の赤枠内のタグを利用して、問合せ内容をメールに反映します。

5.上の赤枠内のタグを利用して、問合せ内容をメールに反映します。

 

送信先→
ご自分のメールアドレスを入力する

送信元→
問合せを書いた人のメールアドレスを反映させます。
ここでは、[your-email]と入力する。

題名→
問い合わせが来た時にわかる題名を入力する。

追加ヘッダー →
Cc:メールアドレス を入力するとコピーが送信されます。
また、Reply-To:[your-email] と入力しておくと、問い合わせをした人に返信できます。

メッセージ本文 →
お名前:[your-name]
E-mail:[your-email]
ご希望の折り返し連絡方法:[contact-us]
電話番号:[your-tel-no]
Skype ID:[SkypeID]
ご相談内容: [Consultation]
緊急度:[emergency]

6.すべて入力したら、”保存”を入力します。

 

7.実際に問い合わせページより入力しテスト入力してみてください。

7.実際に問い合わせにテスト入力してみてください。

 

8.きちんと内容が反映されたメールが到着したら、問い合わせフォーマットは完成です!

8.きちんと内容が反映されたメールが到着したら、問い合わせフォーマットは完成です!

一度やり方を覚えてしまうと、次回からは、簡単に作成できます。

難しいWordPressの設置、初期設定を丸ごと販売。テーマの単体の販売も。

【ブログ共通エリア】 ブログ記事の下に常に表示されます。 各ブログの下に表示されるテキストです。

WordPress(ワードプレス)の固定ページへコンタクトフォーム(Contact Form 7)を設置する方法 その3

2016年11月30日
WordPress(ワードプレス)の様々な設定方法の紹介です。

Contact Form 7を使ってお問合せフォームを設置します。 

Contact Form 7を使ってお問合せフォームを設置する その1 はこちら
Contact Form 7を使ってお問合せフォームを設置する その2 はこちら

では、お問合せフォームを作っていきましょう。

1.ダッシュボード>お問合せ>コンタクトフォーム をクリックします

1.ダッシュボード>お問合せ>コンタクトフォーム をクリックします

2.WordPress(ワードプレス)の固定ページへコンタクトフォーム(Contact Form 7)を設置する方法その1で作った、「練習お問合せ」の編集をクリック

2.WordPress(ワードプレス)の固定ページへコンタクトフォーム(Contact Form 7)を設置する方法で作った、「練習お問合せ」の編集をクリック

3.フォームにあらかじめテキストが入っています。

3.フォームにあらかじめテキストが入っています。

4.そのテキストを全て消去します。

4.そのテキストを全て消去します。

5.フォーム内にテキストを入力します。

5.フォーム内にテキストを入力します。

練習用テキスト

—-

お名前:

E-mail:

ご希望の折り返し連絡方法:

電話番号:

Skype ID:

ご相談内容:

緊急度:

貴方がロボットでないことを証明してください。
答えを入力してください:

送信前にご確認し、チェックを入れてください。

—-

6.にカーソルを置き、”テキスト”のボタンをクリックします。

6.※にカーソルを置き、”テキスト”のボタンをクリックします。

7.問合せの際の名前は必ず入れてほしいので、必須項目にチェックを入れ、名前に your-name を入力し、”タグを挿入”をクリックします。
7.問合せの際の名前は必ず入れてほしいので、必須項目にチェックを入れ、名前に your-name を入力し、”タグを挿入”をクリックします。
8.お名前:の横に入力されました。次にE-mail:※にカーソルを置き、”メールアドレス”のボタンをクリックします。
8.お名前:の横に入力されました。次にE-mail:※にカーソルを置き、”メールアドレス”のボタンをクリックします。
9.問合せの際のメールドレスは必ず入れてほしいので、必須項目にチェックを入れ、名前に your-email を入力し、”タグを挿入”をクリックします。
9.問合せの際のメールドレスは必ず入れてほしいので、必須項目にチェックを入れ、名前に your-email を入力し、”タグを挿入”をクリックします。
10.E-mail:の横に入力されました。次に連絡方法:※にカーソルを置き、”ドロップダウンメニュー”のボタンをクリックします。
10.E-mail:の横に入力されました。次に連絡方法:※にカーソルを置き、”ドロップダウンメニュー”のボタンをクリックします。

 

11.問合せの際の連絡方法は必ず入れてほしいので、必須項目にチェックを入れ、名前に contact-us を入力し、オプションに連絡方法を入れ 空の項目を先頭に入れる~にチェック。”タグを挿入”をクリックします。

11.問合せの際の連絡方法は必ず入れてほしいので、必須項目にチェックを入れ、名前に contact-us を入力し、オプションに連絡方法を入れ 空の項目を先頭に入れる~にチェック。”タグを挿入”をクリックします。

12.連絡方法:の横に入力されました。次に電話番号:※にカーソルを置き、”電話番号”のボタンをクリックします。
12.連絡方法:の横に入力されました。次に電話番号:※にカーソルを置き、”電話番号”のボタンをクリックします。
13.名前に your-tel-no を入力し、”タグを挿入”をクリックします。

13.名前に your-tel-no を入力し、”タグを挿入”をクリックします。

14.電話番号:の横に入力されました。次にSkype ID:※にカーソルを置き、”テキスト”のボタンをクリックします。

14.電話番号:の横に入力されました。次にSkype ID:※にカーソルを置き、”テキスト”のボタンをクリックします。

15.名前に SkypeID と入力し、”タグを挿入”をクリックします。

15.名前に SkypeID と入力し、”タグを挿入”をクリックします。

16.Skype ID:の横に入力されました。次にご相談内容:※にカーソルを置き、”チェックボックス”のボタンをクリックします。

16.Skype ID:の横に入力されました。次にご相談内容:※にカーソルを置き、”チェックボックス”のボタンをクリックします。

17.問合せの際のご依頼内容は必ず入れてほしいので、必須項目にチェックを入れ、名前に Consultation と入力し、オプションに項目を入れ”タグを挿入”をクリックします。

 

17.問合せの際のご依頼内容は必ず入れてほしいので、必須項目にチェックを入れ、名前に Consultation と入力し、オプションに項目を入れ”タグを挿入”をクリックします。

18.ご相談内容:の横に入力されました。次に緊急度:※にカーソルを置き、”ラジオボタン”のボタンをクリックします。

18.ご相談内容:の横に入力されました。次に緊急度:※にカーソルを置き、”ラジオボタン”のボタンをクリックします。

19.必須項目にチェックを入れ、オプションに項目を入れ、名前に emergency と入力し”タグを挿入”をクリックします。(ラジオボタンは一個しか選択できないボタンです。)

 

19.必須項目にチェックを入れ、オプションに項目を入れ、名前に emergency と入力し”タグを挿入”をクリックします。(ラジオボタンは一個しか選択できないボタンです。)

20.緊急度:の横に入力されました。次に貴方が~入力してください:※にカーソルを置き、”クイズ”のボタンをクリックします。20.緊急度:の横に入力されました。次に貴方が~入力してください:※にカーソルを置き、”クイズ”のボタンをクリックします。
21.簡単なクイズを入力します。名前に sum と入力しクイズ|答 と入力します。”タグを挿入”をクリックします。

21.簡単なクイズを入力します。名前に sum と入力しクイズ|答 と入力します。”タグを挿入”をクリックします。

22.貴方が~入力してください:の横に入力されました。次に最後の行の横※にカーソルを置き、”承認確認”のボタンをクリックします。

22.貴方が~入力してください:の横に入力されました。次に最後の行の横※にカーソルを置き、”承認確認”のボタンをクリックします。

 

23.名前に confirmed  と入力し”タグを挿入”をクリックします。

23.名前に confirmed  と入力し”タグを挿入”をクリックします。

24.最後の行の横の横に入力されました。一番下※にカーソルを置き、”送信ボタン”をクリックします。

24.最後の行の横の横に入力されました。一番下※にカーソルを置き、”送信ボタン”をクリックします。

25.ここでは、どこもいじらず”タグを挿入”をクリックします。

25.ここでは、どこもいじらず”タグを挿入”をクリックします。

 

26.送信ボタンが入力されました。これで、入力は終わりましたので”保存”をクリックします。

26.送信ボタンが入力されました。これで、入力は終わりましたので”保存”をクリックします。

27.ショートコードを張り付けた固定ページを見てみましょう。各項目が入力されていることがわかります。

27.ショートコードを張り付けた固定ページを見てみましょう。各項目が入力されていることがわかります。

 

 

HP上は項目が表示されましたが、このままでは入力された内容が指定されたメールアドレスに送信されません。

次回は、問い合わせの内容が反映されるように、メールを設定する方法です。

 

難しいWordPressの設置、初期設定を丸ごと販売。テーマの単体の販売も。

【ブログ共通エリア】 ブログ記事の下に常に表示されます。 各ブログの下に表示されるテキストです。

WordPress(ワードプレス)の固定ページへコンタクトフォーム(Contact Form 7)を設置する方法 その2

2016年11月24日
WordPress(ワードプレス)の様々な設定方法の紹介です。

Contact Form 7のフォームボタンの説明

Contact Form 7でフォームを設置するとき、多数のボタンが表示されます。

6.次の記事では、このコンタクトフォームで設置できるフォームを紹介します。

このボタンを使うとどのような表示になるのか、以下をご覧ください。

contact-form7

 

①テキストボックス←短いテキストを入力できます。使用例:名前、年齢など

②メールアドレス←メールアドレスを入力してもらう場合に使用します。

③URL←URLを入力してもらう場合に使用します。

④電話番号←電話番号を入力してもらう場合に使用します。

⑤数値(スピンボックス)←数値を直接入力してもらうこともできます。▼の印をクリックして数値を動かすこともできます。

⑥数値(スライダー)←大体の位置で

⑦日付←日付を入力しもらう場合に使用します。(IEでうまく表示されない場合があります。ご注意ください。)

⑧テキストエリア←質問や感想など沢山の文字数を入力してほしいときに使用します。

⑨ドロップメニュー←いくつかの候補から一つを選んでほしいときに使用します。

⑩チェックボックス←いくつかの候補からいくつ選んでも良い場合に使用します。

⑪ラジオボタン←いくつかの候補から一つを選んでほしいときに使用します。

⑫クイズ←あまり使わないと思いますが、スパムメール防止のために、入力してもらうのも良いと思います。

⑬確認ボタン←入力欄に空きがないか、確認していただく場合に利用します。

⑭送信ボタンこのボタンを押すと、指定したメールアドレスに送信されます。

 

 

 

 

次の投稿は、各ボタンの設置方法、送信されたメールの宛先や、そのメール本文の設定方法です。

 

難しいWordPressの設置、初期設定を丸ごと販売。テーマの単体の販売も。

【ブログ共通エリア】 ブログ記事の下に常に表示されます。 各ブログの下に表示されるテキストです。