Online Chat
 Call Us: 
1-877-744-1221
Browse Submit a Ticket
 
Advanced Search
Tools
Rss Categories

 Featured
Setting-up My First Form

Author: Eileen Wilde Reference Number: AA-00144 Views: 30090 Last Updated: 02/16/2010 08:00 AM 17 Rating/ 3 Voters

Setting-up My First Form

  1. Introduction
  2. Creating the contact form with an HTML editor
  3. Configuring the form
  4. Configuring the Thank You page
  5. Creating Email templates
  6. Configuring config.php - Summarizing the configuration

Introduction

Here, we'll guide you through the process of creating and configuring your first form with Form Processor Pro. After learning this sample  process you'll be able to configure any form in just 5 minutes or less! To begin with, we'll create a simple contact form with the following in mind:

  • We will use the form fields: Name, Phone, Email, Subject and Comment
  • We will validate Email field for properly formatted email addresses
  • The Name, Email and Subject fields are required
  • We want to send form results to our email address
  • We want to send an auto-responder confirmation email to the person submitting the form
  • We will provide the user with error messages on the same page and highlight empty or an improperly formatted email field
  • We would like to have a custom thank you page with a personalized greeting

Hmm, that's pretty much of the requirements for a simple form! However, you can create significantly complicated and sophisticated forms with Form Processor Pro, too. In this case, we just want to have a contact form to be processed the right way and accept only correctly formatted submissions, avoiding user typos and mistakes.

