Trying to create an acknowledgment form

[jrio]

This information might already be out there, I might not be using the correct search terms.

What I’m looking to do is capture entries for folks acknowledging our policies.

The way I envision this working is that I’d have a list of hyperlinks to each policy document. What I’d like to happen is that the user will click on the link to the policy document and that click would trigger the checkbox next to the name of the policy. Once they’ve clicked all the links, the submit button will appear (with text that says they actually read the policies). Can’t make them actually read the policy, but I do want to capture that they acknowledge the policies.

I haven’t been able to figure out how to capture the click on the policy link to have the checkbox populate. I’d be happy if I could program the form so that the checkbox is hidden until they click the link to the policy…

Thoughts on this? Can it be done the way I’m envisioning it?

Thanks in advance for any guidance.
Jamie

[faisalahammad]

Hi Jamie,

First, set all your input checkboxes in a single checkbox field. Make sure to check the “Show Values” option from the Options. In the Label input field, you can add an HTML hyperlink using an tag, like in the following code.

Agree to our <a href="/privacy" target="blank">Privacy Policy</a>

In the Value field, simply enter the Link Text or any other preferred text. Make sure there are no HTML tags present.

Then, in the Appearance settings, add the “control-checkbox” custom CSS class to enable hiding the checkbox until the link has been clicked.

Now go to the Submit button and enable the conditional logic and ensure all checkbox fields option is selected so the button will only display when all checkbox has been selected.

Now add the following JavaScript code in your child theme JS file or use the “Simple Custom CSS and JS” plugin.

jQuery(document).ready(function($) {
    $('.control-checkbox input.gfield-choice-input').addClass('checboxhide');

    $('.control-checkbox label').click(function() {
        $(this).siblings('.gfield-choice-input').addClass('checboxshow');
    });
});

Simple Custom CSS and JS

Also add the following CSS code in the child theme’s style.css file or in Appearance → Customize → Additional CSS.

.checboxhide {
  visibility: hidden;
}

.checboxshow {
  visibility: visible;
}

Now if you preview the form, it’ll look like the following screen recording.

Give it a try, and let me know how that goes!

[jrio]

This is great! I really appreciate the step-by-step guide with screenshots.

I will give it a go today and let you know how I make out.

Thanks!
Jamie

[jrio]

This works great. Thank you for the instructions!

One question - if I use Save & Continue, the boxes do not display (even if they are checked). Is there a way to display the already-checked boxes if the user saves their work and comes back to finish later?

Again, appreciate your help on this!

Jamie