ちょいきに!

脱出ゲーム攻略・ネタばれ・考察、たまに生活ネタやノウハウ系記事も

覚書き

お問い合わせフォーム作成までの道のり

投稿日:2017年12月14日 更新日:

初めてのワードプレスに四苦八苦中のShizuneです。

 

まさかの「お問い合わせフォーム」でつまずきました。

私のように困っている人もいると思いますので手順を残しておきます。

※2017年12月に作業したときの手順です。



エックスサーバーのメールアカウント作成

フリーメアドを設定しようと頑張ったのですが出来なかった・・・。

 

結局上手くいったのが、エックスサーバで取得できるメールアカウント使用での方法だったので、アカウント作成方法手順から。

 

エックスサーバのメールアカウントは無料で作成できます。

 

①エックスサーバインフォパネル > サーバパネルへログイン

 

②メールアカウント設定をクリック

 

③メールアカウントを設定するドメインを選び「選択する」をクリック


④メールアカウント追加をクリック


⑤空欄に必要事項を記入

メールアカウント:お好きな文字を入力

パスワード   :お好きな文字を入力

容量      :初期値(300MB)でOK

コメント    :空欄でOK

 

すべて記入したら「メールアカウントの作成(確認)」をクリック。
更に、
表示内容が正しければ「メールアカウントの作成(確定)」をクリック。

 

これでメールアカウントが作成されました!

 

Contact Form 7 を設定する

お問い合わせフォームが簡単に生成できるプラグインです。

 

①ダッシュボードメニューから「プラグイン」>「新規追加」

 
キーワードに「Contact Form 7」を入力して検索。

 

③Contact Form 7が表示されたら「今すぐインストール」をクリック。

その後に「有効化」もクリック


④ダッシュボードメニューに「お問い合わせ」というメニューが追加されているので、そこの「新規追加」>「メール」> 送信元には先ほど作ったメールアカウントを記入

 

送信先は任意で変えてください。

記入できたら「保存」をクリック。

⑤保存後に表示されるショートコードをコピー

▼上部で青い枠に囲われている文字列です。

 

⑥「固定ページ」>「新規追加」で⑤でコピーしたショートコードを張り付ける

以下は、コピーした文字列のtitle部分を「お問い合わせ」に変更しています。
お好きなタイトルに変更可能ですよ。

私は固定ページを作成したら、HPの上部メニューに自動的に追加されるように設定してあるので、

このあとHPへアクセス > 上部メニューに追加された「お問い合わせ」をクリック

 

これでお問い合わせフォームが表示されました。

 

固定ページ自動追加の設定方法は・・・

「外観」>「カスタマイズ」

 

カスタマイズメニューの「メニュー」をクリック

 

「>」マークをクリック

下へスクロールしてメニュー設定の「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れておく。

上部の「公開」ボタンを忘れずに!
これを押さないとチェックが反映されません。

 

普通はこれでフォームからのメールが届くらしいのですが、なぜか届かない~!!(・U・;)
どうやら「WP Mail SMTP」というプラグインを追加すれば届くようになるらしい。ふむふむ。

いざ設定方法を調べてみると、自分の表示画面と若干違っていまいち分かりづらい。。。
たぶんバージョンとかの違いなんでしょうが、最新版(2017年12月)プラグインでの設定方法を挙げておきます。

WP Mail SMTPの設定

①ContactForm7と同じように、インストール・有効化まで済ます

 

②「設定」>「WP Mail SMTP」


③必要事項を記入します。

送信元:作成したメールアカウントを指定

送信者名:お好きなもので。

メーラー:Default(none)

返信先:私はチェック無にしています

 

 

これでSave Settingsボタンをクリック

 

④Email Testというのが上部にあるのでクリック。

ここで送信先のメールアドレスを入れてSend Emailで送信。

送信成功すると、「成功したよー」とメッセージが表示されます。

お問い合わせフォームからも送信が成功するか確認してみましょう。

成功すると、こんなメッセージが出ます。

 

メールが届いたか確認。

▼テストメールから送信したメール

▼お問い合わせフォームから送信したメール

どちらも届いていました!OKです。

これで終了です。お疲れさまでした~

-覚書き
-, ,

Copyright© ちょいきに! , 2019 All Rights Reserved Powered by STINGER.