Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS6, CC
- open the "Contact_Forms _[version-no].zxp" file using Adobe Extension Manager;
- restart Dreamweaver.
For Dreamweaver CS5.5, CS5, CS4
- open the "Contact_Forms _[version-no].mxp" file using Adobe Extension Manager;
- restart Dreamweaver.

Install Contact Forms using the Adobe Extension Manager

A.2 Where to find the extension in Dreamweaver


Extend Studio products are available in the "Insert" window in Dreamweaver. Click CTRL+F2 (Command+F2 for MAC) to display the Insert Window.
If the "Insert" window is displayed as Tabs, below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.

Adobe Dreamweaver Insert Tabs


If the "Insert" window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the "Common" drop-down - marked with a down arrow.


Adobe Dreamweaver Insert Window

The Extend Studio products should appear in the pop-up list.

Adobe Dreamweaver Insert Window

A.3 Registration

A.3.1 How to register the extension

When you'll first start the extension, a registration pop-up will appear. Paste the code from the email that you have received from Extend Studio after buying the extension or click on "Use as trial" to use it free for 10 days.

Register Flexi Contact Forms for Dreamweaver

In the trial mode, when you load the page into the browser you will get the following Javascript alert: "This contact form was greated using Flexi ContactForms free demo version. Not for commercial use!".
After you register the extension, all you have to do is to edit the form that was created in trial mode and update it in order to remove the Javascript alert.
All the contact forms that are created after registering the extension will open inside the browser without the "Commercial use" Javascript alert.

A.3.2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid: this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

B. Create a Contact Form

In order to add an Flexi Contact Form to a site, you need to create a html page inside a site. If you don't know how to define a site in Dreamweaver, check this page for help: http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
After clicking the "Insert Flexi ContactForms" button, the ContactForms editor will appear. From here you can add elements to the form, modify its settings and choose a skin.

Insert Flexi Contact Forms for Dreamweaver

B.1 Form Elements

The Form Elements represent the inputs that are included in your form. Whenever a form element is selected you can change its settings from the Flexi ContactForms Editor in right side.

Flexi Contact Forms for Dreamweaver Editor

Each element (except the "Submit button") has the option to choose if it is required or not. The "Is required" option allows you to choose if completing the element is mandatory. When the "Submit" button is clicked, a validation message will appear if the mandatory fields are not completed.
Also, you can change each label name by adding another text inside the input.

Flexi Contact Forms for Dreamweaver - Is Required Option

B.1.b Add, Remove, Edit Form Elements

The Flexi ContactForm extension has 3 default elements- "Name", "Message" and "Submit Button". There are 3 other elements availabe to add - "Email", "Website" and "Phone".
You can add form elements by clicking the "+" (add) icon.

Flexi Contact Forms for Dreamweaver - Add Form Elements

To remove a form element, select the element that you want to be deleted and click the "-" (remove) icon. Any deleted element can be re-added by clicking the "+" (add) icon.
To change the order of the form elements, select the element that you want to move and click the "down" or "up" icon to move it lower or higher in the elements list.

B.1.c Name

Select the "Name" element to edit its settings.

Flexi Contact Forms for Dreamweaver - Name Input

You can choose to have a "Name" element by choosing the "Only name" option. If you choose the "First and Last name" option, a "First name" element and "Last name" separate elements will be created.

Flexi Contact Forms for Dreamweaver - Name Input

You can change the element title by typing another text inside the input. The default label is "Name".
You can set the number of characters allowed by adding another number to the "Number of characters allowed" input.

B.1.d Message

You can set the number of characters allowed by adding another number to the "Number of characters allowed" input.

Flexi Contact Forms for Dreamweaver - Message Input

B.1.e Email


You can set the number of characters allowed by adding another number to the "Number of characters allowed" input.
When the email address input is completed it should include the following characters: "@" and ".". Otherwise, a validation message will appear.

Flexi Contact Forms for Dreamweaver - Email Input

B.1.f Website

You can set the number of characters allowed by adding another number to the "Number of characters allowed" input.
The "Website" input has to include at lease one "." character.

Flexi Contact Forms for Dreamweaver - Website Input

B.1.g Phone

You can set the number of characters allowed by adding another number to the "Number of characters allowed" input.
Inside the "Phone" input, only numbers can be inserted.

Flexi Contact Forms for Dreamweaver- Phone Input

B.1.h Submit Button

You can change the submit button text by adding your own text inside the input. The default element name is "Send form".
The "Submit" element is mandatory, so it does not have an "Is required" option.

Flexi Contact Forms for Dreamweaver - Submit Button

B.2 Form Settings


Flexi Contact Forms for Dreamweaver - Form Settings Tab

B.2.a Email recipient

Insert the email address where you want the form data to be sent.
Inside the "Show the following text" input, you can type any text that will be shown after the form is sent succesfully.

