Change Text Input size in Form Builder

[bouschie]

Hi,
I have created a simple form with two fields using Form Builder. I would like to reduce the size of the text input fields from their default of 25. I have read through all the forum posts about this and can't find the answer (or at least I can't get it to work).

I've added a static text field to my form, named it css and turned off WYSIWYG to edit the CSS and I have pasted the following in there:

I haven't modified the form template at all. I just added the other fields of the form. The form itself works, but it doesn't display right on my screen.

I am running CMS 1.4.1 and Form Builder 0.5.5

Can you help me?

[Nullig]

In your stylesheet, you can fix this with:

input {
  width: 50px;
}

or give it a class "myform" and use:

.myform input {
  width: 50px;
}

Change the width to whatever you like.

Nullig

[bouschie]

Do I add this to the form template? Or to the CSS static text field? When I add it to the static text field, it shows up on the page. It doesn't seem to do much when I put it in the Form template.

You can see the form at http://bromleyroadbaptist.org/index.php?page=about

[Nullig]

You add it to the stylesheet attached to your page template.

Nullig

[bouschie]

Right now I don't have any stylesheet associated with my templates. The templates are pure HTML with the required tags built in to show the forms, content, etc.

Should I create a new stylesheet whcih includes the above information and just call it Forms or something?

Sorry to make this more complicated than it likely is...

[bouschie]

Anybody know what I should be doing regarding the above problem?

[Dr.CSS]

That is not pure html, it's table based and has multiple errors/warnings once those are cleared up then the rest should come to you...

http://validator.w3.org/check?verbose=1 ... ge%3Dabout

[nhpa]

I have a similar problem.  I created a new form.  The form includes a CSS field.  I turned off WYSIWYG and pasted in the CSS from the sample form.  I then changed the form name to match:



The form on the page ignores the CSS.  I cannot see how to connect the CSS to the form?  Any help much appreciated.

p.s. When I just now opened and then saved the CSS field in the sample form, I have now lose the CSS connection there too and the form reverts to a basic boring form.

[Dr.CSS]

Links to the page really help a lot...

The CSS should be in a style sheet that is attached to the template the page uses, not as part of the form, the CSS field in the default sample form is just that a sample...

If you have what you pasted I would be surprised if you didn't have errors...

[nhpa]

Thank you for the reply.  I am clearly a newbie, so  I appreciate it.  Using this entry:

  http://forum.cmsmadesimple.org/index.ph ... .msg138515

I found that the sample css in the css field did not have the opening and closing tags.  With WYSIWYG turned off, I copied this text into the css field and it worked. 


.contactform fieldset {padding: 1em; background-color: #eee;}
.contactform fieldset legend {font-weight: bold;}
.contactform div {width: 100%; padding: 0.25em 0 0.25em 0;}
.contactform div label {display: block; width: 10em; }
.contactform div.required {color: #f00;}

What was interesting was that the existing sample forms (sample, contact) worked until I saved them.  Then they reverted to unformatted forms.  So I thought the css must be somewhere else, but I could not find it in any stylesheet attached to any template in any theme I had loaded.  thanks again.