Check-box click reveals new question

Here is some quick and easy JavaScript that you should add to your online form projects to get more information out of your contact.

Depending on someone answers a certain question you can reveal a follow up question to ask. The example I use below poses the question "Do you want a sales person to contact you?" If they check off 'Yes' then we reveal a new question asking for their phone number. It allows you to guide the contact along instead of blasting them with a list of questions. IT feels more like a conversation.

My example and how you could do it yourself

---

Check if you want a sales person to contact you.

Phone:

---

This is the JavaScript that you'll need to add to the page. This is looking to see if the checkbox ID which I named 'specfics' is check and if it should reveal the next question.

JavaScript

<script type="text/javascript">
function toggle_more()
{
if (document.getElementById('specifics').checked==false) {document.getElementById('moreinfo').style.display="none";}
else {document.getElementById('moreinfo').style.display="block";}
}
<script>

This is the HTML code for the form question.

HTML

<input id="specifics" onclick="javascript: toggle_more();" type="Checkbox" value="" /> Check if you want a sales person to contact you.

The last step is for the section to appear if the check box is selected. You want your question to be within this DIV tag.

HTML

<div id="moreinfo" style="display: none;"> <div>

The JavaScript is so simple and straightforward. You can now hide your follow up question and only reveal it when they answer accordingly.

What other JavaScript tricks do you use on online forms? What best practices do you follow?