web-dev-qa-db-fra.com

En remplaçant le formulaire HTML par un message de réussite après l'envoi, le formulaire envoie un courrier électronique à l'aide d'un fichier php distinct

J'ai un formulaire de contact html intégré à index.html, puis un fichier mail.php qui envoie un courrier électronique et utilise également du Javascript. Lorsque je remplis le formulaire et que je le soumets, je l'ai codé pour qu'il envoie le courrier, puis il s'affiche avec une boîte de message de succès, puis redirige vers index.html.

Ce que j'aimerais, c'est que le formulaire soit remplacé par le message de réussite, pour éviter un rafraîchissement de la page et également pour éviter la boîte de message contextuelle.

formulaire de index.html:

<form  action="mail.php" method="POST">
    <div class="row uniform">
    <div class="6u 12u$(xsmall)">
        <input type="text" name="name" id="name" value="" placeholder="Name" />
    </div>
    <div class="6u$ 12u$(xsmall)">
        <input type="email" name="email" id="email" value="" placeholder="Email" />
    </div>
    <div class="12u$">
        <!--<div class="select-wrapper">

        </div>-->
    </div>
    <div class="12u$">
        <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
    </div>
        <center><div class="g-recaptcha" data-sitekey=""></div></center>
    <div class="12u$">
        <ul class="actions">
        <li><input type="submit" value="Send Message" class="special" /></li>
        <li><input type="reset" value="Reset" /></li>
        </ul>
    </div>
    </div>
</form>

le fichier php, l'adresse e-mail et le jeton recaptcha ont été supprimés pour des raisons évidentes:

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent = "From: $name \n email: $email \n Message: $message";
$recipient = 'email address here';
$subject = 'Message from Website';
$mailheader = "From: $email \r\n";
$captcha;
{
  if(isset($_POST['g-recaptcha-response']))
    {
      $captcha=$_POST['g-recaptcha-response'];
    }
  if(!$captcha)
    {
      echo '<script language="javascript">';
      echo 'alert("Please check the Captcha")';
      echo '</script>';
      exit;  
    }
  $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
  if($response.success==false)
  {
    echo '<h2>Please do not try and spam here.</h2>';
  }else
  {
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo '<script language="javascript">';
echo 'alert("Your Message successfully sent, we will get back to you ASAP.");';
echo 'window.location.href="index.html";';
echo '</script>';
  }
} ?>

C'est un sujet que j'ai effectivement examiné:

Effacer le formulaire après l'envoi et le message de réussite

javascriptphphtmlforms
7
Troy

La meilleure façon de faire toutes vos affaires est d’utiliser ajax. Inclure jquery dans votre code HTML.

Mettez votre formulaire dans une enveloppe

<div class="something">
<!-- your form here -->
</div>

Soumettez votre formulaire via ajax, au lieu d'utiliser la soumission de formulaire de base

//"idform" is the id of the form
$("#idForm").submit(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           // serialize your form's elements.
           data: $("#idForm").serialize(), 
           success: function(data)
           {
               // "something" is the class of your form wrapper
               $('.something').html(data);
           }
         });
    // avoid to execute the actual submit of the form.
    return false;
});

Et la dernière chose que vous devez changer est dans votre code php

ne garder qu'un seul écho pour réussir

echo "Your Message successfully sent, we will get back to you ASAP.";
3
Sumit Pandey

Vous pouvez accomplir cela en utilisant jQuery et Ajax.

Commencez par inclure jquery dans votre élément head 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

Ensuite, donnez à votre formulaire un identifiant 

<form  id='mail_form' action="mail.php" method="POST">

Ajouter un span quelque part avec l'id = 'error'

<span id='error' style='color:red; font-weight:bold;'></span>

Ajustez le mail.php à ce qui suit:

<?php 
$success = true;
$errors = array();

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent = "From: $name \n email: $email \n Message: $message";
$recipient = 'email address here';
$subject = 'Message from Website';
$mailheader = "From: $email \r\n";
$captcha = false;

  if(isset($_POST['g-recaptcha-response']))
  {
      $captcha=$_POST['g-recaptcha-response'];
  }
  if(!$captcha)
  {
      $success = false;
      array_Push($errors, "Please check the captcha");
  }
  $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
  if($response.success==false)
  {
    $success = false;
    array_Push($errors, "Please do not try and spam here.");

  }

if ($success)
{
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
}

$output_array = array("success" => $success, "errors" => $errors);
echo json_encode($output_array);
 ?>

Puis, au bas de votre page, ajoutez

<script>
$('#mail_form').on('submit', function(){
    var dataIn = $(this).serialize(); //serialize turns the form data into a string that can be passed to mail.php. Try doing alert(dataIn); to see what it holds.
    $.post( "./mail.php", dataIn )
        .done(function( dataOut )
        {
        //dataOut holds the response from mail.php. The response would be any html mail.php outputs. I typically echo out json encoded arrays as responses that you can parse here in the jQuery.
        var myArray = JSON.parse(dataOut );
        if (myArray['success'] == true) //Check if it was successfull.
            {
             $("#mail_form").html("Congrats! We just e-mailed you!");
            }
        else //there were errors
           { 
           $('#error').html(""); //Clear error span

            $.each(myArray['errors'], function(i){ 
            $('#error').append(myArray['errors'][i] + "<br>");
           }
        });
return false; //Make sure you do this or it will submit the form and redirect
});
</script>
1
hunijkah

Tout d’abord, vous devez utiliser l’appel AJAX pour soumettre le formulaire. Si vous insistez pour utiliser JS pur, le script ressemblera à ceci (écrit en 5 secondes - a probablement besoin d'être ajusté):

<script>

document.forms['yourForm'].onsubmit = function(form) { // you have to add 'name' attribute to the form and replace 'yourForm' with it
    var data = ... //here you have to get all the values from form elements and store them in data object. to make less changes to the script use the elements' names as object names
    if (window.XMLHttpRequest)
    {
        var xhReq = new XMLHttpRequest();
    }
    else
    {
        var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
    }


    var method= 'POST')
    var async = false; //you can actually set true here, it doesn't matter much in this case
    var url = 'mail.php';
    xhReq.open(method, url, async);
    xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhReq.send(data);



    document.getElementById("form's parent's ID goes here").innerHTML = "new content"


    return false;
}
</script>

Que vous devez supprimer tous les échos du fichier php car il ne serait pas affiché de toute façon. Vous pouvez également ajouter plus de sophistication à ce script, par exemple. vérifie si la fonction mail a fonctionné correctement (en retournant quelque chose dans un fichier php et en vérifiant la réponse AJAX dans JS) ou si les erreurs captcha sont détectées. Il serait également extrêmement facile d’atteindre jQuery si vous êtes prêt à vous engager dans cette voie.

1
kacper3w