How to set the width of the contact form fields

Posted by on Aug 14, 2010 in Tips | Comments Off

How to set the width of the contact form fields:

make-fields-wider

Go to the Fast Secure Contact Form Options page, scroll way down the page, look for these settings(change to whatever width in cols you want):
“Input Text Field Size” 40
“Input CAPTCHA Field Size” 6
“Input Textarea Field Cols” 30
Increasing the number makes the field wider. Try experimenting with numbers until you get them the way you want.

make-fields-wider2

Some themes override these settings with CSS, in that case you can add width:300px; to the the following setting:
“CSS style for form input fields on the contact form:”
(change 300 to whatever width in pixels you want)

make-fields-wider3

You can also add width:300px; to the the following setting:
“CSS style for contact drop down select on the contact form:”
(change 300 to whatever width in pixels you want)

update-options-button

make-fields-wider4

Setting width of entire form:
Change this setting: CSS style for form DIV on the contact form: width:375px;

My Twenty Twelve Theme adjusts itself for different screen sizes, and that can make the contact form spill out. How do I make it be proportional?
Adjust these settings like so:
CSS style for form DIV: width:99%;
CSS style inside form input fields: text-align:left; margin:0; width:95%;
CSS style for form input fields DIV: text-align:left; width:95%;

Do you need more help?

Donations by PayPal:

If you find this free contact form program/plugin useful to you, please consider making a small donation for my time invested and to help contribute to further development. My time is very limited and I get dozens of support emails every day. If you are not able to donate, that is OK. Thanks for your kind support! - Mike Challis

Donations by cash or check:
Mike Challis
PO Box 819
Long Beach WA 98631

Comments are closed.