To create any form with Form Processor Pro you only need to do four easy things:

  1. Point your form to FPP and give your form a name. You should point the ACTION attribute of your form to the fpp directory and give your form a unique name by inserting a HIDDEN field in the form's HTML just after the FORM tag.
  2. Handle error messages. Put the <!-- FPP_ERROR --> tag in your form's page where you'd like to display error messages.
  3. Create the required Email, HTML, and/or Log templates. Use {# and #} brackets and hash signs to include any variable (field content) in the template. If you have text field with name=email then you can use this variable in any template by putting it in brackets like this: {#email#}. This will be changed with user's entered value after processing.   Be sure to use both the brackets ({}) and the pound signs (#).
  4. Edit the config file with required configurations. Set the actions to perform, the validation rules etc. All available actions, validations and modifiers can be found in this manual. Remember you use the same configuration file for all forms.

In order to continue with the following  steps you need to have Form Processor Pro installed on your web server and the initial configuration should be complete. Please refer to the Installation section of this manual.

In this example, we have a domain: mydomain.com and Form Processor Pro installed in the “fpp” public folder under the www root. In other words Form Processor Pro can be accessed through: http://www.mydomain.com/fpp/index.php

Creating the contact form with an HTML editor

We've used Dreamweaver to create the form and we've got the following form and auto-generated HTML code:

HTML Code of the Form Page:
<html>
<head>
<title>My Contact Form</title>
</head>
<body>
<h3>My Contact Form</h3>
<p>* - required fields</p>
<form name="form1" method="post" action="">
<table width="300" border="0">
<tr>
<td><div align="right">* Full Name:</div></td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td><div align="right">* Email:</div></td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td><div align="right">Phone:</div></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><div align="right">* Subject</div></td>
<td><input type="text" name="subject"></td>
</tr>
<tr>
<td valign="top"><div align="right">Comment:</div></td>
<td><textarea name="comment" rows="5"></textarea></td>
</tr>
<tr>
<td valign="top"> </td>
<td><input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>

Configuring the form

We will put the <!-- FPP_ERROR --> tag in the form's HTML in the place where we'd like to display error messages. (See the changed code below.) Now we need to point the form to be processed with Form Processor Pro.

We do this by editing the FORM tag's ACTION attribute to refer to the URL where Form Processor Pro resides. You can use either relative or absolute paths. We need to set the METHOD attribute as POST as well. And finally, set ENCTYPE as MULTIPART/FORM-DATA.

Form tag before: 

<form name="form1" method="post" action="">

Form tag after required corrections: 

<form name="form1" method="post" action="http://www.mydomain.com/fpp/index.php" enctype="multipart/form-data">

If you use a relative path in the action parameter and do not use a "Base href" tag, every page after first page must have the action="index.php" parameter:

<form name="form1" method="post" action="index.php">

That's all for the FORM tag. Now we need to give the form a unique name. Let's name it “contact_form”. We can do this by inserting a HIDDEN field just after the FORM tag with the name “fpp_form” and value “contact_form”. This name is not the same "name" as the name= value in the FORM tag.  FPP uses the hidden field to relate to the form.

Like this:

<input name="fpp_form" type="hidden" value="contact_form">
Note:
For form names you can use only letters, numbers, underscore and dash characters.
Corrected HTML Code with highlighted changes:
<html>
<head>
<title>My Contact Form</title>
</head>
<body>
<h3>My Contact Form</h3>
<p><!-- FPP_ERROR --></p>
<p>* - required fields</p>
<form name="form1" method="post" action="http://www.mydomain.com/fpp/index.php" enctype="multipart/form-data">
<input name="fpp_form" type="hidden" value="contact_form">
<table width="300" border="0">
<tr>
<td><div align="right">* Full Name:</div></td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td><div align="right">* Email:</div></td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td><div align="right">Phone:</div></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><div align="right">* Subject</div></td>
<td><input type="text" name="subject"></td>
</tr>
<tr>
<td valign="top"><div align="right">Comment:</div></td>
<td><textarea name="comment" rows="5"></textarea></td>
</tr>
<tr>
<td valign="top"> </td>
<td><input type="submit" name="Submit" value="Submit">
<input type="reset" name="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Note:
Please specify absolute paths for all links, images, the path of the action parameter, etc. in your form pages. Otherwise, all relative paths will be relative to the Form Processor Pro location, but NOT to your web page location. Or you may use the HTML tag <BASE> to specify the base URL:
<BASE HREF="URL_TO_PAGE">

If you have more than one form page, repeat this step for each times. It's not necessary to add hidden field to pages other than first.

Save the form as: contact.html

Configuring the Thank You page

Since we want a  custom Thank You page we need to create it before dealing with the email template and the config file.

So, on the Thank You page we want to put something like this:

Dear (here we would like to put user's name),
Thank you for your interest in our company. We will reply as soon as possible!
An email has been sent to (here we would like to put user's email).
Initial HTML code for the Preview Page:
<html>
<head>
<title>My Contact Form - Thank you!</title>
</head>
<body>
<p>Dear (here we would like to put user's name),</p>
<p>Thank you for your interest in our company. We will reply as soon as possible!</p>
<p>An email has been sent to (here we would like to put user's email).</p>
</body>
</html>

In order to insert any variables dynamically, we need to use the {# and #} brackets. Inside these brackets, we need to put the appropriate variable name. The variable name is of the corresponding field in our form. In our case, we should use {#name#} and {#email#} accordingly. So, we will have the following changes in our HTML code for the Thank You Page:

HTML code for the Thank You page with highlighted changes:
<html>
<head>
<title>My Contact Form - Thank you!</title>
</head>
<body>
<p>Dear {#name#},</p>
<p>Thank you for your interest in our company. We will reply as soon as possible!</p>
<p>An email has been sent to {#email#}.</p>
</body>
</html>

Save the Thank You page as: thank-you.html

Creating Email templates

Email templates are simply text files with specially formatted content. Generally, email has the following required fields (rows in template): To, From, Subject and Message Body. However, other fields like BCC, Attachments etc. are also possible. Please refer to the Email Sending Action article for more information. An email template should look like this:

Email template:

To: recepient@somehost.com
From: sender@somehost.com
Subject: This is an email subject

Message Body Text in free form (Either plain text or HTML formatted text)

In order to use variables (fields) we need to put them in curly brackets with pound signs (#), just like in the previous step. We want all form fields to be included in our email. So, the email template to be sent to us should look like this:

To: info@mydomain.com
From: {#email#}
Subject: Contact Form Filled

Information from the Contact form:
Full Name: {#name#}
Email: {#email#}
Phone: {#phone#}

Subject: {#subject#}
Comments:
{#comment#}

Save the Email template “to us” as: email.txt

We create the email template for the auto generated email to the form's submitter the same way:

To: {#email#}
From: info@mydomain.com
Subject: Thank you for contacting Mydomain.com

Dear {#name#},
You have submitted the following information to mydomain.com
---
Name: {#name#}
Email: {#email#}
Phone: {#phone#}
Subject: {#subject#}
Comments:
{#comment#}
---
Thank you for contacting us. We will respond as soon as possible!
Sincerely,
Mydomain.com Team

Save the Email template “to client” as: autoresponder.txt

Configuring config.php - Summarizing the configuration

We have configured our form, thank you page and prepared the required email templates. Now in order to make the final configurations we have to teach FPP how we would like our form to be processed. To do so, we have to edit config.php located in the Form Processor Pro installation.

File placement on the web server

We modify/create config.php, we should place our created files to the web server, as we will use paths to these files in our config.php file. So, we place contact.html and thank-you.html in the web server's www public folder. Both email template files (email.txt and autoresponder.txt) we place in separate folder under www.

  • www - public folder of mydomain.com
    • fpp - folder with the installation of Form Processor Pro
      • attachments
      • classes
      • install
      • lang
      • plugins
      • tmp
      • .htaccess
      • captcha.img.php
      • config.php (configuration file)
      • fpp-test.php
      • index.php
      • style.css
    • ..
    • contact - folder with email templates
      • .htaccess - to protect this folder from outside browsing, see tip-suggestion below
      • email.txt
      • autoresponder.txt
    • contact.html  (our contact form)
    • thank-you.html (our thank you page)
    • .. - and other web site pages

In our case:

FPP can be accessed through: http://www.mydomain.com/fpp/index.php

Contact form can be accessed through: http://www.mydomain.com/contact.html

Tip: In order to protect your email template files from undesirable browsing through HTTP, we suggest you to place them in a separate folder and protect this folder from browsing. You can use an .htaccess file for this purpose on any Unix/Linux compatible host. Just add/create this file (.htaccess) in the folder with email templates with the following content (you can also copy the .htaccess file from “tmp” or “attachments” folder in the fpp folder):

<Files *>
Order allow, deny
Deny from all
</Files>

You will protect yourself from email harvesting bots by doing this.

On Windows based hosts, you can do this by setting the corresponding permissions for this folder.

Adding a new form to the config.php file

Now we have all the required files in place and we can edit our config.php file

Note:
Please, use a plain text editor to edit config.php to prevent adding unnecessary lines and symbols.
Sample content for config.php
<?php header('Location: index.php'); ?>
/* GLOBAL FPP SETTINGS - BEGIN. THESE SETTINGS ARE APPLIED TO ALL FORMS! */
mysql_host = localhost
mysql_user = user_name
mysql_password = password
mysql_db = fpp5
smtp_server = localhost
smtp_port = 25
date_format = H:m d/m/y
/* GLOBAL FPP SETTINGS - END */
/* FORM configurations. [form_name] - Declares form name and its settings below. */
[some_form]
page = ../form.html
page = ../thank-you.html
required_fields = name (Full Name), email (Contact Email), subject (Subject)
email_fields = email (Contact Email)
autogen_email = info@mydomain.com

First, we have to declare a new form in our configuration file. We do this by adding a form name in [ ] brackets as a new line at the end of config.php file or just after global settings section. The form's name is the value used for previously added hidden files. In our case it's “contact_form”.

In our case we have:

[contact_form]

After the form's declaration (form name in brackets) we can put any form settings we like.

Ok, now we have to declare all the pages that will be used during Form Processor Pro processing in a particular process order. We use the “page” setting for this purpose and set full or relative paths to these pages (relative to the fpp). If we would like to show a Thank You page just after the successful submission of our one-page contact form, we have to put it as second one.

Just like this:

page = ../contact.html
page = ../thank-you.html
Note:
You have full control over any server-side script execution on form pages. If you use the relative or absolute path to the file (e.g.: "../form/file.html" or "/fpp/form/filename.php") Form Processor Pro will open it as a text file. No scripts (e.g.: PHP, ASP) will be executed on the page. If you use the full URL (e.g.: "http://www.yoursite.com/path/file.html") Form Processor Pro will let the webserver execute all server-side scripts on the page, and then will parse the form. The PHP option "allow_url_fopen" must be enabled for this behaviour.

Setting up validations

In order to set Full Name, Email and Subject fields as required, we need to use the “required_fields” validation rule and put all required field names here. Thus:

required_fields = name (Full Name), email (Contact Email), subject (Subject)

Please note that phrases in the ( and ) brackets (parentheses) are just used in error messages,not as internal field names in HTML. Thus your error messages can be intuitive, user-friendly, and you can even use language other than English! As we have already mentioned you can put validation rules as one field per line or write all of them  in one string and separate field names with commas.

Thus:

required_fields = name (Full Name), email (Contact Email), subject (Subject)

or

required_fields = name (Full Name)
required_fields = email (Contact Email)
required_fields = subject (Subject)

will have the same effect - required form fields: name, email and subject.

In order to require only properly formatted emails in the email field, we will use the “email_fields” validation rule, the same way as above:

email_fields = email (Contact Email)

As you can see you can have more than one validation per field, - any amount, actually, within reason, of course.

For more information on possible validation rules refer to the Field Validations chapter.

Setting up email sending

We would like to send two emails: one to us with form results and another as an auto responder to the person who submitted the form. We have already created these templates and we use them here with “email” action.

Like this:

email = ../contact/email.txt
email = ../contact/autoresponder.txt

For more information on possible actions refer to the Actions chapter.

That's all the configurations needed for the config.php file according to our initial requirements for this Contact Form.

After adding all of the above to our config.php file, we have the following changes to it:
<?php header('Location: index.php'); ?>
/* GLOBAL FPP SETTINGS - BEGIN. THESE SETTINGS APPLY TO ALL FORMS! */
mysql_host = localhost
mysql_user = user_name
mysql_password = password
mysql_db = fpp5
smtp_server = localhost
smtp_port = 25;
date_format = H:m d/m/y
/* GLOBAL FPP SETTINGS - END */
/* FORM configurations. [form_name] - Declares form name and its settings below. */
[contact_form]
page = ../contact.html
page = ../thank-you.html
required_fields = name (Full Name), email (Contact Email), subject (Subject)
email_fields = email  (Contact Email)
email = ../contact/email.txt
email = ../contact/autoresponder.txt

That's all! We have finished configuring our first form!