Skip to main content
T
thevisualedge1
Inspiring
May 17, 2017
Answered

Customizing form fields?

  • May 17, 2017
  • 2 replies
  • 522 views

Very new to Dreamweaver, apologies in advance for any noob behavior.  Searched all over for this answer but had a hard time finding anything.

I'm currently trying to create a form on one of my pages.  I've created a div of with an established width and placed my form inside of it.  In other tutorials, I've seen where the length of the form's fields could be customized by setting their width to certain percentage of the parent div ... but when I try it and adjust the width, the fields are completely unresponsive.  The fields simply remain at the default width.

I'm trying to create a form like the one in this tutorial:

How to create a web form in Dreamweaver | Adobe Dreamweaver CC tutorials

... where the fields are all equal length. 

If anyone has tips or can point me in a good direction, I'd appreciate it!

This topic has been closed for replies.
Correct answer Nancy OShea

Use CSS to style your input fields.

Or, if you use Bootstrap responsive layouts, you can use the built-in form classes to achieve the same thing.  See screenshot.

Building the HTML form is only  part #1 of the equation.  You also need a server-side script to collect & process form data.  HTML alone cannot make your forms work for everyone.  People who don't have an email client like Outlook won't be able to use them.  So find out which server-side scripts your hosting plan supports.    If your web host supports PHP code, see link below for a 3-part tutorial on creating a working contact form like the one shown above.

Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 1)

Nancy

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
May 17, 2017

Use CSS to style your input fields.

Or, if you use Bootstrap responsive layouts, you can use the built-in form classes to achieve the same thing.  See screenshot.

Building the HTML form is only  part #1 of the equation.  You also need a server-side script to collect & process form data.  HTML alone cannot make your forms work for everyone.  People who don't have an email client like Outlook won't be able to use them.  So find out which server-side scripts your hosting plan supports.    If your web host supports PHP code, see link below for a 3-part tutorial on creating a working contact form like the one shown above.

Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 1)

Nancy

Nancy O'Shea— Product User & Community Expert
T
thevisualedge1Author
Inspiring
May 18, 2017

Thank you both for your input!

I figured it out.  I was adding fields using Dreamweaver's "Insert" menu ... but by default, the Insert Menu doesn't wrap items with an <label> tag.   Once I added a label tag, I created a CSS class and was able to customize the fields pretty easily.

I'm sure you guys would have told me that if I'd shared my code!

Jon Fritz
Community Expert
Jon FritzCommunity Expert
Community Expert
May 17, 2017

Could you post the code you have so far?

Usually an issue like this will be cause by small errors in your css.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices