Setting up an email generating form

All you need to do to set up an email generating form is a) create a form in your html page and b) create a separate php file to generate the email based on the data that has been input to the form.

First of all you need to create a form in your html page for users to input their details / message etc:

 

<form id = "contact_form" action = "php/sendmail.php" method = "POST">
 <p><label for="name">Name:</label><br/>
 <input type = "text" size = "40" id = "name" name = "name" /> </p>
 <p><label for="email">Email address: </label><br/>
 <input type = "text" size = "40" id = "email" name = "email" /></p>
 <p><label for="msg"> Message:</label><br/>
 <textarea id="message" name = "message" cols = "32" rows = "10"></textarea></p> 
 <button type = "submit" name = "submit" value = "send">Send Message</button>
 </form>

Line one contains an ‘action’ to link to where you will store the php file necessary for generating the email – in this example you can see that it is located in a folder named “php” and the file is called “sendemail.php” (highlighted red above).

The “method = ‘POST'” command is important as this allows the data to be sent to the php file (highlighted green above)

Each field (name, email address, message etc) has been assigned a corresponding id name (highlighted blue) – these will allow the php script to read whatever has been input to these fields by the user.

Once you have finished the  code for the form on your html page, you need to create the php file that you have instructed it to link to.  To do this, open a blank page and save as (in this example’s case) sendemail.php in a folder called (for example) “php”.  You then need to populate the php file as follows:

(Note: although I have shown these as 2 colours to indicate php and html sections, it is one continuous piece of code in the php file):


<?php
//Start building the mail string
$msg = "Name: ".$_POST['name']."\n";
 $msg .="Email: ".$_POST['email']."\n";
 $msg .="Location: ".$_POST['location']."\n";
 $msg .="Message: ".$_POST['message']."\n";
//Set up the mail
 $recipient = "chriswebb@onebigegg.com";
 $subject = "Message received from ".$_POST['name'];
 $mailheaders = "From: onebigegg.com <onebigegg.com> \n";
 $mailheaders .= "Reply to: ".$_POST['email'];
//send the mail
 mail($recipient, $subject, $msg, $mailheaders);
?>
<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel = "stylesheet" type = "text/css" href = "../css/style.css"/>
 <link href='http://fonts.googleapis.com/css?family=Poiret+One|Josefin+Sans|Monofett|Comfortaa|Gruppo' rel='stylesheet' type='text/css'>
<title>onebigegg.com</title>
 </head>
<body>
<div id = "contact">
<div id = "wrapper">
<p> Many thanks for submitting your message </p>
<p> We will endeavor to get back to you a.s.a.p. </p>
<a href = "http://www.onebigegg.com"> <h1> Click to return site </h1></a>

</div> <!-- end contact -->
</div> <!-- end Wrapper -->
</body>
</html>


 

The section highlighted green above is the php script (which opens with <?php and closes with ?>) This script is collecting the data that has been posted from the form and using it to generate an email.  The actual fields and format will obviously depend on the project, but in this case the subject line on the email received will read “Message from (then user’s name as per details input to form) and the email content will display the users email address as “Reply to: (then user’s email address as per details input to form) followed by the message that the user input.

The section highlighted blue comes after the php script has closed and it a standard html document – this creates the page that the user will see once they have submitted the form – so would usually acknowledge that the message had been sent and have some way of linking back to the main site.

Don’t forget, you won’t be able test this directly through your browser – for the php script to run you will have to upload to a server and then test.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s