wildhawk
【初心者向け】
WordPressでお問い合わせフォームを簡単に作れるプラグイン
「Contact Form by WPForms」の設置方法
WordPressでお問い合わせフォームを簡単に作れるプラグイン
「Contact Form by WPForms」の設置方法
お問い合わせを設置
急遽お問い合わせフォームを設置する事になったが、今までよく使っていたWordPressのプラグイン「MW WP Form」が2023年9月に開発終了が発表されていた。それなら有名なプラグイン「Contact Form 7」の設置も考えたが、カスタムが面倒だった事を思い出したので、今回はドラッグ&ドロップ簡単にお問い合わせフォームが作れる「Contact Form by WPForms」で設置してみました。
こんな人にオススメ
WordPressでお問い合わせフォームを設置したい
HTMLの知識が無くてもWordPressでお問い合わせフォームを設置したい
ドラッグ&ドロップでお問い合わせフォームを設置したい
初心者でHTMLの知識が無いと設置が難しいお問い合わせフォームだが「Contact Form by WPForms」ならドラッグ&ドロップで簡単に設置できます。
WordPressの管理画面で設定
WordPressの管理画面からプラグインの新規追加をクリックし「Contact Form by WPForms」で検索します。又は下記ボタンよりダウンロードしてください。
初めて使う際にチュートリアルがあり、それに沿って操作すれば設置することできますが、今回はチュートリアルを使わない方法で説明します。
「Contact Form by WPForms」を有効化すると、左メニューに「WPForms」が追加されるのでクリックしてください。
「新規追加」をクリックすると、テンプレートを選択する画面が表示されるので、今回は「簡単なお問い合わせフォーム」のテンプレートをクリックします。
今回はお問い合わせフォームを設置する手順を説明しますが、他のフォームもテンプレートを選ぶ事で簡単に設置が可能です。もちろん空白のテンプレートから作る事も可能です。
「簡単なお問い合わせフォーム」のテンプレートをクリックするとフィールドを追加する画面に自動的に移動します。
左側が追加したいフィールドで、右側がプレビュー画面となります。
今回は「会社名」を追加したいので「単一行テキスト」を右画面の「名前」の上にドラッグ&ドロップします。
右側に追加した「単一行テキスト」をクリックすると、フィールド設定画面になるので、以下の様に入力・設定してください。
| ラベル | 会社名 |
|---|---|
| 説明 | ※何も入力しない |
| 必須 | OFF |
入力フィールドで部署名など、必要に応じて追加してください。
お問い合わせフォームの詳細を設定します。
無料版で設定できる項目は以下の3つです。
① 一般
② 通知
③ 確認
左カラムの「設定」から「一般」をクリックし、右カラムのフォーム名を「お問い合わせフォーム」に修正します。
※他の項目も必要に応じて入力してください。
左カラムの「設定」から「通知」をクリックし、右カラムの項目を以下の修正します。
| 送信先メールアドレス |
|---|
| {field_id=”2″} ※{field_id=”2″}は「右上のスマートタグを表示」から「メール」を選ぶとお問い合わせの「メールアドレス」フォームに入力した内容が自動的に組み込まれます。 ※field_id=”2″の番号は設定した入力フィールドの順番で異なります。 |
| CCと送信元メールアドレス |
| 自分のメールアドレス ※WordPress管理者のメールアドレスが自動的に組み込まれますが、必要に応じて変更してください。 ※サイトのURLとメールアドレスのドメインが一致しない場合、Gmail等にメールが届かない不具合があると警告が表示されます。別途対策するか同じドメインでメールが受け取れる様にしてください。 |
| メールメッセージ |
| コメント+{all_fields} ※「{all_fields}」のタグはお問い合わせ内容が自動的に組み込まれるので、必ず設定しましょう。 |
| その他の項目 |
| 必要に応じて変更してください。 |
CCの入力フィールドは、
「WPForm」→「設定」→「メールアドレス」から「カーボンコピー」にチェックを入れ、「設定を保存」をクリックしてください。
左カラムの「設定」から「確認」をクリックし、お問い合わせが完了した後のブラウザに表示する内容を設定します。
次に右上の「埋め込む」をクリックすると選択肢が表示されるので、今回は「新規ページを作成」をクリックします。
ページに埋め込むが表示されるので「お問い合わせ」を入力し「行きまし…」をクリックします。
固定ページの入力画面に遷移するので、必要な項目を修正します。
今回はリンクが「お問い合わせ」になっていたので「contact」に修正しました。
最後に「保存」を押して公開します。
全ての設定が完了したら、必ず動作を確認してください。お問い合わせのメールが届かない場合は、どこかに不備があるので、初めから設定に不備がないか確認をしてください。更に文言など好みに合わせて修正などを、色々試みてください。
今回はHTMLやCSSの知識が無くても、お問い合わせフォームを簡単に設置できる「Contact Form by WPForms」をご紹介しました。
数種類ある入力フィールドをドラッグ&ドロップで組み合わせてフォームが完成するので、WordPress初心者の方にもおすすめです。無料版でも十分使えるので、ぜひご利用ください。
その他の記事
関連カテゴリー
最新記事
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください