Page 1 of 1
Formbuilder css styled contact form
Posted: Wed Feb 27, 2008 11:09 am
by martin_dk
Hi, i need some help to make the following contact form layout, i have tried to serch and allso tried to make the css my self.
But if someone know ho to make a form look like this i would be glad
Re: Formbuilder css styled contact form
Posted: Wed Feb 27, 2008 3:27 pm
by lollipop27
I don't exactly know about the round borders....
but hte squared you do like this:
wrap your form call in a div like this:
Code: Select all
<div id="myForm">}{formbuliderCall}</div>
and then add the css
Code: Select all
#myForm input, #myForm textarea{
border: 1px solid #000;
padding: 2px;
}
try around with this...
then you can add static Text to your Form, like a wraping div around the left input fields
(chosse static Text from the wuick insert drop down in your formBuilder) and add something like this
before the input fields and a closing div afterwards....and so on....
post how far it worked for you, then perhaps I can help you with some details....
Re: Formbuilder css styled contact form
Posted: Thu Feb 28, 2008 4:18 pm
by martin_dk
thanx for your response,
I have tried your solution but i cannot get its to work with the floats, the borders worked just fine.
I have also tried with z-index for he text area but then the messege-text do not align..
Re: Formbuilder css styled contact form
Posted: Thu Feb 28, 2008 9:17 pm
by lollipop27
Have you wrapped parts of the input fiedls in a div?
Do you have a link, so that I can have a look at it?
Re: Formbuilder css styled contact form
Posted: Thu Mar 06, 2008 5:34 pm
by martin_dk
Hi.. late response again..
i put a link, When i come back from my business trip
Re: Formbuilder css styled contact form
Posted: Fri Mar 07, 2008 8:07 pm
by Mantlet
With every input field you can specify a css class name for that field.
Every field is build like this:
Code: Select all
<div class="the class name you can specify"> <label></label><input></input></div>
The field you want to move right needs to be the first field in the order of fields. Give that textarea a class, say area_right. Then specify the following CSS:
Code: Select all
.area_right {
float:right;
}
.area_right textarea {
width: the desired width px;
}
The above should put your textarea to the right, work something width the widths and so to get it OK.
Now, you also want your fieldnames to show in the field and not in front of it? I think that is possible, but I'll look into that.
Let us know if this worked...