Daily Deals on Dreamweaver Resources

How to Create and Style Forms in Dreamweaver

Dreamweaver is known as the top web design and development software available. Dreamweaver includes many options and features to create professional-level web projects with ease. Forms are no exception, and there are many tools available to help you build a web form to collect information from your visitors. In Dreamweaver, you can build web forms in just a few easy steps.

 

Create the Html Form in Dreamweaver

First, we need to create the HTML of the form. Yours may vary depending on what type of form you are creating and styling, but in this tutorial, we will be creating a simple contact form. Start by clicking between the body tags and go to Insert> Form> Form. This creates a form wrapper to place the input and submit portions of our form into. A dialog box will come up asking what the action will be. This is usually an outside PHP file, which performs the action of sending the email. You can find PHP code for forms throughout the net, but PHP coding is beyond the scope of this tutorial. To link the PHP file to the form, click "browse" and point to the PHP file itself. Be sure to set the method to post, so that it sends the email. For encoding, select multipart form data. You can leave the target field blank.

 

Create Dreamweaver Form

 

Next, we need to place our fields within the form. For a contact form, you will mainly use text fields and a text area for the message. Between the open and closing form tags, place your fields by going to Insert> Form and choose from the myriad of options available. We are going to select text area 3 separate times and each we will place a separate field name for Name, Email, and Phone. For the 4th value, we will create a text area, and call that one Message. Leave the rows and columns fields blank, because we can style the width and size of this later with CSS. You can erase the empty rows and cols values that Dreamweaver places automatically.

 

Text Area in Dreamweaver

Html Form in Dreamweaver:

<body> 
     <form action="send_email.php" method="post" enctype="multipart/form-data" name="Contact" id="Contact">
          <label>
          Your Name:<input id="name" type="text" name="name" />
          </label>
           <label>
           Email:<input id="email" type="text" name="email" />
           </label>
           <label>
           Phone:<input id="phone" type="text" name="phone" />
           </label>
           <label>
           Message:<textarea id="message" name="message"></textarea>
           </label>
           <input type="button" value="Submit" />
     </form>
</body>

Dreamweaver doesn't do this automatically, but we need to go in and wrap each of our forms fields with the label tag. This is a standard practice, and it will make it much easier to style the form overall. The only element where this isn't necessary is the submit button.

We need to place a submit button in the form, so go to Insert> Form> Button, and name it submit. Our form doesn’t look like much right now, since everything is placed on one line. You can view the form below without CSS. However, with a little CSS, we can make our forms look much nicer.

Dreamweaver form without CSS

Style Your Dreamweaver Form

Knowing what to control and style makes all the difference. Consistently styling your form and creating hover effects will help the user understand exactly where they are. Having a field highlight when a user clicks in the box lets them know that they have successfully selected the right field to fill out.

The first thing that we want to style is the overall form itself. It is here that we declare the width and height of the form. This is especially important if we need to fit the form within specific dimensions. We set the margin to auto, so that the form is centered on the page. We also want to give the elements within the form enough space from the edge, so that the text isn't up next to the edge of the form.

form{
    height: 300px;
    margin: auto;
    padding: 20px;
    width: 350px;
}

Next, we want to style the label tag itself. We wrapped our form elements with the label tag to make this easier. We want the background to be white when simply viewing the form. Float the label elements to the right so that they are all aligned, and declare to clear both left and right. In order to make the form elements to stack vertically, we need to set the display property to inline-block. You can make your font, fontsize, and the color whatever you would like. A good rule is to keep it simple and easy to read. I added 15 pixels of margin on the bottom to give the user a comfortable amount of room between each field.

label{
     background:#fff;
     clear: both;
     display: inline-block;
     float: right;
     margin-bottom: 15px;
     text-align: right;
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     color:#CCC;
}

Label input and text area are almost styled identically. The only difference is the height in the text area is much more, because we want to make sure that users know it is an area to type an entire message. Set the width to a value that is aesthetically pleasing for your form, set the background color to white, and give your input fields a subtle 1px gray border. Below, you will see that we also created an inner shadow using the inset property with box-shadow. The way that the CSS works is that the shadow is shifted left to right 0 pixels, up and down 0 pixels, it is blurred 1 pixel and spread 1 pixel. The rgba value is set to a medium to dark grey, at 25% opacity. Any time that you have the same numbers for all three values that isn't 0(black) or 255(white), you get a variation of gray.

label input{
     height:25px;
     width:250px;
     background:#fff;
     border:1px solid #CCC;
     box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.25) inset;
}
textarea{
     height:75px;
     width:250px;
     background:#fff;
     border:1px solid #CCC;
     box-shadow: 0px 0px 1px 1px rgba(50, 50, 50, 0.25) inset;
     -webkit-box-shadow: rgba(50, 50, 50, 0.25) 0px 0px 1px 1px inset;
}
Dreamweaver form normal state

Below, we are styling the hover and the focus properties for our form. Hover is when your mouse hovers over the field. Focus is where you actually click in the field and the cursor is active for your user to type within it. We can style all of these at once (if they are going to be the same) by separating them with a comma. There is an inner shadow that will be blue when we hover over or click within an input box. We set the blue value to 200 in rgba, and set the alpha value to 95%. We set the blur strength to 8px to make the shadow subtle. We set the background to be white. We have to make sure that we declare this style, because otherwise it will be overridden when we style our submit button.

label input:hover, textarea:hover,  
label input:focus, textarea:focus {  
     -webkit-box-shadow: rgba(0, 0, 200, 0.95) 0px 0px 8px inset;
     box-shadow: 0px 0px 4px rgba(0, 0, 200, 0.95) inset;
     background:#fff;
} 
Dreamweaver form hover state

Below, we need to style our submit button. You can set the width and height however you like. I made the background gray and the text color white. Just like the label tags, we have to set the float to right and clear both floats to get the button to go into the right position, where it is aligned with the right edge. Create a 1px solid border that is the same gray color as the background. We want to do this, because our hover state will have a border, and if we don't place one here, the button will appear to shrink slightly when the user hovers over it.

input{
     width:60px;
     height:35px;
     background:#999;
     color:#FFF;
     float: right;
     clear:both;
     border:1px solid #999;
}

Since the button itself will be the same size and shape, all we need to do here is set a different background color and text color. I set the text color to a darker gray and the background to a soft blue that matches the inner shadow on the input boxes that we styled above. This creates a consistent look and a clean layout for our form.

input:hover{
     background:#8194D3;
     color:#333;
}
Dreamweaver form submit button

Conclusion

Dreamweaver is an invaluable tool for web designers, and it is incredibly easy to create your own forms and style them inside of Dreamweaver. Dreamweaver makes it easy with insert menus and the ability to edit properties using Dreamweaver interfaces.

 

About the author: Russell Taylor is professional web developer and entrepreneur based out of California with over 8 years experience in the industry. His latest project is CSS Menu Maker which provides free css drop down menus to web developers and a Dreamweaver menu extension for the Dreamweaver crowd.





Mobile-ready Templates
  • BlueHost Web Hosting
  • InMotion Web Hosting
  • WebAssist
  • Extend Studio
  • Ajatix
  • Lynda.com