CMS Made Simple Forums

Posted: **Mon Aug 20, 2012 12:48 pm**

Hi All.

I am having a little trouble with the styling of the Form Builder input boxes. I am currently using the Form Builder Module to create a contact form for a website I am working on.

The problem that I have is that the input boxes are not the same size when viewed in different browsers. When viewed in Firefox, the contact form is how I want it to look, but then viewed in Chrome or Safari, the input boxes are too small.

I have gone into the Form Builder CSS and changed:

Code: Select all

.contactform input {
	/*border: 1px solid #f60;*/
        width: 395px;
}

(adding the width: 395px;)
but doing this changes all the input boxes, including the Captcha input box and the Submit button.

Does anyone know how to just change the size of input boxes I want changed?

img1 = Form viewed in Firefox (this is how i want it to look on all browsers)

img2 = Form viewed in Safari/Chrome (notice the boxes are too small)

img3 = Form viewed in all browsers when CSS changed (width: 395px;)

Thanks in advance
Tom

Posted: **Mon Aug 20, 2012 8:52 pm**

Might help http://forum.cmsmadesimple.org/viewtopi ... 52&t=60763

Posted: **Mon Aug 20, 2012 11:51 pm**

Every time you add a field in form builder you can give it a class name, this way you can target each input individually if you want, also check the page source to see what they already have for classes...

Posted: **Fri Aug 24, 2012 10:00 am**

Thanks for the reply Dr. CSS.

I have tried adding a class to the field. I have added the CSS class in the form builder css and my css:

Code: Select all

.formfields {
	width:470px;
}

I have then added .formfields in the css class box for one of the form fields as shown:

I have tried with the . (.formfields) and without the . (formfields) but it still does not seem to work.

Thanks in advance

Posted: **Fri Aug 24, 2012 11:07 am**

formbuilder will place the class in the div that wraps the form control.

Try:
.formfields input { CSS Here }

But, you can target just the text inputs by using:
input[type='text'] { CSS Here }

similarly,
input[type='submit'] for submit buttons

Google HTML input types.

CMS Made Simple Forums

[SOLVED] Form Builder - input box sizes

[SOLVED] Form Builder - input box sizes

Re: Form Builder - input box sizes

Re: Form Builder - input box sizes

Re: Form Builder - input box sizes

Re: Form Builder - input box sizes