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 make the next, back and submit button into the same line?

    Asked by glenpoolps on June 23, 2015 at 10:52 AM
    2) I am having trouble with the very bottom of my form as well...I just need "Back" "Next" and "Submit" in the blue line at the bottom. For some reason there are three lines and it looks quite messy. Please advise.
    next button back button submit button align buttons
  • Profile Image
    JotForm Support

    Answered by Welvin on June 23, 2015 at 11:07 AM

    You have to delete the page break after the submit button then add the following custom CSS codes in the form:

    button#form-pagebreak-back_94 {

      top: 20px;

      position: absolute;

    }

    The result should be like this:

    You can see this in my cloned version of your form: https://www.jotform.com/form/51734774140959.

    Please get back to us if you need further assistance.

    Thanks

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 11:15 AM

    You made the bottom of the form exactly as I wish it to look! What I don't understand is where to type in that code to make the form on my end look like your example does. I understand that I have to click on the CSS tab but from there I am lost. Please advise.

  • Profile Image

    Answered by Sammy on June 24, 2015 at 12:42 PM

    If you are using the designer, in the CSS tab paste the above code in the edit area.

    Alternatively you can paste the code under Preferences->Form Styles [Inject Custom CSS]

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 01:05 PM

    Ok. In each instance, there is already coding jargon in the blanks you outlined in red above. As such, I do not know where/how to insert the CSS coding provided by Welvin above.

    Do I delete all of the coding that is currently in there? Insert the coding from Welvin above the coding that is currently in there? Insert the coding from Welvin below the coding that is currently in there?

    I need a better, more specific explanation. I am not a coding master, in fact, this is all very foreign and difficult for me.

  • Profile Image

    Answered by Sammy on June 24, 2015 at 01:23 PM

    Hi,

    Sorry for the confusion

    Add the CSS at the bottom of the field as a new entry, there is no need to delete the existing lines.

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 01:43 PM

    Aye carumba! It still didn't work. I tried adding that code from Welvin at the very bottom of the existing coding in BOTH of the places that you suggested (one at a time of course) and neither worked. Sigh. I just don't get it.

     

  • Profile Image
    JotForm Support

    Answered by Mike on June 24, 2015 at 03:46 PM

    It appears that injected code works, but the submit button container sizing is different on your form. I have changed the Back button position from top 20px to 10px to fix the positioning issue.

    button#form-pagebreak-back_94 {
    top: 10px;
    position: absolute;
    }

    You can test the live form now.

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 04:19 PM

    That didn't work either and now the "Back" button on page 1 is all wonky as well. This CSS coding stuff is for the birds!!!

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 04:22 PM

    What am I saying? The first page should not have a "Back" button! AGH! How can I get that taken off?

  • Profile Image
    JotForm Support

    Answered by Mike on June 24, 2015 at 04:49 PM

    This is happening since we apply the absolute position method to the Back button. However, it should not affect your published form. You can check the form using direct link to confirm this:

    http://form.jotform.us/form/51402544611141

    Thank you.

  • Profile Image

    Answered by glenpoolps on June 24, 2015 at 05:02 PM

    Ok, I can't check anything past the first page because of the required values we have on our application.

    I see that you made the change on the final page from the screenshot provided but how do I implement that change in "My Forms". I was told that any change a support team member makes on your end does not automatically show up in "My Forms" ergo all of my problems with trying to copy and paste this CSS coding myself.

    I don't know how to tell if everything is fixed now or not.

    Also, why is there a "Sample Logo" picture out to the right of our form? Can that be removed?

    Thank you for your help!

  • Profile Image
    JotForm Support

    Answered by Mike on June 24, 2015 at 05:54 PM

    You can enter dummy data and navigate between form pages. The data is only submitted when you hit the Submit button, so the Next/Back buttons do not submit anything.

    Question about form logo has been answered via the next thread.

    http://www.jotform.com/answers/596125

  • Profile Image

    Answered by glenpoolps on June 25, 2015 at 09:22 AM

    I understand that but unfortunately we have a lot of required fields and I do not have the time to fill in fake answers for all of them simply so I can view my final page.

    Is there anyway you could take a screenshot or point out where exactly I need to insert that code you have highlighted in yellow from your post June 24th at 3:46? I have attempted using the code numerous times but I am clearly inserting it in the wrong place because it is not working for me.

    With our former program, I was able to drag and drop elements, adjust label width with my mouse, and other very easy user-friendly actions for editing forms. This CSS stuff is totally foreign to me and quite difficult so when a support person sends me a code and tells me to inject it, that is great; however, once I get that CSS tab open I am at a loss as to where to insert the code provided to me. I could really use some further guidance. Thank you!

     

  • Profile Image
    JotForm Support

    Answered by Welvin on June 25, 2015 at 10:50 AM

    Required Fields:

    You can make them as not required at once through Manage Fields option: https://www.jotform.com/help/242-How-to-Manage-Multiple-Fields. Then you can do the same method for requiring them back later after testing.

    I did the changes here: http://www.jotformpro.com/form/51754052804957

     

    Injecting a Custom CSS codes to the form in the Form Preferences section:

    1. Follow the steps here: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    2. If you are in the "Form Styles", just simply click the "Inject Custom CSS" box. This will auto-highlight the entire codes:

    3. Now, just simply scroll down to the bottom and add the codes there:

     

    Injecting a Custom CSS codes to the form in the FORM DESIGNER section:

    1. In the form builder, click the "Designer" button:

    2. In the Form Designer window, click the "CSS" tab (No. 1 in the below screenshot).

    3. Scroll down to the bottom

    4. Add your custom CSS codes after the last one (No. 2 in the below screenshot).

    5. You'll notice the message that says "CSS Applied to form & Saved Successfully" (No. 3 in the below screenshot).

    6. Just click the "Save" button in the top-left side and that's it.

    Please do not hesitate to get back to us if you need further assistance.

    Thanks

  • Profile Image

    Answered by glenpoolps on June 25, 2015 at 06:01 PM

    I have tried that so many times and it does not work!! Do I need to remove some other coding first?

    I want the bottom of my very last page of that form to appear as it does in the screenshot in Mike's post above from June 24th at 3:46 p.m.

    It does not work for me. I am at a loss.

  • Profile Image

    Answered by Shadae on June 25, 2015 at 11:14 PM

    Hi glenpoolps,

    I do apologize for the issue that you are experiencing with getting your back button formatted using CSS code.

    Please attempt to clone the follow form to your account: http://form.jotformpro.com/form/51758761454969 

    The CSS codes have already been added and the required fields have been removed to allow you to go and view the final page.

    You can then make edits to the cloned form. How to Clone a Form

    Please inform us if you are still experiencing an issue, we would be happy to assist you.

  • Profile Image

    Answered by glenpoolps on June 30, 2015 at 09:03 AM

    The problem with cloning that form in your link above is that it was not in its final form and I have since made A LOT of other changes to it. I just want to be able to use the coding and go on. I don't understand why it won't work for me. I guess I will just give up and leave it as is with the submit and back button all by themselves on the very last page rather than on the bottom of what should be the very last page. This has been WAY too much trouble! It's not the end of the world, it just looks weird and wastes a page. Thanks anyway.

  • Profile Image
    JotForm Support

    Answered by Welvin on June 30, 2015 at 10:39 AM

    I would suggest finalizing the form structure first and get back to us so we can make the adjustments of the buttons. And so we can check on what's wrong and why you can't make it. 

    Thanks