CODEWITHSUNDEEP
phpjqueryhtmlforms
James Macathy
James Macathy

Reputation: 45

Make Submit Button become a popup in HTML Contact Form

At the code below, when users click submit, it will redirect users to the page mywebsite/form-to-email.php

But the thing I am looking for is when users click submit button, it just show a simple popup (5 seconds) to inform users something like "We have received your information". So how should I make that happen?

Here is my HTML Contact Form. 

<form action="/wp-content/themes/writee/templates/form-to-email.php" method="POST">
        <ol>
            <li>How would you like me to call you? <input name="name" type="text" placeholder="Big Jack" /> </li>

            <li>Pick Up Address
                <ul> <li style="list-style-type: none;"></li>
                    <li>Number and Street or Site Name <input type="text" name="pickupadd" placeholder="5600 American Dr or Toronto Pearson Airport Terminal 3"/> </li>
                    <li>Post Code <input type="text" name="pickuppc" placeholder="L4W 1S9" /></li>
                </ul>

            </li>
            <li>Drop Off Address
                <ul>
                    <li>Number and Street or Site Name <input type="text" name="dropoffadd" placeholder="40 Bay Street or Air Canada Centre"/> </li>
                    <li>Post Code <input type="text" name="dropoffpc" placeholder="M5J 2X2"/> </li>
                </ul>
            </li>

            <li>Your Contact
                <ul>
                    <li>Phone Number <input type="number" name="phonenumber" placeholder="1 416 123 4567" /></li>
                    <li>Email <input type="email" name="useremail" placeholder="[email protected]"/> </li>
                </ul>
            </li>

        </ol>

        Message 
        <textarea style="height: 200px" name="message" placeholder="Anything I should know such as how big your"></textarea>
        <input type="submit" value="send"/>
    </form>

And here is my .php contact form

<?php
$name = $_POST['name'];
$pickupadd = $_POST['pickupadd'];
$pickuppc= $_POST['pickuppc'];
$dropoffadd= $_POST['dropoffadd'];
$dropoffpc= $_POST['dropoffpc'];
$phonenumber= $_POST['phonenumber'];
$useremail = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: $name \n Pick Up Address: $pickupadd \n Pick Up Post  Code: $pickuppc\n Drop Off Address: $dropoffadd\n Drop Off Post Code $dropoffpc\n Fone Number: $phonenumber\n Email: $useremail\n  Message: $message";
$recipient = "[email protected]";
$subject = "Pickup Request";
$headers = "Bcc: [email protected]";
mail($recipient, $subject, $formcontent,$headers) ;
echo "Thank You!";
?>

Upvotes: 1

Views: 1120

Answers (2)

Vadim Cool
Vadim Cool

Reputation: 121

There are many ways to accomplish what you want in a simple way.

#1 When posting anything, .php is not the only solution you have, but you can also have .php?email=sent and this may even replace some of the input values that you're using and by that maybe save some scripting space. Also this method allows you to make use of GET that later you can include in your header('Location: /?email=sent'); and then where ever you choose to return, you can then grab that GET statement and use it to display your message on the actual page where it was sent from and not some external .php file that people aren't even meant to see. But making it too simple may cause a risk of some PHP injection. So make sure and look into how to protect your code from injections.

#2 Another solution would be to use AJAX in JavaScript to send all the information to the form-to-email.php where you can also use POST instead of GET. And so this way you can avoid using header('Location: '); and instead retrieve all the information trough AJAX on a successful fetching. Then you can use alert() or even show a simple DIV box centered on the screen with the message that your e-mail has been sent. Then using JS to close the the div after certain amount of time using maybe setTimeout() function.

#3 This solution is a combination of the two above. And it is to make use of header('Location: ?email=sent') and then when you return to what ever page it was sent from, you can in use <?=$_GET['email']?> and place it into your JS code where you make a condition that if(<?=$_GET['email']?>=='sent'){alert('Thank you!')}.

Hope this helps you a little bit. Good luck!

Upvotes: 1

ASHISH SHARMA
ASHISH SHARMA

Reputation: 108

Visit https://www.w3schools.com/howto/howto_js_snackbar.asp For popup And For submit for use jquery Visit Submit a form using jQuery

Add snackbar html css in your html file and make them display:none...after click on submit button it process and when http response of ajax request is success ....it show Snackbar by the help of showPop() function

        <ol>
            <li>How would you like me to call you? <input id="nme" name="name" 
type="text" placeholder="Big Jack" /> </li>

            <li>Pick Up Address
                <ul> <li style="list-style-type: none;"></li>
                    <li>Number and Street or Site Name <input type="text" name="pickupadd" placeholder="5600 American Dr or Toronto Pearson Airport Terminal 3"/> </li>
                    <li>Post Code <input type="text" name="pickuppc" placeholder="L4W 1S9" /></li>
                </ul>

            </li>
            <li>Drop Off Address
                <ul>
                    <li>Number and Street or Site Name <input type="text" name="dropoffadd" placeholder="40 Bay Street or Air Canada Centre"/> </li>
                    <li>Post Code <input type="text" name="dropoffpc" placeholder="M5J 2X2"/> </li>
                </ul>
            </li>

            <li>Your Contact
                <ul>
                    <li>Phone Number <input type="number" name="phonenumber" 
    placeholder="1 416 123 4567" /></li>
                    <li>Email <input type="email" name="useremail" 
    placeholder="[email protected]"/> </li>
                </ul>
            </li>

        </ol>

        Message 
        <textarea style="height: 200px" name="message" placeholder="Anything 
 I should know such as how big your"></textarea>
        <input type="submit" value="send" onclick="fsubmit();"/>
    <
<script>
function fSubmit(){
    var name = document.getElementById("nme").value;
    //take all value same as name by giving id
    var dataString = 'name='+ name + '&message=' + message;
    //make data String as above addding all field element
    jQuery.ajax({
        url: "/wp-content/themes/writee/templates/form-to-email.php",
        data: dataString,
        type: "POST",
        success: function(data){
           showPop();
        },
        error: function (){}
    });
return true;
}
function showPop(){

    var x = document.getElementById("snackbar")

    x.className = "show";

    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 
3000);
}
</script>

Upvotes: 0

Related Questions