Checkbox profile field on Registration splits onto 2 lines

Ohh, the ones on the Verint site are built-in platform ones I'd not seen before until I looked in the Registration widget code. So unless this has received some attention in v12, I'm guessing it's the same. The label doesn't even check the box when I click on it, and the font size is different for the profile field compared to the site agreement. Sigh.

Pretty much thinking I'll have to add some JavaScript to knock this into shape.. something like;

var checkbox = $("input[id$='oktocontact']"); // My profile field key name
var parentLI = checkbox.parent().parent(); // The LI containing the label + field
var inputSpan = parentLI.find('.field-item-input'); // Input for the profile field
var label = parentLI.find('label'); // Label for the profile field
label.appendTo(parentLI); // Switch label so it appears last
label.css('display', 'inline'); // Allow the label to appear on 1 line
label.css('font-size', '14px'); // Bring in line with the other checkbox size
label.prop('for', checkbox.prop('id')); // Link label to input, allowing it to be clicked
inputSpan.css('display', 'inline'); // Allow the checkbox to appear on same line as label

Or is there a better, less hacky way to make this appear nicely?

Ohh, the ones on the Verint site are built-in platform ones I'd not seen before until I looked in the Registration widget code. So unless this has received some attention in v12, I'm guessing it's the same. The label doesn't even check the box when I click on it, and the font size is different for the profile field compared to the site agreement. Sigh.

Pretty much thinking I'll have to add some JavaScript to knock this into shape.. something like;

var checkbox = $("input[id$='oktocontact']"); // My profile field key name
var parentLI = checkbox.parent().parent(); // The LI containing the label + field
var inputSpan = parentLI.find('.field-item-input'); // Input for the profile field
var label = parentLI.find('label'); // Label for the profile field
label.appendTo(parentLI); // Switch label so it appears last
label.css('display', 'inline'); // Allow the label to appear on 1 line
label.css('font-size', '14px'); // Bring in line with the other checkbox size
label.prop('for', checkbox.prop('id')); // Link label to input, allowing it to be clicked
inputSpan.css('display', 'inline'); // Allow the checkbox to appear on same line as label

Or is there a better, less hacky way to make this appear nicely?

The checkboxes we use are available out-of-the-box. You can expose them to members of your site (both at create time and in their settings page) by checking Administration > Authentication > Authentication Options > Show Contact Checkboxes. Then you can check the corresponding AllowSiteToContact and AllowSitePartnersToContact properties on User entities and respond accordingly.

If you'd like to adjust the wording of the existing checkboxes, there are 6 found in Resources.xml:

• CreateNewAccount_AllowSiteToContact
• EditProfile_AllowSiteToContact
• EditProfile_AllowSiteToContact_Desc
• CreateNewAccount_AllowSitePartnersToContact
• EditProfile_AllowSitePartnersToContact
• EditProfile_AllowSitePartnersToContact_Desc

Editing these will require an app pool refresh to take effect.

If you want to roll your own still, you can make edits to the User - Login and Create widget. The checkboxes are in sub_form_join_details.vm.

Good point.. we could use those. We're migrating in a tonne of users, with a profile field to store their contact preference (set in the old system). I'll see whether we might be able to switch that to the built-in fields, which would make more sense.

I've had a quick look at the 'Show Contact Checkboxes' option.. bit of a shame there are 2.. we only need the one, so that'd be another customisation to remove the second one. Shame you can't pick which of the 2 you enable.

There is still the option to customize the styling for displaying your existing custom profile field in the User - Login and Create widget, sub_form_join_details.vm. Look for the definitions of $propertyHeader and $propertyFooter to customize the layout.