Contact Form7でお問い合わせフォームを作ってみた記録。

当サイトではアフィリエイト広告を利用しています。

当サイトではアフィリエイト広告を利用しています。

ブログ開始当初

お問い合わせフォームを作ってなかったので作ってみました。

ユーチューブをみて調べました(*^_^*)いつもお世話になってます。

長い道のりになりますが、お付き合いください(^^;)

プラグイン(コンセントマーク)のところで新規追加を押して

Contact Form7というのを入れていきます。

今すぐインストールボタンを押す。(^^;)

有効化を押す。

左側にお問い合わせのマーク(封筒のマーク)があらわれました。

コンタクトフォームを押して

ここにタイトルを追加のところをお問い合わせに変更します。

お問い合わせと入力した下にショートコード(青い部分)があらわれました。

これを右クリックして、コピーします。

固定ページを開いて

お問い合わせの編集を押します。

お問い合わせを作ってない場合は

新規固定ページ追加を押してタイトルに(お問い合わせ)を入力します。

お問い合わせの文章部分にカーソルをもってきて右クリック→貼り付けを押します。

ショートコードが貼りつきました。

右上の更新ボタンを押します。

固定ページを表示を押して、どんなふうに表示されているか見てみましょう。

最初の設定はこんな感じです。

お問い合わせに戻って

ふりがなの項目を入れていきます。

<label>氏名から始まる

青くなっている部分を全部、右クリックコピーします。

氏名とメールの間にカーソルを持ってきて、右クリック貼り付けを押します。

<label>氏名をフリガナに変えます。

[text* your-name autocomplete:name]</label>赤マーカーの部分右クリック切り取りします。

フリガナのところ、文字列が消えてカーソルがあります。

テキストを押します。

項目タイプの必須項目はチェックを入れると、必須になり、入力しないと送信できなくなります。

名前のところをyour-furiganaに変え、

デフォルト値のところは、ヤマダ タロウにして

このテキストを項目のプレースホルダーとして使用するにチェックを入れ、

右下のタグを挿入を押します。

すると、フリガナの欄がこのようになります。

一度、保存(右上のほう)を押します。

実際のページでどのように見えるのかを見てみます。

フリガナの欄ができて、記入例のヤマダ タロウが出ています。

ほかの部分もフリガナのように変えていきます。

autocomplete:nameのところを切り取って

placeholder”山田 太郎”に書き換えます。

メールアドレスのところも、autocomplete:emailから

placeholder”yamada@example.com”に変えます。

こんな風になりました。

あと、氏名、メールアドレス、題名、メッセージ本文を必須にしたので

(必須)を入れておきます。

メッセージ本文のtextareaのうしろに*(アスタリスク)を入れます。

アスタリスクが必須を表してるみたいです。

メールタブのメールの題名を

ホームページよりお問い合わせがありましたに変更します。

下のほうにスクロールして

メッセージ本文のところを下のように書き加えます。

下記の通り、お問い合わせがありました。

名前:[your-name]

フリガナ:[your-furigana]

メールアドレス:[your-email]

題名:[your-subject]

メッセージ:[your-message]

メール(2)にチェックを入れると、お問い合わせしてくれた方に自動返信されます。

題名のところを「お問い合わせいただきありがとうございます。「○○○○○○(自分のブログ)」」

に変更します。

メッセージ本文のところは、

下記の内容でお問い合わせを承りました。

名前:[your-name]

フリガナ:[your-furigana]

メールアドレス:[your-email]

題名:[your-subject]

メッセージ:[your-message]

に変更します。

わたしはこの後に

確認してお返事しますので、今しばらくお待ちいただけますでしょうか。

よろしくお願いいたします。」という文面を入れました。

送信元の@前の部分をno-replyに変えます。

後日追記※no-replyに変えるとわたしは自動送信されなかったので元のwordpressに戻しました。

これで保存を押します。

試しにお問い合わせしてみます。

送信を押すと、こんな感じです。

すると、お問い合わせを知らせるメールが来ました。

自動返信は自分で自分に送ってるからなのか入りませんでした。

また調べてみます。

まあ、ここまでできたのでよしとしましょう(*^-^*)

スクショ撮りまくりでした(;^ω^)

途中に問題も発生したので、また別の記事でお知らせします。

ところでなんですが、お問い合わせ来たら、

プライベートメール使って返信するとやばいですよね・・・

今さら気づきました((+_+))・・・


後日追記※なんかno-replyを元のwordpressに戻したら自動返信されました。

これは自分に届くほうです。

これはお問い合わせされた方に届くほうです。

自分が自分に送っているのでややこしくってすみません(+_+)

コメント

タイトルとURLをコピーしました