iWeb FAQ - Forms

iWebFAQ.org

 

How can I provide a form in iWeb that visitors can complete and return via e-mail?

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 

Chapter 1: People’s concerns

Chapter 2: Using third-party Form builders providing codes to paste in an HTML Snippet

Chapter 3: Building your own form



Chapter 1: People’s concerns


Talking about forms people are (and should be) concerned about two things: reliability and safety.


The first one means that the form must work 24h a day, every day of the week the way it is supposed to work.


The second one is about other people not seeing what someone else entered into the fields, it’s about third parties not making an abusive use of the data people enter in the form and finally it’s also about you not receiving spam all the time.


I used Wufoo.com myself to create a few forms in the past and it works really great! I think it’s very reliable (it always worked) and safe because your e-mail address doesn’t display anywhere in the code you put on your website. If you create your own form you will always have your e-mail address displaying somewhere in the code where it is potentially found by spambots (applications looking for e-mail addresses on the web at which they send spam). Also I don’t think Wufoo is making any illegal use of the data they get. I trust them.



Chapter 2: Using third-party Form builders providing codes to paste in an HTML Snippet


Wufoo.com ( Wufoo Form Gallery )



Other...


Formlogix.com


Createforms.com


Response-o-matic.com



Chapter 3: Building your own form


To create your own form without using a Form builder you may also want to have a look at this post by Roddy on the Apple iWeb Discussion Forums.


Here I will try to explain how building your own form works by using the tutorial you find at php.about.com. I will just provide you a little more in-depth info. If what php.about.com writes it’s enough for you to understand how it works then follow their tutorial without reading what I write.


Please note that this may require some trial and error and a lot of thinking at your side too. I can’t end up building a form for each of you! I don’t want to do that nor do I have the time to do that!


To create your own form you first have to create the form and then a tool which gets the data people enter into the form and sends it to your e-mail account. Let’s start...


First look at the code of the sample form (from this page)


<form method="post" action="/contact.php">

<table bgcolor=#ffffcc align=center>

<tr><td colspan=2><strong>Contact us using this form:</strong></td></tr>

<tr><td>Department:</td><td><select name="sendto">

<option value="info@mycompany.com">General</option>

<option value="support@mycompany.com">Support</option>

<option value="sales@mycompany.com">Sales</option>

</select></td></tr>

<tr><td><font color=red>*</font> Name:</td><td><input size=25 name="Name"></td></tr>

<tr><td><font color=red>*</font> Email:</td><td><input size=25 name="Email"></td></tr>

<tr><td>Phone:</td><td><input size=25 name="Phone"></td></tr>

<tr><td>Subscribe to<br> mailing list:</td><td><input type="radio" name="list" value="No">No Thanks<br> <input type="radio" name="list" value="Yes" checked> Yes, keep me informed<br></td></tr>

<tr><td colspan=2>Message:</td></tr>

<tr><td colspan=2 align=center><textarea name="Message" rows=5 cols=35></textarea></td></tr>

<tr><td colspan=2 align=center><input type=submit name="send" value="Submit"></td></tr>

<tr><td colspan=2 align=center><small><font color=red>*</font> required fields</small></td></tr>

</table>

</form>




<tr> equals a row

<td> equals a cell

A row <tr> may contain multiple cells <td>


colspan defines the number of columns a cell can/should span (make use of). Like doing a "Merge cells" in Excel.


To add a row in a form type in <tr>


Type a heading/title which will display near the input field between cell tags <td></td>


<tr><td>Name</td>


and open another cell by typing <td>


<tr><td>Name</td><td>


You now have to decide the kind of input. Whether you want a tear down menu, a text line, a text area, radio buttons or a checkbox.


-----------


Code for a tear down menu:


<select name="sendto">

<option value="info@mycompany.com">General</option>

<option value="support@mycompany.com">Support</option>

<option value="sales@mycompany.com">Sales</option>

</select>


name= defines the name of the input. This is used to retrieve the information for the e-mail to get sent. It's not displayed on the form.

option value= stays for the value of the choice the customer made. In other words what you will see when you get the e-mail. It's not displayed on the form.

Before the closing </option> tag you define what people should see to choose from. This is what is displayed in the tear down on the form.



Code for a text line:


<input size=25 name="Phone">


size= defines the number of characters which will be displayed hence the width of the text box

name= defines the name of the input. This is used to retrieve the information for the e-mail to get sent. It's not displayed on the form.



Code for a text area:


<textarea name="Message" rows=5 cols=35></textarea>


name= defines the name of the input. This is used to retrieve the information for the e-mail to get sent. It's not displayed on the form.

rows= and cols= are used to define the size of the text area



