Dreamweaver, Spring 2011, Web Design

Contact Form with a PHP Autoresponder

by  •  • Comments Off

This tutorial exercises three main concepts of Lesson 3

  • the POST method of data capture
  • server side includes
  • php programming for business rules.

We are going to create a simple example of a very useful website feature.   We will  continue to build more capabilities to this contact form in several future lessons, such as saving the data to a file and/or database, and sending an HTML email autoresponse.    For now we will respond with a simple dynamic web page.   We will start by creating 5 files – a php contact form, a php autoresponse page, and three php include files that will be called into the autoresponder conditionally.

Simple Contact Form

  • Create a new php page with no styling using the HTML5 document type.
  • Using the INSERT panel, insert a form element and add the following elements within the form
    • 3 text fields wrapped in labels: First Name, Last Name and Departure Date
    • A select group with choice of three cities
    • A submit button
  • Change Departure to  type=”date”

contact-form

Simple Auto Responder

  • Create a new php page with no styling using the HTML5 document type.
  • Create some text that uses the $_POST superglobal associative array that we discussed on January 27.  The array values are   ‘echoed in’  to a few to the text areas in the page.
  • Create a php block with a conditional statement that checks for the destination and includes an appropriate file.

autoresponder

The Conditional Includes

  • Create a new blank file (choose any new file type in Dreamweaver and delete all the contents.)
  • Create HTML markup appropriate for a sales pitch based on one of the Destinations.   Use images and content to ‘sell the product’.   Keep it simple.
  • Note that you can continue to refer to the $_POST array even in the include file.
  • Duplicate & modify this file as needed for each selection option.

responder-include

Summary

Get the example files here.

Note that while this example is very simple, it is a fundamental building block for many different applications.   And it may be your first ‘dynamic’ webpage. I made very few style additions and those are inline.   This is against generally accepted design  principles,   Why do you think that I did this?

Note also that it uses a very simple version of a common programming technique – Model View Controller or MVC. MVC is often  used in web-based applications and essentially means that the business rules, the interface and the data are modeled as individual entities in separate webpages that can be composited (includes) to provide a view.   You can see how the autoresponder.php file is a controller, compositing a page based on the information requested by the form (the viewer).  The includes are the model – the information that is presented through the viewer.  see MVC for Noobs.