The Idea behind it this can be done with HTML page which requires separate PHP file to process HTML form so let's get started with the simple HTML form but before we dive into it please keep in mind this requires a live web server to work in the end of tutorial you can find the downloadable files to make the necessary changes and you are ready to go with it. read the complete article here
Last active
August 29, 2015 14:08
-
-
Save Shaz3e/777cafcb868ef3cb8dd9 to your computer and use it in GitHub Desktop.
How to Create an HTML-PHP Contact Form – Processing Form Data with PHP.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Contact Form</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <form action="mailer.php" method="post" class="s3-form" role="form"> | |
| <div class="s3-box"> | |
| <label>Full Name:</label> | |
| <input type="text" name="sender_name" class="s3-input" required /> | |
| </div> | |
| <div class="s3-box"> | |
| <label>Contact Number:</label> | |
| <input type="text" name="sender_number" class="s3-input" required /> | |
| </div> | |
| <div class="s3-box"> | |
| <label>Email:</label> | |
| <input type="email" name="sender_email" class="s3-input" required /> | |
| </div> | |
| <div class="s3-box"> | |
| <label>Message:</label> | |
| <textarea name="sender_messaeg" class="s3-input" required></textarea> | |
| </div> | |
| <div class="s3-box"> | |
| <input type="submit" name="submit" class="s3-btn" value="Send"> | |
| </div> | |
| </form> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $mail_to = '[email protected]'; // type your email address | |
| // Assigning data from the $_POST array to variables | |
| $name = $_POST['sender_name']; | |
| $number = $_POST['sender_number']; | |
| $email = $_POST['sender_email']; | |
| $message = $_POST['sender_messaeg']; | |
| // Construct email subject | |
| $subject = 'Message from Visitor'; // change the subject | |
| // Construct email body | |
| $body_message = 'From: ' . $name . "\r\n"; | |
| $body_message .= 'E-mail: ' . $email . "\r\n"; | |
| $body_message .= 'Phone: ' . $number . "\r\n"; | |
| $body_message .= 'Message: ' . $message; | |
| // Construct email headers | |
| $headers = 'From: ' . $name . "\r\n"; | |
| $headers .= 'Reply-To: ' . $email . "\r\n"; | |
| // send email | |
| $send = mail($mail_to, $subject, $body_message, $headers); | |
| // Generate success/error message with javascript | |
| if($send == true){ ?> | |
| <script language="javascript" type="text/javascript"> | |
| alert('Email Sent! We will keep in touch with you shortly.'); | |
| window.location = 'index.html'; | |
| </script> | |
| <?php }else { ?> | |
| <script language="javascript" type="text/ecmascript"> | |
| alert('Failed! Message not sent. Please notify the site administrator.'); | |
| window.location = 'index.html'; | |
| </script> | |
| <?php } // if($send == true){ | |
| ?> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *,html,body{ | |
| margin:0; | |
| padding:0; | |
| } | |
| .s3-form{ | |
| border:solid 1px #f1f1f1; | |
| margin:1em auto; | |
| width:500px; | |
| } | |
| .s3-box{ | |
| display:block; | |
| padding:0.5em 1em; | |
| } | |
| .s3-box label{ | |
| display:block; | |
| } | |
| .s3-input{ | |
| padding:1em; | |
| display:block; | |
| width:93%; | |
| border:solid 1px #f1f1f1; | |
| } | |
| .s3-input:hover,.s3-input:focus, .s3-input:active{ | |
| border:solid 1px #ccc; | |
| } | |
| .s3-btn{ | |
| display:block; | |
| width:99%; | |
| background:#f1f1f1; | |
| border:none; | |
| padding:0.5em; | |
| cursor:pointer; | |
| } | |
| .s3-btn:hover{ | |
| background:#ccc; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment