Feedback form CSS... help!!!

[LivingMudFish]

Hi,

I'm a complete novice at this cms - but love it nonetheless - I am having a mare with trying to get my feedback form structured right. I have built the form using the feedback form module and it works fine, but it don't look too nice. The labels are bunched up against the above input area instead of to the left and it generally look untidy.

Can anyone help me with the css, and when I mean help I mean step by step spoon fed style.

Thanks in advance

LivingMudFish

[neophron]

Hi,

check this link:
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

the best way to style elements from the CMSMS like the feedback form, or the newsletter is to inspect the source with Firefox and the great extension Firebug http://www.getfirebug.com/.

U can use this for your needs:

form{
margin:0 0 0 0;
color:#000;
text-align: left;
padding:0 0 0 0;
border: none;
width: 100%;
}

fieldset{
border: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: auto;
}

legend{
border: none;
color: #00;
font: normal 1em Helvetica, Arial, Verdana, sans-serif;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: auto;}

label{
border: none;
float: left;
font: bold .9em/300% Helvetica, Arial, Verdana, sans-serif;
margin: 0 0 0 0;
padding: 0;
width: auto;}

input{
font: normal .9em Helvetica, Arial, Verdana, sans-serif;
border: 1px solid #000;
background-color:#eee;
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 1.5em;
width: auto;
}

textarea{
border:1px solid #666;
background-color:#eee;
font: normal .9em Helvetica, Arial, Verdana, sans-serif;
margin:0 0 0 0;
padding: 0 0 0 0;
width:auto;
}

/*for error message*/
div.formError p{
color: #222;
font: bold 1em courier;
margin: 0 0 0 0;
padding: 0;
}

div.formError ul{
color: #222;
font: bold .9em courier;
margin: 0 0 0 0;
padding: 0;
}

div.formError ul li{
list-style: none;
margin: 0 0 0 0;
padding: 0;
}

Adapt this to your needs.

neophron

[RonnyK]

I don't use Feedbackform, but Form Builder instead. That has an default option to push the labels to the left of the entry-fields. For basic contact forms, you can also use the tag included in CMS. It styles OK, without any additional styling required.

{contact_form email="yourname@yourdomain.com"}


Ronny

[LivingMudFish]

thanks neophron i'll browse the site and adapt the code.

ronnyk, i tried to use formbuilder but it wouldn't install - any ideas?

thanks again guys

[RonnyK]

If it won't install using the Module Manager, you can download it from the dev.cmsmadesimple.org , unzip it locally and FTP the unzipped folder to your environment, to the modules folder. If you've done so, you can go back to your admin console and in modules, you can choose "install".

Ronny

[LivingMudFish]

Thanks Ronny,

the issue was the version of cms, I've just finished upgrading (relatively painless) and built the form. You're right formbuilder is a better module.

thanks again

LivingMudFish