Page 1 of 1
Feedback form CSS... help!!!
Posted: Fri Mar 30, 2007 12:46 pm
by 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
Re: Feedback form CSS... help!!!
Posted: Mon Apr 02, 2007 3:50 pm
by 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
Re: Feedback form CSS... help!!!
Posted: Mon Apr 02, 2007 6:12 pm
by 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
Re: Feedback form CSS... help!!!
Posted: Tue Apr 03, 2007 1:28 pm
by 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
Re: Feedback form CSS... help!!!
Posted: Tue Apr 03, 2007 3:36 pm
by 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
Re: Feedback form CSS... help!!!
Posted: Tue Apr 03, 2007 3:55 pm
by 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