Flexi Contact Forms for Dreamweaver - Email Recipient

You can choose what the form will do when email is sent successfully. The form can either show a message or redirect the user to a page.

The email will be sent to the recipient after you upload the page that includes the form and the correspondent "includes " folder on your web server. If you are testing the form send functionality locally, you will get the following message: "You are running this page locally. Because of this, the email sending functionality will not work. You must run the page on a web server for this functionality to work."

Inside the "Redirect to the following webpage" input you need to add the link to a page from your website where the user will be redirected after the form is sent successfully.
You can add the link to the page either as an absolute link - example: http://www.extendstudio.com//products/dreamweaver-extensions.html or a relative link (if it is redirected to a page from your website) - example: /products/dreamweaver-extensions.html

Flexi Contact Forms for Dreamweaver - Redirect to Webpage

B.2.b Validation messages

You can change the validation messages by clicking the "Edit Error Messages" button.

Flexi Contact Forms for Dreamweaver - Edit Validation Messages

By clicking this button, the xtdContactFormsMessages.js file open in Dreamweaver. This file contains the list with all form elements' validation messages. You can change any message by editing the comment for each element. After you finish editing the messages, save this file and close it.

Flexi Contact Forms for Dreamweaver - Validation Messages

B.2.c Form Width

The form width can be set to "auto" or in px value. You can choose the 2 options from the selection input.

B.2.d Form Align

The form can be aligned to left, centered or to the right side inside its parent container. In order to align the form, its dimension must be set in px.

B.2.e Label Position

You can choose to have the label potition at the top of the input, inside the input or in the left side of the input.

Top position

Flexi Contact Forms for Dreamweaver - Label at Top Position

Left position

Flexi Contact Forms for Dreamweaver - Label at Left Position

Inside position

Flexi Contact Forms for Dreamweaver - Label Inside the Input

B.2.f Label Width

The label width option activates when you set the label position to left. Make sure that the label width is not bigger than the form width.

B.2.g Label Font

You can choose the label font from the font family selection list. Also you can set the label font size in px.
When the label position is set to be inside the input, the "Label font" option is disabled.

Flexi Contact Forms for Dreamweaver - Label Font Family

B.2.g Space between controls

This option allows to to set the vertical space between the form labels. The value can be set in px.

Flexi Contact Forms for Dreamweaver - Space Between Controls

B.2.h Text Font

This represents the text that the user types inside the form inputs. Choose the text font family from the selection list. Also you can set the text font size in px.

Flexi Contact Forms for Dreamweaver - Text Font

B.3 Form Design

Click on the "Form Design" tab to see the available skins. There are 11 form skins inside the Flexi Contact Form extension. Once you choose the desired skin, click the "Insert" button to add the form to your page.

Flexi Contact Forms for Dreamweaver - Form Design

B.4. Preview

The "Preview" option allows you to see how the form looks in the browser before inserting it into the page.

C. Edit a Contact Form

In order to edit the Flexi Contact Form you have to select it inside Dreamweaver. If your mouse cursor is placed somewhere else on the page, you will get the following Dreamweaver alert message: "Please place the cursor inside the Flexi ContactForm you want to edit." .

Edit Flexi Contact Forms for Dreamweaver -Alert Message

Click on the "Edit Contact Form" button to edit the form.
You can edit the contact form settings, change the recipient email, or choose another form design. After you finish changing the form settings, click the "Update" button.

Edit Flexi Contact Forms for Dreamweaver

D. Delete a Conact Form

Click on the "Delete Contact Form" button to delete the contact form.

E. Received Email

After the contact form is successfully sent, the email recipient will get an email with all the data that has been sent. Flexi Contact Form has a default email format that looks like in the following screenshot:

Flexi Contact Forms for Dreamweaver - Email Message

F. Requirements

1. The extensions works on PC or Mac on the following Dreamweaver versions: CS4, CS5, CS5.5, CS6, CC.
2. The Contact Forms web application requires PHP version 5.3 or higher.
3. Make sure to have the php function "sendForm" activated on your server.
4. The page where you use the form must have a HTML 5 Doctype. Click here for more information about the doctype and its importance.

G. FAQ

1. Can I use the license to build forms for an unlimited number of websites?
Yes. This is an unlimited sites license, therefore you can use it for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support [at] extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install it in on the new computer. Before registering, you will have have to reactivate the serial number by clicking the correspondent "Reset license" button from your account.

4. Does the Contact Forms extension have any anti spam mechanism?
Flexi ContactForms are secured by an anti-spam script that will successfully block any spam attempts on your form.
The script uses time spent on the page as the way to verify if the user is really an user or a bot. Basically, the idea is that a normal user will have javascript enabled on his browser and will spend more than 2 seconds on the page before submitting the form. Most of the spam bots out there don't do that.