Support for Insight and ChurchInsight users

How can we help you today?

Support > Articles > Article Forms: Adding Tick Boxes to a Form

Adding tick boxes to a form

You can use tick boxes either to gain consent from the persons submitting the form, as in the first example, or where you want users to select more than one item from a list options. If you are wanting an either/or scenario where you want the user to only select one option, and the alternative is deselected, use Radio Buttons.

Single Tick Boxes tick-box

If you are using a single tick box, perhaps designed to gain consent to email the respondent, or to check they have read the terms and conditions then you would set a single tick box as follows:

The code for the tick box would look like this in the source of the article:

     <input name="T&C" type="checkbox" value="yes" /> I have read the terms and conditions?<br />

N.B. Make sure there is something in the NAME field otherwise the form will not generate a column for these details in the web office.
 

Making a single text box mandatory

If you want to make it mandatory to select this tick box (it should be left blank initially in this case), then the submit button needs to be replaced with the following:

<input class="sitebutton" onclick="return CheckAndSubmit(this);" style="width:90px;" type="button" value="Send" />

Note in the button code  the standard "doFormSubmission(this);" is replaced with "return CheckAndSubmit(this);" – which calls a custom function that is included below.

Then, for the above example, add the following in the source code of the article:


<script type="text/javascript">
  function CheckAndSubmit(btn) {
    if ($('input[type="checkbox"][name="
T&C"]').is(':checked')) {
        doFormSubmission(btn);
      }
      else {
        alert('Please read and accept the terms and conditions');
        return false;
      }
  }
</script>


This ensures that the tick box which is named "T&C" is checked. Change "T&C" to be the name of your tickbox.

Setting up a list of multiple tick boxes

multiple-tick-boxesIf you're wanting people to select more than one option, and want all the options they have chosen saved in one column, then you could use the following code which will compile the answers to this section under a single column. So if they selected all the options in this example you would generate a column called 'Volunteering' that would contain: "Welcome,Coffee,Sunday School,Clear up"

 <input name="Volunteering" type="checkbox" value="Welcome" />&nbsp;&nbsp; Would you be prepared to be on the welcome team?<br />
 <input name="Volunteering" type="checkbox" value="Coffee" />&nbsp;&nbsp; Can you help with making coffee and tea?<br />
 <input name="Volunteering" type="checkbox" value="Sunday School" />&nbsp;&nbsp; Would you be able to help in the Sunday School?<br />
 <input name="Volunteering" type="checkbox" value="Clear up" />&nbsp;&nbsp; Can you stay to help clear up the hall after the meeting?<br />

Making it mandatory to tick one of the boxes

If you are wanting to ensure that the person filling in the form ticks at least one option, then the submit button needs to be replaced with the following:

<input class="sitebutton" onclick="return CheckAndSubmit(this);" style="width:90px;" type="button" value="Send" />

Note in the button code  the standard "doFormSubmission(this);" is replaced with "return CheckAndSubmit(this);" – which calls a custom function that is included below.

Then, for the above example, add the following in the source code of the article:


<script type="text/javascript">
  function CheckAndSubmit(btn) {
    if ($('input[type="checkbox"][name="Volunteering"]').is(':checked')) {
        doFormSubmission(btn);
      }
      else {
        alert('You must select one of the options');
        return false;
      }
  }
</script>


A brief explanation:
$('input[type="checkbox"][name="Volunteering"]').is(':checked') – this ensures that one of the check boxes which are named "Volunteering" is checked. Change "Volunteering" to be the name of your group of tickboxes.

Creating a new column for each option in the form response

If you are wanting a column each for Welcome, Coffee, Sunday School, Clear up in the example above, then you'd used the following code, where you have a different 'NAME' for each option, it's the name field that generates the column in the web office. The following code will give you a 'yes' under each column that the respondent has selected.

 <input name="Welcome" type="checkbox" value="yes" />&nbsp;&nbsp; Would you be prepared to be on the welcome team?<br />
 <input name="Coffee" type="checkbox" value="yes" />&nbsp;&nbsp; Can you help with making coffee and tea?<br />
 <input name="Sunday School" type="checkbox" value="yes" />&nbsp;&nbsp; Can you help in the Sunday School?<br />
 <input name="Clear up" type="checkbox" value="yes" />&nbsp;&nbsp; Can you stay to help clear up the hall?<br />

Most importantly, test every form as soon as you publish it and check the results in the web office. If the 'name' is missed from any field then the results will not be saved and you will lose the information people are submitting. When testing forms with multiple tick boxes, tick all the options, this will set the order the columns are generated in the web office. If you are wanting a box to be mandatory please test that you can't submit the form until this is filled in.