[Resolved] Styling of CRED form

[Author]

Posts

[Dirk De Waegeneire]

I'm making an input form and have 3 problems : Checkbox , Checkboxes and WYSIWIG input

For the Checkboxes I have the problem that the boxes show on top of the selection names ( see image)

For the Checkbox I have the issues I do not want the field name displayed.
When I check with Inspect I see that there was a <li created , but I do not see where in the Form I can eliminate the field name

<li class="wpt-form-item wpt-form-item-checkbox form-check">
<input type="checkbox" id="cred_form_25559_1_1_offerte-vertrekdatum-10f2-dagen" name="wpcf-offerte-vertrekdatum-10f2-dagen" data-wpt-type="checkbox" data-wpt-id="cred_form_25559_1_1_cred_form_25559_1_1_offerte-vertrekdatum-10f2-dagen" data-wpt-name="wpcf-offerte-vertrekdatum-10f2-dagen" value="1" class="form-control wpt-form-checkbox form-checkbox checkbox" output="bootstrap" preset_value="" urlparam="" preview="" previewsize="" select_label="" edit_label="" value_escape="" make_readonly="" placeholder="" select_text="">
<label class="wpt-form-label wpt-form-checkbox-label form-check-label" for="cred_form_25559_1_1_offerte-vertrekdatum-10f2-dagen">Offerte vertrekdatum 10f2 dagen</label>

For the field where I use a WYSIWIG I don't want to show the editing possibilities (Visual/Text)

Where can I change these setting ?

I attached the code used in the Form

[credform]
<div class="container-fluid">
<div class="row">
<div class="form-group col-md-12">
<label for="%%FORM_ID%%_offerte-thema-reis">[cred_i18n name='offerte-thema-reis-label']<h2>Thema reis</h2>[/cred_i18n]</label>
[cred_field field='offerte-thema-reis' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-voornaam">[cred_i18n name='offerte-voornaam-label']Voornaam[/cred_i18n]</label>
[cred_field field='offerte-voornaam' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-familienaam">[cred_i18n name='offerte-familienaam-label']Familienaam[/cred_i18n]</label>
[cred_field field='offerte-familienaam' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="%%FORM_ID%%_offerte-straat-en-nr">[cred_i18n name='offerte-straat-en-nr-label']Straat en Nr[/cred_i18n]</label>
[cred_field field='offerte-straat-en-nr' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group col-md-4">
<label for="%%FORM_ID%%_offerte-postcode">[cred_i18n name='offerte-postcode-label']Postcode[/cred_i18n]</label>
[cred_field field='offerte-postcode' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group col-md-4">
<label for="%%FORM_ID%%_offerte-plaats">[cred_i18n name='offerte-plaats-label']Plaats[/cred_i18n]</label>
[cred_field field='offerte-plaats' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-email">[cred_i18n name='offerte-email-label']e-mail[/cred_i18n]</label>
[cred_field field='offerte-email' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-gsm">[cred_i18n name='offerte-gsm-label']GSM[/cred_i18n]</label>
[cred_field field='offerte-gsm' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-vertrekdatum">[cred_i18n name='offerte-vertrekdatum-label']Voorkeur vertrekdatum[/cred_i18n]</label>
[cred_field field='offerte-vertrekdatum' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-vertrekdatum-10f2-dagen">[cred_i18n name='offerte-vertrekdatum-10f2-dagen-label']Flexibele vertrekdatum +/- 1 of 2 dagen[/cred_i18n]</label>
[cred_field field='offerte-vertrekdatum-10f2-dagen' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-verzekeringen">[cred_i18n name='offerte-verzekeringen-label']Verzekeringen[/cred_i18n]</label>
[cred_field field='offerte-verzekeringen' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-regime">[cred_i18n name='offerte-regime-label']Voorkeur Regime[/cred_i18n]</label>
[cred_field field='offerte-regime' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_offerte-vragen-en-opmerkingen">[cred_i18n name='offerte-vragen-en-opmerkingen-label']Vragen en opmerkingen[/cred_i18n]</label>
[cred_field field='offerte-vragen-en-opmerkingen' force_type='field' class='form-control' output='bootstrap']
</div>
<div class="row">
<div class="col-md-12">
[cred_field field='form_submit' output='bootstrap' value='Verzenden' class='btn btn-primary btn-lg']
</div>
</div>
</div>
[/credform]

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL where I can see the form in action as well as admin access details.

It seems to me we need to add some custom CSS code in order to adjust the formatting might be there is some CSS conflict between the theme/plugin.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now: hidden link

I've added the following CSS code to your form's CSS editor:
=> hidden link

.chk_verzekeringen label, .chk_voorkeur_regime label {
 padding-left: 22px !important;
 }

You can adjust the code as required for further improvement if required.

[Dirk De Waegeneire]

Thanks Minesh,

I really need to learn more CSS going forward
But problem solved
Thanks
Dirk