Jump to content

How can I make form checkboxes checked by default?

Go to solution Solved by paul2009,

Recommended Posts

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!

Link to comment

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.

Link to comment
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!

Link to comment
  • Solution
On 5/8/2020 at 3:54 AM, songbird said:

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?

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.

 

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
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!!

Link to comment
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!!

Link to comment

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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
  • 5 months later...
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?

Link to comment
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:

 

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
  • 8 months later...
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.