Contact Page Form

 

Many of our templates come with a simple, .php-driven form. It's not very complicated and you can set up a contact form in just a few minutes. It's just a matter of putting the pieces together.

The HTML Code:

html
  1. <form class="contactform"
  2.       name="contactform"
  3.       method="post" action="#">
  4. <label for="first_name">First Name *</label>
  5. <input type="text" name="first_name"
  6.       maxlength="50" size="30">
  7. <label for="last_name">Last Name *</label>
  8. <input type="text" name="last_name"
  9.       maxlength="50" size="30">
  10. <label for="email">Email Address *</label>
  11. <input type="text" name="email"
  12.       maxlength="80" size="30">
  13. <label for="telephone">Telephone</label>
  14. <input type="text" name="telephone"
  15.       maxlength="30" size="30">
  16. <label for="comments">Comments *</label>
  17. <textarea name="comments" maxlength="1000"
  18.      cols="30" rows="5"></textarea>
  19. * = required<br>
  20. <input class="submit" type="submit"
  21.      value="Submit">
  22. </form>

There is one crucial part of the form coding that is missing. That is the "action" that the form will take once the submit button is clicked. Form-to-email scripts will vary, although in theory they are much alike.

The CSS:

css
  1. form.contactform {
  2. width: 99%;
  3. text-align: left;}

  4. .contactform input,
  5. .contactform textarea {
  6. width: 99%;
  7. border: 1px #c0c0c0 solid;
  8. background-color: #efefef;
  9. padding: 5px;
  10. color: #000000;
  11. border-radius: 5px;}

  12. .contactform label {
  13. width: 99%;
  14. text-align: left;
  15. font-style: italic;
  16. line-height: 1.5em;
  17. display: block;
  18. margin-bottom: 4px;}

  19. .contactform input {
  20. margin-bottom: 10px;}

  21. .contactform textarea {
  22. resize: none;}

 

The Form:

* = required

While the form looks complete, it is not active since it is not tied to any form-to-email script. If you click on the Submit button, you will receive a notice that the form has been disabled. This is a simple Javascript "Alert".

In our templates that contain forms, we have implemented a very basic contact form based on the above coding. Your visitors can fill out the form and you will receive the results by email. In order to receive the results, you will need to edit a few lines on the send_form_email.php script (located in the javascripts folder) to set your email address where the form results should be sent and to set a subject line for the emails.

Set email and subject line
  1. // EDIT THE 2 LINES BELOW AS REQUIRED
  2. $email_to = "yourname@yourdomain.com";
  3. $email_subject = "Your email subject line";

Once the form has been submitted, you can redirect the user to your "thankyou.html" page. On the php script, near the bottom of the page, you will need to set the absolute file path to your Thank You page:

direct to thank you page
  1. <!-- include your own success html here -->
  2. <script type="text/javascript">
  3. <!--
  4. window.location = "http://www.yourdomain.com/thankyou.html"
  5. //-->
  6. </script>

Special Note: While most web hosts support PHP5, there may be an instance where your web host does not. In these cases, they will usually offer their own form-to-email scripts. Generally, the form on the contact page does not need to be changed, but you will need to change the "action" portion to point to the script that processes the form. You will need to contact your web host for technical details.