【Contact Form 7】メールフォームのもう一つの選択肢

閲覧ありがとうございます。

ページテーマ

Snow Monkey Formsが使えないときの選択肢

テーマがブロックエディタ対応じゃないから使いにくい

他にもおすすめのメールフォームないかな?

そんな問題を解決します。

\ このサイトで利用しています /

おすすめテーマ

おすすめサーバー

Contact Form 7 の設定と手順(WordPress初心者向け)

Contact Form 7は、WordPressでお問い合わせフォームを簡単に作成できる非常に人気のあるプラグインです。

1. Contact Form 7 のインストール

まずは、WordPressにContact Form 7をインストールしましょう。

STEP
WordPressの管理画面にログイン
STEP
「プラグイン」➡「プラグインを追加」
1プラグイン 追加
STEP
検索窓に「Contact Form 7」
2今すぐインストール

「今すぐインストール」をクリック

STEP
「今すぐインストール」➡「有効化」
4有効化

「有効化」をクリック

これでContact Form 7のインストールと有効化は完了です。

2. 新しいお問い合わせフォームの作成

有効化されると、左側のメニューに「お問い合わせ」という項目が追加されています。

STEP
お問い合わせ」→「コンタクトフォームを追加
新たな項目「お問い合わせ」
STEP
わかりやすいタイトルを入力

ここで入力するタイトルはあくまでフォームを認識するためのものです。

公開後に目に付くものではないので自分のわかりやすいタイトルをつけておきましょう。

STEP
「保存」をクリック

これでメールフォームを作成できました。

細かい設定は次のセクションで説明していきます。

3. お問い合わせフォームの設定(各タブの解説)

フォームを保存すると、いくつかタブが表示されます。これらがフォームの設定を行う主要な部分です。

3-1. フォーム

ここが実際に表示されるフォームの入力項目を設定する場所です。

初期状態でも基本的な項目(名前、メールアドレス、題名、メッセージ本文、送信ボタン)が用意されています。

項目の追加

もし追加したい項目があれば、上部にある「テキスト」「メールアドレス」「URL」「電話番号」「数値」「日付」「テキストエリア」「ドロップダウンメニュー」「チェックボックス」「ラジオボタン」「同意確認」「ファイル」「送信」といったタグジェネレーターを利用します。

例:電話番号を追加したい場合

電話番号タブをクリックすると以下の画面が表示されます。

  • 項目タイプ:そのままでOK
    (必須入力にする場合はチェックを入れます)
  • 項目名:そのままでもOK ※数字は任意のものに変更可(your-telephoneなど)
    (チェックを入れると送信者の電話番号自動入力が有効になります)
  • クラス属性:空欄のまま
  • 長さ:入力ボックスの長さを指定できます。特になければ空欄でOK
  • デフォルト値:空欄でOKですが、あらかじめ入力しておきたい場合は任意のテキストを入力します。
    (チェックを入れるとここで入力したテキストがクリックすると消える入力例として表示されます)

最後に右下の「タグを挿入」をクリックするとフォームにコードが追加されます。(下図の青い部分)

あとは他の項目同様のレイアウトにして完了です。

※完了したら画面右上の「保存」忘れずにクリックしてください。

3-2. メール

お問い合わせフォームから送信されたメールが、どこに、どのように届くかを設定します。最も重要な設定の一つです。

  • 送信先:お問い合わせメールを受け取りたいメールアドレスを入力します。(例:your-email@example.com
  • 送信元:そのままで問題ありません(推奨)。
    ※サイトのURLと異なるアドレスを入力するとエラーで送信されなくなります。
    • 重要: サーバーによっては「From」のメールアドレスを、実際にそのサーバーから送信できるメールアドレス(例:info@あなたのドメイン)に設定しないと、メールが届かない場合があります。もしメールが届かない場合は、一度確認してみてください。
  • 題名: あなたに届くメールの件名です。「サイトからお問い合わせがあります」などわかりやすいものをおすすめします。
  • 追加ヘッダー: Reply-To: [your-email]と設定されていると、受信したメールに返信する際、ユーザーが入力したメールアドレス宛に直接返信できます。
  • メッセージ本文: 実際に届くメールの内容です。フォームで設定した各項目([your-name][your-email]など)を記述することで、ユーザーが入力した内容が反映されます。

    例:
    ホームページからお問い合わせがありました。
    【会社名】[company-name]
    【ご氏名】[your-name]
    【メールアドレス】[your-email]
    【電話番号】[your-tel]
    【お問い合わせ内容】[textarea-15]

入力が終わったら「保存」ボタンをクリックして完了です。

自動返信メールを使用しない場合はここまでで設定完了です。

自動返信メールの設定

自動返信メールを使う時は「メール(2)を使用」のチェックを入れます。

こちらはセキュリティー設定も必要になってくるので改めて追記します。

3-3. メッセージ

ユーザーがフォームを送信した際に表示されるメッセージを設定します。

  • 送信に成功しました。ありがとうございます。: 送信が成功した際に表示されるメッセージ。
  • 送信に失敗しました。: 送信が失敗した際に表示されるメッセージ。
  • 入力検証エラー: 必須項目が入力されていなかった場合などに表示されるメッセージ。

これらのメッセージは必要に応じて変更してください。

変更したら必ず「保存」ボタンをクリックしてください。

3-4. その他の設定

高度な設定を行う場所ですが、通常は触る必要はありません。

4. お問い合わせフォームの固定ページへの埋め込み

作成したお問い合わせフォームをブログの固定ページに表示させましょう。

STEP
ショートコードをコピー

ダッシュボード➡「お問い合わせ」に戻ると先ほど作成したタイトルの横にショートコードが表示されているのでコピーしておきます。

STEP
ショートコードブロックに貼り付け

ショートコードブロックを呼び出し

ここに入力に貼り付けます

STEP
保存して表示確認

ショートコードを貼り付けたら保存して公開またはプレビューで表示確認をしてください。


トラブルシューティング(もしメールが届かない場合)

  • 送信先: のメールアドレスが正しいか確認する。
  • 送信元: のメールアドレスがサーバーで送信可能なアドレスか確認する。
    • 多くのレンタルサーバーでは、Fromのアドレスがそのサーバーで管理されているドメインのメールアドレスでないと、スパム判定されたり、送信自体が失敗する場合があります。例:no-reply@あなたのドメインのようなアドレスを設定してみる。
  • スパムフォルダを確認する。
  • サーバーのメール送信ログを確認する。 (サーバーの管理画面で確認できる場合があります)
  • SMTPプラグインの導入を検討する。
    • WordPressからメールを送信する際に問題が起こりやすい場合、WP Mail SMTPなどのSMTPプラグインを導入して、より確実にメールを送信できるようにする方法もあります。これは少し高度な設定になりますが、もしメールが頻繁に届かない場合は検討してみてください。

以上でメールフォームの設定は完了です。

大変だったかと思いますがお客様との大事な接点ですので頑張って設定した価値は充分発揮されることと思います。

文中でも記述しましたが、自動返信メールに関しては後日改めて追記したします。

最後までありがとうございました。

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

よかったらシェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

事業で使うサイトを企業に依頼し作成したものの、全く機能せず自分で作り直したのがきっかけでウェブの世界に興味を持ち今も吸収中。
Wordpress、コーディング、マーケティングなどウェブlogにアウトプットしています。誰かの問題解決のヒントになれば最高に嬉しいです。

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次