- Introduction
- The Initial Configuration Script
- Editing Pages
- Configuring - Thank You page
- Preparing Templates
- 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:
- 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.
- Handle with error messages. Put the <!-- FPP_ERROR --> tag in your form's page in the where you'd like to display error messages.
- 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.
- 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 tag after required corrections:
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:
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:
For form names, you can use only letters, numbers, underscore and dash characters.
Corrected HTML Code:
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:
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).
<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>
<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:
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:
We create the email template for the auto generated email to the form's submitter the same way:
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):
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
Please, use a plain text editor to edit config.php to prevent adding unnecessary lines and symbols.
<?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:
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:
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:
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:
or
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:
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:
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.
<?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!