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:

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 tag after required corrections: 

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:

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:

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:

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:

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:

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:

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:

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):

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

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” 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:

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:

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.

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