[Resolved] Styling checkbox in form

[Author]

Posts

[samuelH]

Hi,
On this page / site: hidden link

I am using multiple checkboxes in the form. I would like to style the checkbox and the label. I would like the Label it with another name than the slug, and I would like it to be inline, or label right above box, centered with not much space between label and box.

I would also like to style the box itself.

****

[Minesh]

Hello. Thank you for contacting the Toolset support.

I checked the link you shared where you added the form but I do not see any checkboxes field with the form. Maybe to see the form it requires the login.

To design the checkboxes is a broad concept where you need to add custom CSS as per your required output. Here is the guide that may help you:
=> https://toolset.com/documentation/user-guides/styling-cred-forms/

Here is the guide especially for checkboxes:
=> https://toolset.com/documentation/user-guides/styling-cred-forms/#radiobutton-and-checkbox

[samuelH]

Hi Minesh,
Sorry for hidden form. It´s now visible 😉

The checkbox is wrapped in custom code. This wrap has to stay.

Here is the formcode:

[<div class=".container-fluid" id="js--form-sys-answer">[credform]

<!--Table-->
<table id="tablePreview" class="table table-striped table-sm">
<!--Table head-->
<thead>
<tr>
<th>#</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">1</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-1' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster1" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-2' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster2" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-3' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster3" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-4' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster4" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-5' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster5" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-6' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster6" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-7' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster7" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-8' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster8" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-9' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster9" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Har eiendommen trafikksikkert område for levering og henting av barn?</td>
<td>[cred_field field='bh-10' force_type='field' class='form-control js--sys-answer' output='bootstrap']</td>
<td>[cred_field field="haster10" force_type="field" class="form-control js--sys-cb-answer" output="bootstrap"]</td>
</tr>
</tbody>
<!--Table body-->
</table>

<div class="hidden">
[cred_field field='b-answer-1' force_type='field' class='form-control js--sys-answer-total' output='bootstrap']
[cred_field field='b-answer-2' force_type='field' class='form-control js--sys-answer-total' output='bootstrap']
[cred_field field='b-answer-3' force_type='field' class='form-control js--sys-answer-total' output='bootstrap']
[cred_field field='b-answer-4' force_type='field' class='form-control js--sys-answer-total' output='bootstrap']
[cred_field field='b-answer-cb' force_type='field' class='form-control js--sys-answer-total' output='bootstrap']
</div>

<div class="row">
<div class="lagre">[cred_field field='form_submit' output='bootstrap' value='Lagre' class='btn btn-primary btn-lg'][/credform]</div></div>]

[Minesh]

What if you try to add the following code to your Form's CSS box:

input[type=checkbox] {
    width: auto;
    height: auto;
}

[samuelH]

Nice!

[samuelH]

My issue is resolved now. Thank you!

[samuelH]

HI,
The css did fix the inline issue. But I am not allowed to change the field name. All the checkboxes should have the same name, but different slug. They have to be unique.

Therefor I need help to Label the checkboxes individually. There is no label value in code:

<td>[cred_field field="haster1" force_type="field" class="form-control" output="bootstrap"]</td>

[Minesh]

Can you please share wp-admin access details so I can check how you setup the checkboxes field?

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 just resaved the form you are using and I can see its displaying the correct checkbox label values now.

[samuelH]

Hi Minesh,
I am so sorry, I sendt you wrong url.

This is the form that should be adjusted: hidden link

The label Haster1, Haster2, Haster3 and so forth, are generated from their very unique custom field. They should all be labeled Haster (without the number), but still be unique custom fields (Checkboxes)

[Minesh]

The thing is that the Label and slug names should be unique for the field names so you can not change only label to "Haster" from the custom field group where you added those checkboxes.
=> hidden link

As a workaround, you need to use the jQuery code and replace the all label names to "Haster". I've added the following code to your Form's JS box:

