Add Clear Form button at top of form

  • netruck
    Asked on April 8, 2016 at 3:10 PM

    I have my form saving the details  until it's submitted enabled.  Is there a way to add a Clear Form button or a link at the top of my form so that the customers can easily clear the form details without traveling to the bottom of the form?

  • David JotForm Support
    Replied on April 8, 2016 at 4:28 PM

    Add another submit button to your form:

    Add Clear Form button at top of form Image 1 Screenshot 30

    Once it is added, open your form in the designer by clicking on the designer button.  Once your form is opened in the designer, click on the CSS tab, then double click on the submit button to bring up the specific ID for the the submit button:

    Add Clear Form button at top of form Image 2 Screenshot 41

    After the submit button is selected, the field ID should be shown in the CSS section.  You can click on "display" and change it to "none" to automatically add the code to hide the submit button.  It is also possible to get the ID of the submit button and manually add the CSS:

    #input_1 {
        display : none;
    }

    Replace the input ID with that of the submit button.

    This would give you a clear or reset button where ever you would like and exclude the submit button from being shown along with it.  Here is a quick test form with just a clear button shown:

    https://form.jotform.com/60985938903976

  • netruck
    Replied on April 11, 2016 at 5:31 PM

    Thank you!  I have found on some forms I'm able to format this how I want (all in one line) and others it doesn't work and the text wraps for no reason.

    I would like it to look like https://form.jotform.com/60396588440161  (all one line)

    But on some forms I'm getting two lines (https://form.jotform.com/60416882074154)

    Can you please tell me how to fix this?

  • David JotForm Support
    Replied on April 11, 2016 at 6:46 PM

    For the second form, if you add this code:

    #text_48 {
        width : 520px;
    }

    It will increase the width of the specific text field and will allow for the full text to show on one line.  Here is what the form would look like with the code added:

    https://form.jotform.com/61016735470956

  • TomsWallpapers
    Replied on April 11, 2016 at 7:45 PM

    Thanks! I needed this too 

  • Charlie
    Replied on April 12, 2016 at 1:05 AM

    @TomsWallpapers

    I'm glad this thread discussion have helped you. Please feel free to open a new thread here in the forum if you need any help. Thank you.

  • netruck
    Replied on April 13, 2016 at 8:34 PM

    Thanks for your help!  I noticed this doesn't work well with a mobile device  The text doesn't wrap.
  • Chriistian Jotform Support
    Replied on April 13, 2016 at 11:21 PM

    To better assist you with your latest concern, I have moved your question to a new thread. You can check out that thread by following this link: https://www.jotform.com/answers/818081 

    Your question will be answered there in a timely manner.
    Regards.