How can I make form checkboxes checked by default?

Site URL: https://alligator-pike-e9e8.squarespace.com/reg-form-page-from-blank

Hello 🙂

At the bottom of my form (see link) there are 3 checkboxes. I want all 3 boxes to be checked by default. The users would then have to uncheck the options they don't want, but none are required.

How can I do this?

If possible I'd like to make this change specific to this form or this page (in case I need to have other forms in the future without checked being the default).

Thanks for any help you can give!

You could do this with javascript when the page is loaded. You'd have to add this script to your code injection:
 

<script>
  $(document).ready(function() {
    
    $('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]').setAttribute("checked", "checked");
    
  });
</script>

I think that should work. Oddly, all three of your checkboxes have the same encoded name... doesn't seem right.

Anyway, give that a try and let me know if it doesn't work.

13 hours ago, ChromaticZero said:

You could do this with javascript when the page is loaded. You'd have to add this script to your code injection:
 

<script>
  $(document).ready(function() {
    
    $('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]').setAttribute("checked", "checked");
    
  });
</script>

I think that should work. Oddly, all three of your checkboxes have the same encoded name... doesn't seem right.

Anyway, give that a try and let me know if it doesn't work.

Thank you for your response!

It is weird that the checkboxes have the same encoded name.

I added the javascript to the page's code injection and it didn't work. I'm baffled because it looks like it should!

Try this instead ?

<script>
  $(document).ready(function() {
    
    $('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]').prop("checked", true);
    
  });
</script>

On 5/8/2020 at 11:27 PM, ChromaticZero said:

Try this instead ?

<script>
  $(document).ready(function() {
    
    $('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]').prop("checked", true);
    
  });
</script>

Thanks for this! I tried and it didn't work, but I want to say thanks for taking the time to help me!! The response below finally worked; I'll still have to figure out why but this has been a good learning experience! Thanks again!!

On 5/9/2020 at 8:04 AM, paul2009 said:

You can check all the checkboxes on this form by adding the code below to Settings > Advanced > Code Injection > Footer [or to a Code Block inserted below the Form Block. If using a Code Block, choose HTML and uncheck Display Source].

<script>
window.Squarespace.onInitialize(Y, function(){
  var checkboxes = document.querySelectorAll('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
});
</script>

For the benefit of others who read this post:

• This snippet is for Squarespace 7.0 only, tested on the Brine-family template in the author's question.
• If used on another site, the form's checkbox ID will need to be substituted for the ID used above (shown in green). Each ID is unique (unless a form is duplicated). 
• All code snippets provided on the forum are simplified and provided "as is", without warranty of any kind. If you need code for a business-critical website, consider hiring an experienced web developer who you can trust to keep your site running securely at a competitive price.

 

That did it! Thanks for your help!!

I would like to add a chekbox in the form of the contact section and in pages with newsletters, to comply with the EU Privacy and Cookies law. Please could you let me know how to do it, Like on the following link http://www.dynamicdrive.com/dynamicindex16/acceptterm.htm.

Also I would like to keep if fixed the top navigation bar/menu, I have some script on other sites but it is not working on my current page, please could you let me know how to proceed.

On 5/20/2020 at 3:52 AM, Vescribano said:

I would like to add a chekbox in the form of the contact section and in pages with newsletters, to comply with the EU Privacy and Cookies law. Please could you let me know how to do it, Like on the following link http://www.dynamicdrive.com/dynamicindex16/acceptterm.htm.

Also I would like to keep if fixed the top navigation bar/menu, I have some script on other sites but it is not working on my current page, please could you let me know how to proceed.

If you share link to your site, I can take a look

Hi guys,

I would like to know how to do this for 7.1 please?

Thank you!

On 9/24/2020 at 12:26 AM, JessR said:

Hi guys,

I would like to know how to do this for 7.1 please?

Thank you!

If you share link to page where you use form. Wee can check easier

5 hours ago, tuanphan said:

If you share link to page where you use form. Wee can check easier

Hi Tuan,

Here is the link https://curlfitness2.squarespace.com/trial-pass and password Fitness to view site. 

Thank you!

Jess

On 9/25/2020 at 9:03 AM, JessR said:

Hi Tuan,

Here is the link https://curlfitness2.squarespace.com/trial-pass and password Fitness to view site. 

Thank you!

Jess

Fitness19 sorry not Fitness.

I need to get this functionality working on my 7.1 Squarespace site, URL https://www.stroudtextiletrust.org.uk/membership-page any ideas?

On 5/9/2020 at 11:04 AM, paul2009 said:

You can check all the checkboxes on this form by adding the code below to Settings > Advanced > Code Injection > Footer [or to a Code Block inserted below the Form Block. If using a Code Block, choose HTML and uncheck Display Source].

<script>
window.Squarespace.onInitialize(Y, function(){
  var checkboxes = document.querySelectorAll('input[name="checkbox-yui_3_17_2_1_1588700112150_14382-field"]');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = true;
  }
});
</script>

For the benefit of others who read this post:

• This snippet is for Squarespace 7.0 only, tested on the Brine-family template in the author's question.
• If used on another site, the form's checkbox ID will need to be substituted for the ID used above (shown in green). Each ID is unique (unless a form is duplicated). 
• All code snippets provided on the forum are simplified and provided "as is", without warranty of any kind. If you need code for a business-critical website, consider hiring an experienced web developer who you can trust to keep your site running securely at a competitive price.

 

Could I use something like this to limit the number of checkboxes they can select?

7 hours ago, Guest41 said:

Could I use something like this to limit the number of checkboxes they can select?

No, it would be totally different. I have responded to your other post here:

Hi! I need a way to have a checkbox 'checked' by default. Is there a way to do this with the most recent version of SquareSpace? 

Website: https://www.chateaurvresorts.com/waitlist-form

Thanks in advance for the help!!

6 hours ago, CallieRoberson said:

I need a way to have a checkbox 'checked' by default. Is there a way to do this with the most recent version of SquareSpace?

There is no default built-in feature for this behaviour in SS forms.

If your intent is to pre-check the Please send me occasional updates & offers regarding Chateau RV Resorts., I suggest not doing it. Opt-out is frowned upon and in some jurisdictions may be illegal.

Opt-in is considered the user friendly way to do marketing these days. The idea being users should have to take an action to get signed up. Not take an action to not get signed up because they didn't see or understand what was going on.

If you decide to proceed you'd probably need different JavaScript code than paul2009's solution as you are on v7.1.

I know of no code that does what you want.