お問い合わせフォームの実装

Question

HTMLとPHPを使って、お問い合わせフォームを作りたいのですが、
どうもうまくいかない様です。

サーバーにアップロードして、フォームを埋めたのち、
送信を押しましたが反応がありません。
改善策をご教授いただけたらと思います。

 <div class="site-section" id="contact-section"  data-aos="fade">
         <div class="container">

        <div class="row align-items-center">
          
          <div class="col-sm-6 col-sm-offset-3">
            
            <h2 class="section-title mb-3">お問い合わせ</h2>
            <p class="mb-5">商品内容やショップ概要など、ご不明な点などありましたら、<br>お気兼ねなくお問い合わせください。</p>

            <form id="contact-form" method="post" action="contact-form.php">

            <div class="field">
            <label for="name">名前・会社名</label>
            <input type="text" id="name" class="contact-field" name="name" placeholder="" required>
            </div>

            <div class="field">
              <label for="email">メールアドレス</label>
              <input id="email" class="contact-field" name="email" type="email" placeholder="" required>
            </div>

            <div class="field">
              <label for="message">お問い合わせ内容</label>
              <textarea id="message" class="contact-field" name="message" placeholder="" required></textarea>
            </div>

            <div>
              <input class="btn2 btn-outline-primary py-3 px-5" id="submit" name="submit" type="submit" value="送信">
            </div>
            
            <div class="error-status"></div>

          </form>

          </div>
          </div>
          
            
          </div>
          
        </div>
   

<?php
     $name = $_POST['name'];
     $visitor_email = $_POST['email'];
     $message = $_POST['message'];


     $email_from = '[e-mail]（仮）';

     $email_subject = "お問い合わせがありました。";

     $email_body = "User Name: $name.\n".
                   "User Email: $visitor_email.\n".
                   "User Message: $message.\n";

     $to = "[e-mail]";

     $headers = "From: $email_form \r\n";

     $headers .= "Reply-To: $visitor_email \r\n";

     mail($to,$email_subject,$email_body,$headers);

     header("Location: index.html");



?>

Comments

[m.ts10806]

> 送信を押しましたが反応がありません。
自身が組んだコードがどのようなコードか把握されていますでしょうか？
（header()書いてますよね）

また、「反応がない」だけでは分かりません。
エラー表示ONにする https://qiita.com/shotets/items/3c95aef631b2c5eadae5
サーバーのログを確認する　などして具体的に起きた現象を記載してください。

[miyabi_pudding]

何点か確認です。
・反応がないということは、ページの切り替わりもない、ということか
・PHPの構文は、contact-form.phpのものなのか
・記載のHTMLはcontact-form.phpなのか、それとも別なのか
・サーバーはPHPが動く状態なのか
・エラーは起きているか、起きているならエラー文を記載してほしい

以上、どうかご確認お願いします。

[dogfood]

・反応がないということは、ページの切り替わりもない、ということか
→そうです。ページも切り替わらない状態です。
・PHPの構文は、contact-form.phpのものなのか
→そうです。
・記載のHTMLはcontact-form.phpなのか、それとも別なのか
→index.htmlになります。
・サーバーはPHPが動く状態なのか
→動く状態です。
・エラーは起きているか、起きているならエラー文を記載してほしい
→エラーは起きておりません。

[m.ts10806]

header("Location: index.html");をコメントアウトしてみては。

[m.ts10806]

そのうえでecho "実行";とか適当に文字列の出力指示を入れておく。

[dogfood]

試してみましたが画面すら切り替わらない状態です。

[miyabi_pudding]

もしかして、なんですが、
<input id="submit" name="submit">のnameとidにsubmit入れてるのが悪さしてないですかね・・・？
してないにしろ、type属性に入れるべきものを、idやnameにいれるのは、javascriptの処理などで、不都合が出る可能性があるので、やめましょう。

[dogfood]

名前を変えたほうがいいということですかね？

[miyabi_pudding]

それで解決するかはわかりませんが、nameとidはsubmit以外にしましょう。
（nameとid自体は同じものにする必要がある）

Answer 1

サーバーにアップロードして、フォームを埋めたのち、

送信を押しましたが反応がありません。
改善策をご教授いただけたらと思います。

