What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to add reset button in form?

    Asked by pthimsen on February 10, 2015 at 12:18 AM

    Is there a way to apply a "reset" function to an individual section of options whether they are drop down, radio buttons or checklists in order to clear a section of selections completely?

    http://form.jotform.us/form/50395015285151

     

    JotForm radio buttons section href
  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 10, 2015 at 08:35 AM

    Hello pthimsen,

    When you say "an individual section of options", Do you mean to reset only few fields of your form?

    Though it is not possible to reset only few form field but if you want to reset entire form, you should go ahead and add a "Reset" button in form. Reset button will reset all the form fields of your form. Please check the screenshot below on how to add reset button in form:

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by pthimsen on February 23, 2015 at 01:50 PM

    How does using the reset button impact fields that you want to pre-populate, i.e. contact info? I have enabled the setting to auto-fill the form, even though it retains information from previous orders that is no longer relevant. I want to clear the product info from previous orders while retaining the contact info for users who will be accessing this form multiple times within a short period of time.

    It is tedious for our clients to have to fill in their contact info each time although we want the options to continue to be available in case of any change there.

    Please advise.

    The form I am referencing is Rainmaker Campaign Wizard.

    Thank you,

    Pat

     

     

  • Profile Image

    Answered by pthimsen on February 23, 2015 at 01:57 PM

    It appears the only place to add the reset button is from the "submit" field options. I have multiple "submit" options on my form - one for each variation of the product/service we offer. How do we universally clear the form using just one reset button instead of having to go to each section/page of the form to reset individual ordering options.

    We will not be able to instruct our clients to clear their form each time before using it. Right not the form is not on our website. We are emailing the form link to our clients for them to retain and have handy as they need to place orders.

    This does not seem user friendly. Please advise if my understanding of how best to use the reset option is not accurate.

    Thank you,
    Pat

    My form I'm referencing is Rainmaker Campaign Wizard

     

     

  • Profile Image
    JotForm Support

    Answered by Kiran on February 23, 2015 at 03:40 PM

    The reset button can be enabled only from the submit field options. Alternatively, you can also use HTML Text to place a reset button on your JotForm by following the steps below :

    1. Add Text tool on the form and click on Edit HTML

    2. Click on HTML icon on the left bottom corner of the tool bar

    3. Add the following code to it and click on Update to see the Reset button

    <input type="reset" class="form-submit-button-book_blue2" />

     

    Having one Reset button is sufficient because, clicking on any of the reset buttons available on your JotForm would clear the entire form including pre-populated data irrespective of sections/page of the form.

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help.

  • Profile Image

    Answered by cheekyface on August 18, 2015 at 10:34 PM

    I tried to change the text to read "clear form" instead of reset and it didn't work.  Is it possible to do that?

  • Profile Image

    Answered by cheekyface on August 18, 2015 at 10:57 PM

    ...Actually I just figured it out,

     value="clear form".

    Still trying to work out how to style the button.  
    Do I just add a color style to change it? Where does 'book_blue2' come from?

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 19, 2015 at 01:17 AM

    Hello,

    Can you please try to use the following button code and see if that helps you. It will take the same style as your submit button:

    <button id="input_reset_162" type="reset" class="form-submit-reset" style="width: 140px;">

                  Clear Form

                </button>

    You can further style it by adding the css code in the style attribute of above button code.

    Do try it out and get back to us if you have any questions.

    Thank you!

  • Profile Image

    (Private)

    Answered by cheekyface on August 19, 2015 at 09:20 AM

    Thank you.

    I'm trying something a little different as I'm not so hot with css so taking the easy way out (hopefully).  I've used a button maker online to generate the html & the css for a button but I don't know how to make it work as a rest button.

    Could you please show me what to do?

    I've tried to insert the css and the code and I get it working but then I don't know what to change to make it a reset button.  the css below refers to a class that I've named resetBtn but the code you gave me has a class and an id so I'm a little confused.  I've only learned a little about css.

    Do I change the ID for the css to #"input_reset_162" or is the class all wrong in my code?  Something else?

    please help?

    here's the html:
    <a target="_blank" href="#" class="resetBtn">Clear Form</a>

     

    here's the css:

    .resetBtn {

    -moz-box-shadow:inset 0px 1px 6px 0px #f9eca0;

    -webkit-box-shadow:inset 0px 1px 6px 0px #f9eca0;

    box-shadow:inset 0px 1px 6px 0px #f9eca0;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0c911), color-stop(1, #f0681f));

    background:-moz-linear-gradient(top, #f0c911 5%, #f0681f 100%);

    background:-webkit-linear-gradient(top, #f0c911 5%, #f0681f 100%);

    background:-o-linear-gradient(top, #f0c911 5%, #f0681f 100%);

    background:-ms-linear-gradient(top, #f0c911 5%, #f0681f 100%);

    background:linear-gradient(to bottom, #f0c911 5%, #f0681f 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f0681f',GradientType=0);

    background-color:#f0c911;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

    border-radius:10px;

    border:2px solid #fafafa;

    display:inline-block;

    cursor:pointer;

    color:#ffffff;

    font-family:Arial;

    font-size:14px;

    padding:6px 8px;

    text-decoration:none;

    text-shadow:0px 1px 0px #756b2d;

    }

    .resetBtn:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f0681f), color-stop(1, #f0c911));

    background:-moz-linear-gradient(top, #f0681f 5%, #f0c911 100%);

    background:-webkit-linear-gradient(top, #f0681f 5%, #f0c911 100%);

    background:-o-linear-gradient(top, #f0681f 5%, #f0c911 100%);

    background:-ms-linear-gradient(top, #f0681f 5%, #f0c911 100%);

    background:linear-gradient(to bottom, #f0681f 5%, #f0c911 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0681f', endColorstr='#f0c911',GradientType=0);

    background-color:#f0681f;

    }

    .resetBtn:active {

    position:relative;

    top:1px;

    }

     

  • Profile Image
    JotForm Support

    Answered by Kiran on August 19, 2015 at 10:53 AM

    Is this something you are looking for?

    I've added the button using the following code to a text field.

    <p style="text-align: center;"><button id="input_reset_162" class="form-submit-reset resetBtn" style="width: 140px;" type="reset"> Clear Form </button></p>

    I've injected the CSS code with the class resetBtn  to the jotform and added the class to the Reset button as below :

    You may also try our inbuilt button styles from the Form Designer by clicking on Button Style icon.

    Hope this information helps! Let us know if you need any further assistance.  We will be happy to help.

  • Profile Image

    Answered by cheekyface on August 20, 2015 at 04:23 AM

    Hi Kiran.
    Thanks for your reply.  That looks like it'll be good if I can't work out how to make the reset button with my own code and css.
    The reason is that I want the button to have text along the side of it.  You will see what I mean on the form at this page:

    http://cheekyface.com.au/forms/quote/

    It's not  a big problem but I just wanted to know how to alter the html correctly so that I could use it as a reset button and with the css I included in the last post. 

     

    I'll give some that a go when I get the chance so thank you!!