Position the 'send me a copy' field in formbuilder.

[musicscore]

I'm building a website and are using the default contact form from Formbuilder.
I want to position the 'Send me a copy' text en checkbox of the e-mail field. The default position isn't working correct.

Please can someone tel me how to correct the possition of the 'send me a copy' text and checkbox.

TIA

[Rolf]

Might help https://www.cmscanbesimple.org/blog/styling-forms

[musicscore]

Thanx Rolf,

Very usefull document but not the solution to my problem.
The field used for the e-mail field has infact 2 labels, a text input field and a checkbox. I can place the text field, a can place the checkbox but I cannot place the each labels correctly.
I want this layout :

E-Mail adres : (Input e-mailadres) Send me a copy (Checkbox)

Default both labels are postioned left and then to the right are the input fields. This is not how it suppose to be.

Please help.

[velden]

Can't you just float it to the right:

Give it an ID or class in the 'Advanced Settings' of the FIELD -> 'Field Alias and DOM id (CSS id) attribute:' or 'CSS Class for this field:'

Then in your stylesheet use some styling.

Code: Select all

div.CLASS input[type=checkbox] {float : right;}

Don't know if that's a working example, but you get the idea.

At least have a look at the html source to find a proper css selector.
Or post a link so we can all have a look and make suggestions specific to your case.

[musicscore]

Thanx for your answer.
The problem is, there is no special css class or id for the text `send me a copy ...

See this example :

http://web2.dev-infowebs.nl/index.php?page=contact

TIA

[paulbaker]

The problem is, there is no special css class or id for the text `send me a copy

Oh yes there is:

Code: Select all

<label class="cms_label" for="cntnt01fbrp__11[]">Send me a copy of form</label>

The class is cms_label. If there are no other forms on the website you can use that.

Or give it an ID as velden described.

[applejack]

Send me a copy is a magnet for Spammers be careful what you do.

[velden]

Don't make the labels float left, that's part of the problem:

Code: Select all

.contactform label {
    display: inline-block;
    width: 150px;
}

Then you can make the checkbox float right and give it a right margin:

Code: Select all

.cms_checkbox {
    float: right;
    margin-right: 145px;
}

Actually I think that that's not a very decent way but it will work in most cases.

[Rolf]

Imho *never* use the default FormBuilder stylesheet.
It styles things you don't use and need, making it over complicated.
I offered Stikki to make a new one, but he sadly declined...

Use the one I posted above and start from there.
With .formbuilder input[type="checkbox"] { } you can style the checkbox seperatly and don't need classes etc....

[chandra]

I offered Stikki to make a new one, but he sadly declined...

But you can do it for the community - think this topic is interesting for all FB users. Me too ...

[Rolf]

But you can do it for the community - think this topic is interesting for all FB users. Me too ...

Yeah I will do that, already working on it. It will indeed help a lot of people.
I will post it at my blog http://www.cmscanbesimple.org/blog.
By visiting my sponsor ads or buy me a cup of coffee you can help me!

[Rolf]

Okay, I have got a demo template ready at:
https://www.cmscanbesimple.org/demo/for ... r-template
Any suggestions before I make a how-to blog?

Ps. I forgot the Email field and I will also add a Captcha

[Rolf]

Any remarks?? http://www.cmscanbesimple.org/demo/formbuilder-template

[velden]

Captcha is not styled when not filled in after submission. However not sure if FB adds the required class (fb_invalid).

[Rolf]

Yeah, I know. By FB default there are separate error messages for form and captcha. I didn't change that for now. Might do that though...
It is styled, but in second step...