改善策としては送信を押しましたが反応がありませんの詳細動作の切り分けをすることです。
0. submitボタン自体を押してもリクエスト自体が飛ばないのか→アクセスログを確認する
0. リクエスト先は正しいのか→アクセスログを確認する
0. プログラム処理は正しいのか→エラーログ、echo、exitなどを使いデバッグする
0. プログラムに問題がある場合、必要最低限の処理だけにして動作確認を取りつつ処理を改めて追加し直していく

1ならhtmlのエラー、2なら基本的にはhtmlのエラー、3～4ならプログラムのエラー
そのどれでもないのなら回線の問題か手元のパソコンないしスマホの問題です

Comments

[退会済みユーザー]

「mail() で送信ができない！」ってところに進むと、mail サーバの切り分けをしないとダメだと思いますよ。
php からはほとんど挙動が見えないので。

[hentaiman]

まあそこはデバッグ進めんで原因そこだと分かれば突っ込んでいくところだとおもうので、しつもんぶんが修正されるか新しい質問が投げられたらでいいんじゃないですかね
「サーバーにアップロードして」と書いてあるからレンタルサーバーだと考えてその辺は問題無いとおもってますけど

Answer 2

とりあえず、
$email_from = '[e-mail]（仮）';

と定義しておきながら

$headers = "From: $email_form \r\n";

と変数名のミスがあるのはIDEの構文チェックで気づきました。
Fromが設定してあって未定義変数が指定されていては届くものも届かないでしょう。

「エラーは出ない」と仰っていますが、エラー表示ONにすればNoticeは出るはずです。

とりあえず、フォームHTMLはそのままでPHPは下記だけだと入力した内容は出力できたので、
気になるのは上記の変数名のミスくらいですね。

<?php
var_dump($_POST);

あとはyambejpさんの回答にあるようにmail()自体が機能しているか、単体でテストしてみてください。

大事な追記

下記は必ず見ておいてください。

• 安全なウェブサイトの作り方

メール送信は脆弱性をつきやすい仕組みの一つです。
レンタルサーバであれば確かに簡単にメール送信のテストはできますが、同時に世界中からアクセス可能になっているとも言えますので、きちんと作り上げるまでは、最低でもベーシック認証かけるとか、特定のIPからしかアクセスさせないようにするとかしておいたほうが良いでしょう。

Answer 3

外部からアクセス可能な場所にアップロードしているなら、削除したほうが良いです

サーバの設定が適切にできていないのだと思うので、メールが送信されることは無いと思いますが、万が一、メールが送信されるように設定できていると、ドメインを汚すメールが送信できてしまいます(SPAM の発射台になります)。

改善策をご教授いただけたらと思います。

基本的なセキュリティ対策を学んで下さい。

Answer 4

fromもtoもスタティックに指定してメールが届かないなら
mail関数を利用する環境の設定ができていないのでしょう。
mail関数自体のテストは済んでいますか？
まずはそこからでしょう

Answer 5

質問修正依頼コメントをいただいて、状況がわかりましたので、回答いたします。
何も起きていないわけではないと思います。
メールが届いていませんか？

なぜ何も起きていないように見えるかというと、
phpの最後で、
header("Location: index.html");にて元のページに戻っているからです。
何も起きていないのではなく、メールを送信した後、ページを元に戻しているだけです。
送信を押した後、inputに入れた値がクリアされてませんか？
それは、phpによるページ遷移をしたことによる現象です。

Comments

[dogfood]

ありがとうございます。

ただ、「送信を押した後、inputに入れた値がクリアされてませんか？」これがクリアになっていない状態です。
空欄のまま送信しようとすると、エラーメッセージが出るのでボタン自体は反応しているのかなと思いますが。

[m.ts10806]

CSSの指定とか実際の送信行為に関係のないタグとか全部取っ払って最小構成で試してみては。

[miyabi_pudding]

あの・・・、もしかして、JavaScriptの処理挟んでます？
もしそうだったら、そこはかなり重要なので、質問本文に記載し、JavaScriptのコードも記載してください。

[miyabi_pudding]

いや、 required属性で、空欄でエラー起きてるだけですかね・・・。

dogfoodさん > mts10806さんのおっしゃる通りにまずはやってみてはいかがでしょうか？