Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I make form checkboxes checked by default?


songbird
Go to solution Solved by paul2009,

Question

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 post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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="checkbo

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

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 Bloc

12 answers to this question

Recommended Posts

  • 0
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.

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company helping¬†Squarespace users by¬†building¬†the features that Squarespace didn't include‚ĄĘ.
Explore our range of Squarespace Extensions, including the Wishlist, and Datepicker Extension or book a Squarespace Expert for 1:1 help. Note that links in my posts may be affiliate links.

Link to post
  • 0

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 post
  • 0
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 post
  • 0
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 post
  • 0
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 post
  • 0

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 post
  • 0
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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...