Does anyone know the best way to add a 'Clear' button to Freeform forms that would clear all fields?
1 Answer
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
I don't believe there is an option to add a default Clear Form button, but you really just need the tiniest bit of JavaScript and HTML. Depending on the way you use FreeForm, hard code the HTML for the button at the bottom of your form. If you use an automated output and don't build the form's elements yourself, use jQuery to insert it where you need. Example (place after Submit button):
$(document).ready(function(){
// add button
$('#my_freeform_form_element submit').after('<button id="clear_form">');
// add clear functionality
$('#clear_form').click(function(){
document.getElementById("my_freeform_form_element").reset();
});
});
-
Thanks - though I was looking for a solution that would clear the whole form without me having to specify each element individually. So your answer wasn't exactly what I needed, but I did get there so thanks for the help. Turns out all I needed was to add an input with type/name="reset": <input class="btn" type="reset" value="CLEAR FORM" name="reset"> Thanks for your help though! Commented Jan 8, 2016 at 18:15
-
Justin, if you took a look at the MDN developer link, that's exactly what this function does. If you have:
<form id="myform"> .. form elements .. </form>and calldocument.getElementById("myform").reset();it resets every form element in the form! I think my example ID name was unclear. Commented Jan 8, 2016 at 18:41 -
Ah, sorry for the misunderstanding - I couldn't actually test your code as I don't have the ability to add an ID to the Freeform form... the tags generate the actual <form> element. But I got there in the end - thanks for your help Commented Jan 8, 2016 at 22:13
-
1Justin, glad you got solved! But just FYI, FreeForm forms have a designated attribute (may not be ID depending on your use) on the
<form>element you can always target. It may be anameattribute, but there are always ways to give that FreeForm<form>element tag a unique attribute you can target with jQuery (for fun, right? :) ). Happy coding! Commented Jan 9, 2016 at 2:10