如何使用materializeCSS和PHP发送电子邮件

Question

and thank you for reading this, I'm really a beginner in programming and I need some help on a simple website I'm trying to make. My goal is to make a form that sends me a mail but when I press send, it justs sends me back to the top of the page. I'm pasting HTML and php below. Another question that I'm asking you guys is Do I have to set something on my web hosting service (ovh) for php to work ? Thank you all, bye :) !

html :

<form class="col s12">
  <div class="row">
    <div class="input-field col s6">
      <i class="material-icons prefix">info</i>
      <input id="first_name" type="text" class="validate">
      <label for="first_name">Prénom</label>
    </div>
    <div class="input-field col s6">
      <i class="material-icons prefix">info</i>
      <input id="last_name" type="text" class="validate">
      <label for="last_name">Nom de famille</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">phone</i>
      <input id="Mail" type="email" class="validate">
      <label for="Mail">E-mail</label>
    </div>
  </div>
    <div class="row">
        <form class="col s12">
        <div class="row">
            <div class="input-field col s12">
            <i class="material-icons prefix">chat</i>
            <textarea id="message" class="materialize-textarea"></textarea>
            <label for="message">Message</label>
            </div>
        </div>
<button class="btn waves-effect waves-light" type="submit" 
name="action">Envoyer
<i class="material-icons right">send</i>
</button>
        </form>

PHP :

<?php 
if(isset($_POST['submit'])){
$to = "myemail@gmail.com";
$from = $_POST['Mail'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$subject = "Mail subject";
$message = $first_name . " " . $last_name . " à écrit ceci:" . "\n\n" . 
$_POST['message'];

$headers = "From:" . $from;
$headers2 = "From:" . $to;
mail($to,$subject,$message,$headers);
echo "Mail Sent. Thank you " . $first_name . ", we will contact you 
shortly.";

}
?>

Answer 1

Well start slow, here there are some errors a submit form is a special dialog with the client and the server side in this case server side PHP, the form tag need first of all the method that you want to use to send data so or POST or GET but you must see this in the html FORM TAG...so your html form begin tag become

<form class="col s12" method="post">

The second problem is where you want to send data?At which file?and also this must be written in the form at the begin using action, so your form become.

 <form class="col s12" method="post" action="nameOfFilePHPWhereSendData.php">

if the action is in the same page the action can be leave empty so action="" After you don't need to write

   if( isset($_POST['submit']))

also because is an error you must use the html name so $_POST['action' ]and you must write in post your $_POST

 $from = $_POST['Mail'];
 $first_name = $_POST['first_name'];
 $last_name = $_POST['last_name'];

AHHH and IMHO opinion is better use input type="submit"

Answer 2

Simple and easy way to send emails via PHPMailer best option.

Check this out ! https://github.com/PHPMailer/PHPMailer

Answer 3

you have to define the form action, when the button click what php script would be executed, and obviously to send mail, your server or hosting need some configuration indeed

<form action="thephpfilename.php">

</form>

Answer 4

Thank you all for trying to help a beginner, appreciated. I modified a little my code following your instructions and web tutorials but now a mail is sent but it's completely emtpty, seems like my variables are empty. Thanks

index.html

<form class="col s12" method="POST" action="mail.php">
  <div class="row">
    <div class="input-field col s6">
      <i class="material-icons prefix">info</i>
      <input id="first_name" type="text" class="validate" name="first_name">
      <label for="first_name">Prénom</label>
    </div>
    <div class="input-field col s6">
      <i class="material-icons prefix">info</i>
      <input id="last_name" type="text" class="validate" name="last_name">
      <label for="last_name">Nom de famille</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <i class="material-icons prefix">phone</i>
      <input id="mail" type="email" class="validate" name="email">
      <label for="mail">E-mail</label>
    </div>
  </div>
    <div class="row">
            <div class="input-field col s12">
            <i class="material-icons prefix">chat</i>
            <textarea id="message" class="materialize-textarea"></textarea>
            <label for="message">Message</label>
            </div>
  <button class="btn waves-effect waves-light" type="submit" name="action" id="submit" for="submit">Envoyer
<i class="material-icons right">send</i>
  </button>
    </div>
</form>

mail.php

<?php
error_reporting(E_ALL);
// if (isset($_POST['submit'])) {  <<-- not an error, I just wanted to get rid of it w/o deleting it
$prenom = !empty($_POST['first_name']) ? $_POST['first_name'] : NULL;
$nom = !empty($_POST['last_name']) ? $_POST['last_name'] : NULL;
$from = !empty($_POST['mail']) ? $_POST['mail'] : NULL;
$msg = !empty($_POST['message']) ? $_POST['message'] : NULL;

if(mail('hugoleon2002@gmail.com', 'Commande Amarrex', $msg))
{
     echo 'Le message a été envoyé';
}
else
{
     echo 'Le message n\'a pu être envoyé';
}
// }
?>

Answer 5

I finally answered my own question, thank you for your time and help :) bye bye

index.html :

<form class="col s12" method="POST" action="mail.php">
  <div class="row">
    <div class="input-field col s6">
      <i class="material-icons prefix">info</i>
      <input id="first_name" type="text" class="validate" name="first_name">
      <label for="first_name">Prénom</label>
    </div>
    <div class="input-field col s6">
      <i class="material-icons prefix">info</i>
      <input id="last_name" type="text" class="validate" name="last_name">
      <label for="last_name">Nom de famille</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s6">
      <i class="material-icons prefix">mail</i>
      <input id="mail" type="email" class="validate" name="email">
      <label for="mail">E-mail</label>
    </div>
    <div class="input-field col s6">
      <i class="material-icons prefix">phone</i>
      <input id="phone" type="tel" name="phone">
      <label for="phone">Téléphone (optionel)</label>
    </div>
  </div>
    <div class="row">
            <div class="input-field col s12">
            <i class="material-icons prefix">chat</i>
            <textarea id="message" class="materialize-textarea" name="message"></textarea>
            <label for="message">Message</label>
            </div>
<button class="btn waves-effect waves-light" type="submit" name="action" id="submit" for="submit">Envoyer
<i class="material-icons right">send</i>
</button>
    </div>
</form>

mail.php :

<?php
$prenom = !empty($_POST['first_name']) ? $_POST['first_name'] : NULL;
$nom = !empty($_POST['last_name']) ? $_POST['last_name'] : NULL;
$from = !empty($_POST['email']) ? $_POST['email'] : NULL;
$msg = !empty($_POST['message']) ? $_POST['message'] : NULL;
$tel = !empty($_POST['phone']) ? $_POST['phone'] : NULL;
$headers = 'From: WEBSITE E-MAIL';
//  echo "$msg" . "$nom" . "$from";

if(empty($prenom) || empty($nom) || empty($from) || empty($msg)) 
{
     echo 'Mail couldn't be send, a fiel is empty';
}
elseif(mail('EMAIL ADRESS', "Commande Amarrex de $prenom $nom", "$prenom $nom a ecrit : $msg \n\n\n E-mail de contact : $from\n\n Telephone : $tel", "$headers"))
{
     echo 'Mail sent.';
}
else
{
    echo 'mail not sent, unexpected error';
}
// }
?>

This is working, feel free to use it even if it's pretty messy