FormsGiveWP

How to pre-select a checkbox on a donation form

By May 25, 2021No Comments

Let’s say you have a donation/giving form on your website. Let’s also say you want to have one of the options “pre-selected” on page load. For example, perhaps you want to pre-select the “I’d like to cover the transaction fees of $XX for my donation” option so users are more likely to commit to covering the fees.

Luckily enough, you can solve this with a simple Javascript snippet. This is very useful when pre-selecting options on donation forms, contact forms, or anything really.

Requirement: Must be able to add custom code/javascript to your website. (this can be easily achieved using the HTML block or page builder element, depending on your theme)

This has been battle tested to work on GiveWP’s donation form, as seen here.

The Snippet, originally sourced from this article.

window.onload = onPageLoad();

function onPageLoad() {
  document.getElementById("your-checkbox-input-ID").checked = true;
}
<input type="checkbox" id="your-checkbox-input-ID">

You replace your-checkbox-input-ID with your Checkbox’s Input ID.

The exact code you would place on your website, would be something like this, including the <script> code:

<script type="text/javascript">
 window.onload = onPageLoad();

function onPageLoad() {
  document.getElementById("your-checkbox-input-ID").checked = true;
}
</script>

Happy coding!

Leave a Reply