Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

How to Create a Contact Form in Dreamweaver

Install and locate the Flexi Contact Forms Dreamweaver extension

You can download the Flexi Contact Forms Dreamweaver extension from here: 
http://www.extendstudio.com/product/contactforms-for-dreamweaver.html

For Dreamweaver CS5, CS5.5, CS6, CC: 
– open the "Contact_Forms_version.zip" file using Adobe Extension Manager; 
– restart Dreamweaver.

For Dreamweaver CS4: 
– open the "Contact_Forms_version.zip.mxp" file using Adobe Extension Manager CS4; 
– restart Dreamweaver.

The 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.

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.

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

Add a Contact Form to your page in Dreamweaver

1. Setting Up The Site:
Before adding a Contact Form in Dreamweaver, you need to create an html page and save it inside a Dreamweaver site. Here are the step by step instructions: :http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html 

2. Insert a Contact Form

Put your mouse cursor inside the element where you want the contact form to be added and click the "Create Contact Form" button from the Contact Forms "Insert" window.

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.

Customize the Contact Form

1. Set up the Form Elements

- choose the form elements that you want inside the form: “Name”, “Message”, “Email”, “Website” and “Phone”. You can add form elements by clicking the “+” (add) icon;
- choose what elements have to be mandatory, by enabling/ disabling the “Is required” option.
When the “Submit” button is clicked, a validation message will appear if the mandatory fields are not completed;
- set the number of characters allowed in each form field;
- preview the contact form before inserting it into the page.

2. Customize Form Sending Settings

- add the email address where you want the form data to be sent. Inside the "Send mail from" input you have to add an email address that is valid on your server – usually admin@domain-name.com;
- choose whether the message that you want to appear or if you want the user to be redirected to another webpage after the form content is sent successfully.
- click the “Edit Error Messages” button to open the page in Dreamweaver where the Contact Form validation messages can be edited.

3. Customize Form Design Settings

- set the form width;
- choose the position of the form inside the page – left, center or right.

- choose to have the label position at the top of the input, inside the input or in the left side of the input – click here to see the label options;
- 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;
- choose the label font from the font family selection list;
- set the vertical space between the form elements;
- set the label font size in px.
When the label position is set to be inside the input, the “Label font” option is disabled;
- the “text font” option represents the text that the user types inside the form inputs. Choose the text font family from the selection list.

4. Contact Forms predefined skins

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.

Contact Form Message

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:

You can download the Flexi Contact Forms Dreamweaver extension from here: 
http://www.extendstudio.com/product/contactforms-for-dreamweaver.html

Facebook comments:



Leave a Reply