$("label:contains('Haster2')").text($("label:contains('Haster2')").text().replace("Haster2","Haster"));
$("label:contains('Haster3')").text($("label:contains('Haster3')").text().replace("Haster3","Haster"));
$("label:contains('Haster4')").text($("label:contains('Haster4')").text().replace("Haster4","Haster"));
$("label:contains('Haster5')").text($("label:contains('Haster5')").text().replace("Haster5","Haster"));
$("label:contains('Haster6')").text($("label:contains('Haster6')").text().replace("Haster6","Haster"));
$("label:contains('Haster7')").text($("label:contains('Haster7')").text().replace("Haster7","Haster"));
$("label:contains('Haster8')").text($("label:contains('Haster8')").text().replace("Haster8","Haster"));
$("label:contains('Haster9')").text($("label:contains('Haster9')").text().replace("Haster9","Haster"));
$("label:contains('Haster10')").text($("label:contains('Haster10')").text().replace("Haster10","Haster"));

I can see now all label names are displayed as "Haster":
=> hidden link

[samuelH]

Hi Minesh,
Thank you for not giving up on me!

Unfortunately there still is problem. The checkbox itself is now gone. The checkbox must be visible.

[Minesh]

Ok - I found a more accurate way to change the field Label on the fly using the Toolset form hook "cred_filter_field_before_add_to_form" rather adding custom JS code:

I've added the following code to "Custom Code" section offered by Toolset:
=> hidden link

add_filter('cred_filter_field_before_add_to_form', 'func_change_field_label', 10, 1);
function func_change_field_label($field){
   if(in_array($field['id'], array( 'haster2','haster3', 'haster4','haster5','haster6', 'haster7','haster8','haster9', 'haster10'))){
        // in some cases $fields['data'] is an empty string, so you need to first set its expected format
      $field['title'] = "Haster";
     
    }
    return $field;
}

I can see its working perfectly fine now. Can you please confirm it works at your end as well:
=> hidden link

[samuelH]

THANK YOU!

[samuelH]

Hi Minesh,
I´ll try to continue within this thread. Hope that is ok!

Your solution worked great, but need to add several fields with "Haster" label. I just added several lines to your code, follwing the excact typing. But the hooh dont bite.

Do you understand what is happening here?

Here is the added code (and the custom fields are added as well)

jQuery(document).ready(function( $ ) {

/*
$("label:contains('Haster1')").html($("label:contains('Haster1')").html().replace("Haster1","Haster"));
$("label:contains('Haster2')").html($("label:contains('Haster2')").html().replace("Haster2","Haster"));
$("label:contains('Haster3')").html($("label:contains('Haster3')").html().replace("Haster3","Haster"));
$("label:contains('Haster4')").html($("label:contains('Haster4')").html().replace("Haster4","Haster"));
$("label:contains('Haster5')").html($("label:contains('Haster5')").html().replace("Haster5","Haster"));
$("label:contains('Haster6')").html($("label:contains('Haster6')").html().replace("Haster6","Haster"));
$("label:contains('Haster7')").html($("label:contains('Haster7')").html().replace("Haster7","Haster"));
$("label:contains('Haster8')").html($("label:contains('Haster8')").html().replace("Haster8","Haster"));
$("label:contains('Haster9')").html($("label:contains('Haster9')").html().replace("Haster9","Haster"));
$("label:contains('Haster10')").html($("label:contains('Haster10')").html().replace("Haster10","Haster"));
$("label:contains('Haster11')").html($("label:contains('Haster11')").html().replace("Haster11","Haster"));
$("label:contains('Haster12')").html($("label:contains('Haster12')").html().replace("Haster12","Haster"));
$("label:contains('Haster13')").html($("label:contains('Haster13')").html().replace("Haster13","Haster"));
$("label:contains('Haster14')").html($("label:contains('Haster14')").html().replace("Haster14","Haster"));
$("label:contains('Haster15')").html($("label:contains('Haster15')").html().replace("Haster15","Haster"));
$("label:contains('Haster16')").html($("label:contains('Haster16')").html().replace("Haster16","Haster"));
$("label:contains('Haster17')").html($("label:contains('Haster17')").html().replace("Haster17","Haster"));
$("label:contains('Haster18')").html($("label:contains('Haster18')").html().replace("Haster18","Haster"));
$("label:contains('Haster19')").html($("label:contains('Haster19')").html().replace("Haster19","Haster"));
$("label:contains('Haster20')").html($("label:contains('Haster20')").html().replace("Haster20","Haster"));
$("label:contains('Haster21')").html($("label:contains('Haster21')").html().replace("Haster21","Haster"));
*/