Code for radio buttons (two choices):


<input type="radio" name="list" value="No">No Thanks<br>

<input type="radio" name="list" value="Yes" checked>Yes, keep me informed<br>


name= defines the name of the input. This is used to retrieve the information for the e-mail to get sent. It's not displayed on the form. If you have multiple options and want to have people choosing one use the same name for all options.

value= stays for the value of the choice the customer made. In other words what you will see when you get the e-mail. It's not displayed on the form.

Before the <br> tag you define what people should see to choose from. This is what is displayed on the form.

If you want to have a radio button checked by default type in "checked" as in the example above. If you don't want to have a button checked by default remove "checked".



Code for checkbox (two checkboxes):


<input type="checkbox" name="buy" value="Milk">Milk<br>

<input type="checkbox" name="buy" value="Bread" checked>Bread<br>


name= defines the name of the input. This is used to retrieve the information for the e-mail to get sent. It's not displayed on the form. If you have multiple options in a same category and want to have people choosing from them use the same name for all options.

value= stays for the value of the choice the customer made. In other words what you will see when you get the e-mail. It's not displayed on the form.

Before the <br> tag you define what people should see to choose from. This is what is displayed on the form.

If you want to have a radio button checked by default type in "checked" as in the example above. If you don't want to have a button checked by default remove "checked".


-----------


Once you wrote the code for the input paste it in the new cell created earlier...


<tr><td>Name</td><td>


I will use a text line


<tr><td>Name</td><td><input size=25 name="Name">


then close the cell tag the row tag


<tr><td>Name</td><td><input size=25 name="Name"></td></tr>


Now you wrote a row of your form. Of course you can add more of them using the same or a different type of input.


Once you wrote the lines of your form paste them between:


<form method="post" action="/contact.php">

<table bgcolor=#ffffcc align=center>


and


<tr><td colspan=2 align=center><input type=submit name="send" value="Submit"></td></tr>

<tr><td colspan=2 align=center><small><font color=red>*</font> required fields</small></td></tr>

</table>

</form>


Example:


<form method="post" action="/contact.php">

<table bgcolor=#ffffcc align=center>

<tr><td>Name</td><td><input size=25 name="Name"></td></tr>

<tr><td>E-Mail</td><td><input size=25 name="Email"></td></tr>

<tr><td>Message</td><td><textarea name="Message" rows=5 cols=35></textarea></td></tr>

<tr><td colspan=2 align=center><input type=submit name="send" value="Submit"></td></tr>

<tr><td colspan=2 align=center><small><font color=red>*</font> required fields</small></td></tr>

</table>

</form>


That’s it for the form.


Now we need to create the tool which gets the data from the form and sends it to your e-mail account. This is done with a PHP file. Again first have a look at the code (from this page)...


<?php

$to = $_REQUEST['sendto'] ;

$from = $_REQUEST['Email'] ;

$name = $_REQUEST['Name'] ;

$headers = "From: $from";

$subject = "Web Contact Data";


$fields = array();

$fields{"Name"} = "Name";

$fields{"Company"} = "Company";

$fields{"Email"} = "Email";

$fields{"Phone"} = "Phone";

$fields{"list"} = "Mailing List";

$fields{"Message"} = "Message";


$body = "We have received the following information:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }


$headers2 = "From: noreply@YourCompany.com";

$subject2 = "Thank you for contacting us";

$autoreply = "Thank you for contacting us. Somebody will get back to you as soon as possible, usually within 48 hours. If you have any more questions, please consult our website at www.oursite.com";


if($from == '') {print "You have not entered an email, please go back and try again";}

else {

if($name == '') {print "You have not entered a name, please go back and try again";}

else {

$send = mail($to, $subject, $body, $headers);

$send2 = mail($from, $subject2, $autoreply, $headers2);

if($send)

{header( "Location: http://www.YourDomain.com/thankyou.html" );}

else

{print "We encountered an error sending your mail, please notify webmaster@YourCompany.com"; }

}

}

?>



Now let’s see it step by step...


The first part of the code defines the header data of the E-Mail.


$to = $_REQUEST['sendto'] ;

Defines to which e-mail address the form is sent to. As you see the sample code retrieves this info from the field named sendto in the form. Which in the sample code equals a tear down menu. The code takes the value depending on the visitor’s choice in that field in the form. If you don’t want the e-mail to be defined on the form you can enter

$to = "you@yourdomain.com" ;

and the e-mail will be sent to you@yourdomain.com


Same happens for the from-e-mail and the name, they are taken from the form.


$subject = "Web Contact Data";

Defines the subject of the e-mail. If you’d like to have it defined in the form you would have to add a field in the form for it and name it subject for example:

