View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Need step by step for Contact Form

Thread began 1/05/2010 11:14 pm by chris-britton396422 | Last modified 1/11/2010 6:19 pm by chris-britton396422 | 6091 views | 31 replies

neilo

Hi Chris,

Here we go!

1. There is a div which surrounds your form fields (it may have a black dotted line surrounding it in design view). Firstly, give that div an ID. Put your cursor anywhere inside that div somewher in the form area (but not on one of the form elements).
2. Select <div> from the elements bar (just above the properties panel / property inspector), and in the 'Div ID' box, type 'formContainer'.
3. Next thing is to get the form sitting inside of the div tags (instead of the div sitting inside the form tags).
4. In code view, find the line:

<div id="formContainer" style="width:600px">


and cut and paste it into the previous line, immediately before the opening '<form' tag.

The line now looks like this:

<td height="576" valign="top"><div id="formContainer" style="width:600px"><form action="" method="post" name="emailContact" id="emailContact" onsubmit="">


Do the same with the closing div tag, which needs to go [i]after[/] the closing '</form>' tag:

</form></div>    </td>



5. In design view, select the formContainer div by clicking anywhere inside the form (but not on one of input fields) and select '<div#formContainer> from the elements bar above the properties panel.
6. With the div selected, go to the 'CSS Styles' panel. (if you can't see it, press Shift + F11). Change the width to desired width (try 300px).
7. Next, just underneath where it says 'width', click 'Add Property'. Scroll down the list and select 'margin'. Enter '20px auto' as its value.
8. With the div still selected, click 'Add Property' again, and this time select 'padding'. Give it a value of 10px.
9. For the border, click 'Add Property' again, and this time select 'border' and type in the values: solid 1px #CCC (OK to copy and paste this).
10. While you're there, if you want to set the font for the form you could also select 'font-family' (Arial, Helvetica, sans-serif) and 'font-size' (12px).

Now to get the form fields looking good.

Firsly, click on the text fields and message area one by one and from the properties panel/inspector remove any values from the 'Char width', 'Max chars' or 'Num Lines' fields that might be entered.

11. At the bottom right of the CSS Style panel, click the little plus sign (paper with a plus on it).
12. From the drop-down box in the 'New CSS Rule' window, make sure that 'Class (can apply to any element) is selected.
13. In the 'Selector Name' bit, enter 'mmtextfield'. Click 'OK'
14. Under 'category' select 'box' and enter '98' for the width, and '%' in the measurements drow-down.
15. If you want to give the fields a 'cleaner' look, select 'border' and in in the top row enter: solid (for style) 1px (width) and #666 for color.
16. Click OK.

Repeat from step 10 onwards, but this time in step 12 enter 'textarea' insted of 'textfield'. Go ahead and repeat 13 -15.

Back on the page, click on the first textfield to select it and in the elements bar above the properties panel select '<input#contact_name>, and from the 'class' drop-down box in the properties panel, select the class you just created for the text fields (mmtextfield).

Repeat this for the email textfield (<input#email_address>) security code textfield (<input#security_code>) and if you are keeping the security question bit, then the same for that (<input#security_question>).

For the message area, do the same but select 'mmtextarea' instead of 'mmtextfield'. This is so that you can adjust the height of the message area through CSS without it also altering the name, email and security fields as well. To do this, click inside the message textarea on the page, and click on <textarea.mmtextarea#comments> to bake sure it is selected. Back in the CSS Styles panel, click 'Add a Property' and this time select 'height'. Give this a value of 120px for now. You can adjust this later.

The form will be just about how you want it by now. The only thing that looks a bit bad is that the fields and legends all look a bit cramped together. Because you have set a class for the input fields already, this is easy.

Select any one of the textfield inputs, and in the CSS Styles Panel click on 'AddProperty' to add a property to your mmtextfield class. Choose 'margin' and give it a value of: 2px 0 5px 0 - you can copy/paste this in.

Now select the Message textarea in your form, and repeat the previos teps to add a margin property to your mmtextarea class.

Now preview your form in a browser. These are all basic properties, so there will be no cross-browser issues.

I have provided values that I, personally, find aesthetically pleasing, but you should experiment with some of them (after backing up) to see what would best suit your page style.

Let me know how you get on with this, and please post back if I have not made it clear or things are going wrong on your screen; - there's a 50/50 chance it's may mistake, not yours!

Also, if you want to adjust the error message css and the red, green, yellow lightshow and the red borders round the error messages, let me know too.

Cheers.

PS - here is an example without the coloured formfields, I used image backgrounds instead.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...