Formbuilder css styled contact form

[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

[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

Code: Select all

<div class="floatingWrap">

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....

[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..

[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?

[martin_dk]

Hi.. late response again..

i put a link, When i come back from my business trip

[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...