<tr><td>Subject</td><td><input size=25 name="Subject"></td></tr>

and in the PHP code change the line to

$subject = $_REQUEST['Subject'] ;


The second part of the code defines the body, the content, of the e-mail. It’s a list of all the fields on the form. On the left side you type the name of the field on the form and on the right side what you want to appear in the e-mail. Example:


In the form you have...


<tr><td>Subscribe to<br> mailing list:</td><td><input type="radio" name="list" value="No">No Thanks<br> <input type="radio" name="list" value="Yes" checked> Yes, keep me informed<br></td></tr>


in the tool to send the e-mail


$fields{"list"} = "Mailing List";


In the third part...


$body = "We have received the following information:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }


“We have received the following information” is what the e-mail reads in addition to the values people enter in the various fields of the form.


The fourth part


$headers2 = "From: noreply@YourCompany.com";

$subject2 = "Thank you for contacting us";

$autoreply = "Thank you for contacting us. Somebody will get back to you as soon as possible, usually within 48 hours. If you have any more questions, please consult our website at www.oursite.com";


defines what will be written in the confirmation e-mail which is sent to the people who contacted you. Define what e-mail should display in the “From” field,what displays as the subject of the e-mail and its content. If you don’t want people to get a confirmation e-mail delete this entire part and the following line of code you find at the bottom of the form:


$send2 = mail($from, $subject2, $autoreply, $headers2);


The next thing to mind about is where people get redirected to when the form is sent which is defined in this line:


{header( "Location: http://www.YourDomain.com/thankyou.html" );}


simply replace the URL in there.


That’s about it...


For the example I used all through this tutorial... This is what it looks like:




Click here to download the source code and try it out on your server. You will get a folder called “form_source”. In this folder you find a form_code.txt file. Open it in TextWrangler, copy the code and paste it in an HTML Snippet on one of your pages.



<div style="width:120px; font-family: Arial; font-size: 12px; color:#000000;">

<form method="post" action="/contact.php">

<table bgcolor=#ffffff align=center>

<tr><td>Name:<small><font color=red>*</font></small></td><td><input size=25 name="Name"></td></tr>

<tr><td>E-Mail:<small><font color=red>*</font></small></td><td><input size=25 name="Email"></td></tr>

<tr><td>Message:</td><td><textarea name="Message" rows=5 cols=35></textarea></td></tr>

<tr><td>2+2=<small><font color=red>*</font></small></td><td><input size=15 name="spam"></td></tr>

<tr><td colspan=2 align=center><input type=submit name="send" value="Submit"></td></tr>

<tr><td colspan=2 align=center><small><font color=red>*</font> required fields</small></td></tr>

</table>

</form>

</div>



Open the contact.php file in TextWrangler and edit it as described further on...



<?php

$to = "you@yourdomain.com.org" ;

$from = $_REQUEST['Email'] ;

$name = $_REQUEST['Name'] ;

$headers = "From: $name <$from>";

$subject = "Web Contact Data";


$fields = array();

$fields{"Name"} = "Name";

$fields{"Email"} = "Email";

$fields{"Message"} = "Message";


$body = "We have received the following information:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }


$headers2 = "From: YOU <you@yourdomain.com>";

$subject2 = "Thank you for contacting us";

$autoreply = "Thank you for contacting us. Somebody will get back to you as soon as possible, usually within 48 hours. If you have any more questions, please consult our website at www.yoursite.com";


$spam = $_REQUEST['spam'] ;

$correct = "4";


if ($spam > $correct) {print "The result you entered for 2+2 is too high, please go back and try again.";}

else {

if($spam < $correct) {print "The result you entered for 2+2 is too low, please go back and try again";}

else {

if($from == '') {print "You have not entered an email, please go back and try again";}

else {

if($name == '') {print "You have not entered a name, please go back and try again";}

else {

$send = mail($to, $subject, $body, $headers);

$send2 = mail($from, $subject2, $autoreply, $headers2);

if($send)

{print "Thank you for contacting us."; }

else

{print "We encountered an error sending your mail, please notify webmaster@yourdomain.com"; }

}

}

}

}

?>



In the .php file change you@yourdomain.com to your e-mail address, YOU to your name. Upload the contact.php file containing the code to send the e-mail to the root of your server for it to be reachable under http://yourdomain.com/contact.php (If you don't know what the root is or how this is done read it here). Make sure to enter the right path to it in the form’s code. If you upload the contact.php file to your root change


<form method="post" action="contact.php">


to


<form method="post" action="/contact.php">


as you see in my code. Publish your page with the form to the web and try it out.




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark