How to add reset button in form?

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

 

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!

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

 

 

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

 

 

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.

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

...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?

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!

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 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;

}

 

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.

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!!