[Resolved] Checkbox Custom Field inside User Registration Form

[Author]

Posts

[jiriK-2]

Hello,

I'm trying to make a required checkbox custom field as an agreement with the Terms of Use as a part of the User Registration Form.

Here it is how it looks now: hidden link

and I would like to have it like this: hidden link

Here is my User Fields Group: hidden link with the checkbox custom field settings hidden link and here is the code inside User Form:

<div class="form-group">
[cred_field field="souhlas" force_type="field" class="form-control" output="bootstrap"]
Souhlasím se hidden link">Zpracováním a ochranou osobních údajů.
</div>

I know that probably it is a very simple issue (and I didn't find the solution by Toolset Forum searching) but I really don't know how to get it ?

Many thanks for your suggestion.

Best,

Jiri.

[Shane]

Hello,

Could you send me a link to this form so that I can have a look ? It seems that the area need to be made wider.

Thanks,
Shane

[jiriK-2]

Hello Shane,

many thanks for your reply, here is the link: hidden link Or do you need an access to backend? I have no problem to give it to you – please just make this communication as private.

Many thanks again.

Best,

Jiri.

[Shane]

Hello,

Yes please provide the credentials as it seems that I may need to do a little bit more than using css.

Thanks,
Shane

[Shane]

Hello,

I went in and added some css to get this to line up for you.

Thanks,
Shane

[jiriK-2]

Dear Shane,

many thanks, it is much better now! 🙂

Sorry but (as I declared it at the beginning) I need to display it without a checkbox name/label: hidden link

I didn't find how to disable this label in the settings.

Thanks again, best!

Jiri.

[Shane]

Hello,

You aren't able to disable the labels but what I did was to use a part of your text as the label.

Thanks,
Shane

[jiriK-2]

Dear Shane,

OK, I understand,

I didn't change anything so why this checkbox looks like this now: hidden link ?

There is no label...

Thanks for your answer, best,

Jiri.

[jiriK-2]

OK,

finaly I got it.

I'm trying to make this positioning to a final shape. It is almost good hidden link with this code:

.col-left{
float: left;
}

.col-right{
float: left;
margin-top: 11px;
margin-left: 4px;
}

input[name="wpcf-souhlas"]{
margin-top: -4px;
margin-left: 12px;
}

BUT here on hidden link it doesn't look good on small displays, iPhone: hidden link

Do you have an idea how to precise it?

Thanks again, best,

Jiri.

[Shane]

Hello,

What you're going to have to do is to write a mobile css for when it is being viewed on smaller screens.

Take a look at the link below for how to use media queries to write mobile css.
hidden link

Thanks,
Shane

[jiriK-2]

Hello Shane,

OK, thanks for your suggestion!

Now I know how to make it. Perfect!

Thanks again.

Jiri