1

Does anyone know the best way to add a 'Clear' button to Freeform forms that would clear all fields?

1

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();
    });
});
4
  • 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! – JustinXyn Jan 8 '16 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 call document.getElementById("myform").reset(); it resets every form element in the form! I think my example ID name was unclear. – jrothafer Jan 8 '16 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 – JustinXyn Jan 8 '16 at 22:13
  • 1
    Justin, 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 a name attribute, 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! – jrothafer Jan 9 '16 at 2:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.