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

Configuration of an Existing Form

Author: Eileen Wilde Reference Number: AA-00145 Views: 25313 Last Updated: 10/19/2009 09:35 AM 46 Rating/ 6 Voters
  1. Introduction
  2. The Initial Configuration Script
  3. Editing Pages
  4. Configuring - Thank You page
  5. Preparing Templates
  6. Configuring config.php

Introduction

Here, we'll guide you through the process of configuring an existing form with Form Processor Pro. After completing this sample, you'll be able to configure any form in just 5 minutes or less!

To configure 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 FORM tag.
  2. Handle with error messages. Put the <!-- FPP_ERROR --> tag in your form's page in the 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 a 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 to the submitter's entered value after processing.
  4. Edit simple config file with required configurations. Set actions to perform, validation rules etc. All available actions, validations and modifiers can be found in 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

The Initial Configuration Script

Run the Initial Configuration Script and follow the instructions in order to perform initial Form Processor Pro configuration. The Initial Configuration Script (index.php) is located in the fpp/install folder. 

E.g.: If you've uploaded the fpp folder to www root folder of your www.yourdomain.com  server, you can access the Initial Configuration Script via www.yourdomain.com/fpp/install/index.php URL.

Editing Pages

We put the <!-- FPP_ERROR --> tag in the form's HTML in a place where we'd like to display error messages.

Now we need to point our 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 a relative (recommended) or an absolute path. 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 the relative path in the action parameter and do not use the "Base href" tag, every page after first one 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 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”. You need to name your form only on the first page.

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:

<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">
Note:
Please, specify absolute paths in all links, images, the path for 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 HTML tag <BASE> (recommended) to specify a base URL, you need to put the <BASE> tag just after the <HEAD> tag:
<head>
<base href="URL_TO_PAGE">

If you have more than one form page, repeat this step for every page. 

Configuring - 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 Thank You 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 the name 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>

Preparing Templates

Email templates are simply text files with specially formatted content. Generally, email has the following required headers (rows in template): To, From, Subject and Message Body. However, other headers 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#}

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

Configuring config.php

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:i 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” action 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 form!