ワードプレスで、サイドバーに問合せフォームを設置したいと思ったことはありませんか？
下記画像のような問合せフォームが、すごく簡単に設置できます！
今回はプラグインを使用し、ウィジェットとして問合せフォームを追加する方法をお伝えします。
ウィジェットだから、
サイドバー以外にも簡単設置できるよ！
プラグインを追加する
❶ 左メニューの「プラグイン」→「プラグインを追加」を選択。
❷ 開いたページの右上に「プラグインの検索」がありますので、「WPForms」と入力。
❸ 検索後のページに『WPForms』が出てくると思いますので、「今すぐインストール」を選択。
❹「有効化」を選択。
これで、プラグインの導入は完了です。
WPForms の設定
❶ 左メニューの中に「WPForms」が出来ているので、これをクリック。
❷「新規追加」をクリック。
❸ テンプレートが表示されます。
特にこだわりがなければ、「簡単なお問い合わせフォーム」がおすすめ。
マウスカーソルを載せるとボタンが表示されるので、オレンジ色のボタンを押してテンプレートを追加します。
❹ 枠の中が、実際に表示されるフォームの内容です。
シンプルに「名前」「メールアドレス」「コメント」のみですが、これで充分。
❺ 編集は簡単にできます。
たとえば名前を「姓」「名」に分けたくない場合は、下記の操作で簡単に変更できます。
・名前の上でダブルクリック
・フォーマットで「シンプル」を選択
また、入力必須かどうかも、簡単に設定できます。
あわせて下図を参考にしてください。
❻ 完成したら、右上の「保存」を押します。
これでお問い合わせフォームが出来ました。
ウィジェットを設置する
ウィジェットを追加する
❶ 左メニュー「外観」→「ウィジェット」を選択します。
❷ ウィジェットに「WPForms」ができているので、「サイドバー」もしくは「サイドバースクロール追従」にドラッグ＆ドロップ。
❸ ウィジェットの入力・選択は、下図のように反映されます。
作成したフォームを選択 → 保存すると、サイト上にフォーム設置完了。
タイトル・説明を表示する
ウィジェットの「フォーム名を表示」「フォームの説明を表示」にチェックを入れると
サイト上では、下記のように表示されます。
❶ この表示を変更するには、WPFormsを開く →「編集」をクリック。
❷ 「設定」→「一般」→「フォーム名・フォームの説明」から変更できます。
cssでカスタマイズ
❶ 左のメニューから、「外観」→ 「テーマファイルエディター」を選択
❷ 子テーマ用のスタイル
「/*必要ならばここにコードを書く*/」の下に、コピペしたコードを貼り付けます。
コピペ用コード
●「フォーム名」css（一例）
●「フォームの説明」css（一例）
通知設定（送信元メールアドレスの設定）
お問い合わせフォームからコメントが送信された時、メールで通知を受け取ることができます。
❶「設定」→「通知」の順に選択。
❷ デフォルトはこんな感じです。
❸「送信先メールアドレス」は問題ありません。
通知してほしい、自分のメールアドレスを入力するだけです。
❹ 問題は「送信元メールアドレス」です。
パッと見、何のことなのか意味が分からないです。そして謎の長文エラー。
実は、これは簡単に解決します。
具体的には、通知するための送信元を『@自分のドメイン』にすればエラー回避できます。
たとえば当サイトのドメインはpcwebfun.comですから、
『xxx@pcwebfun.com』
と、こんな適当なアドレスでもいいので、@pcwebfunのアドレスを入力すれば警告文は消えます。
❺ 設定が終わったら、忘れずに保存しましょう。
受信メールにフィルターをかける
上記のような送信元メールアドレスを設定した場合、ほぼ間違いなくスパム扱いされて、迷惑メールフォルダに入ります。
そこで受信メールにフィルターを使用し、指定フォルダに入るように設定しましょう。
一例として、アプリのYahooメールで設定してみます。
❶ 迷惑メールに通知がきていることを確認したら、通知を受信箱へ移動させる。
❷ 受信箱のメールを開き、「右下の三点リーダー（その他）」→「フィルターを作成」を選択。
❸ 振り分けたいフォルダを選択。
これで設定は完了です。
念のため再度テスト送信し、メールが問題なく受信できるか確認してみましょう。
これで、やることは終わりだよ。
お疲れさまでした！
コメント