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

    Put back and submit buttons on same line with same style

    Asked by NRCsupport on February 17, 2014 at 09:22 AM
    style same line same and
  • Profile Image

    Answered by NRCsupport on February 17, 2014 at 09:36 AM

    In another thread TitusN said

    'Like my colleague said, you can actually style your form such that the submit button and the next button have the same look, line-position and feel.

    The reason why they cannot be combined in the form builder is because of the feature disparity - however, CSS resolves this by applying the similarity through styling.

    I have submitted a feature request to that end - there is no timeline to implementation, but in the meantime we could assist with a workaround that would require you to use the form's source code.

    Please open a new ticket with the form you would like to appear as per your description above, and we shall be happy to assist with styling.'

    Am I right that if you give me code to insert, I shall have to redo that each time I modify the form? Or will it go in the inserted CSS section and stay with the form?

    The problem with the buttons is that if I use one of the pretty buttons you offer, it does not show up if the user is on IE8. Instead it shows as an almost invisible rectangle, with totally unreadable text on it. Using your default simple rectangle works, but my back button and my submit button have different levels of blackness in their text, which looks messy.

    The form is at http://form.jotformeu.com/form/40465193394358 and I would like to get the submit button and the back button onto the same line and with the same style. You might not see the back button in the form builder. Nothing after the submit button shows. I've submitted a seperate thread on that topic.

    Thanks

  • Profile Image

    Answered by EliezerN on February 17, 2014 at 10:26 AM

    Thanks for the additional information.

    By injecting CSS codes directly to the form you will not need to redo it everytime you edit your form. So, to accomplish what you need simply inject this CSS code to your form:

    .form-submit-button

    {

    position:absolute !important;

    top:13px !important;

    }

    #form-pagebreak-back_91

    {

    width:75px !important;

    height:33px !important;

     

    }

     

    Follow the steps in the image to inject the code: 

    Your form will look this way:

     

    Please add the code and let us know if it works as you wish or if you need further assistance with this inquiry.

    Thanks

  • Profile Image

    Answered by NRCsupport on February 17, 2014 at 10:45 AM

    Thanks very much.

    This nearly works, but not quite. I've noticed 2 problems.

    1. The text is still not the same density on both buttons.

    2. On IE8 the two buttons now overlap.

    Also, does the fact that you have put in a position : absolute mean that if I change the page layout in some way, I shall need to alter that.

  • Profile Image

    Answered by pinoytech on February 17, 2014 at 11:45 AM

    Hi,

    I've updated the code provided by my colleague and append to the form. Can you please take a look at this clone form?

    http://www.jotformpro.com/form/40474687927974

    CSS:

    .form-submit-button

    {

    position:absolute !important;

    top:13px !important;

    left: 450px !important;

    font-size: 14px !important;

    color: #666;

    }

    #form-pagebreak-back_91

    {

    width:75px !important;

    height:33px !important;

    }

    This is how it looks like using chrome and IE browsers.

    Feel free to contact us again if you need further assistance.

  • Profile Image

    Answered by NRCsupport on February 17, 2014 at 07:05 PM

    Well that sort of works in the shortened form which you used, except for on thing. If you press submit without entering the capture, the line that there is an error on the form appears, and the back button gets pushed down, but the submit button stys where it is (presumably because of the absolute position.

    But I can't get it to work on my actual form. Maybe the field name for the back button is different from that given in the css code. It is difficult to check, because the next button does not show up in the form bulder. (I have already had an explanation of why that is).

  • Profile Image

    Answered by NRCsupport on February 17, 2014 at 08:20 PM

    Further to my above reply. I found that I lost a full-stop when copying your suggestion to my actual form. It now works the same as on your demo form, and also works on IE8. Thankyou.

    But there is still the oddity of the back button moving down and the submit button staying still when there is an error (such as not entering anything in the captcha).

    Is it really necessary for the submit button position to be made absolute, couldn't it be relative to something? so that it would move when the back button moves.

    Thanks

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 17, 2014 at 11:19 PM

    Hello NRCsupport ,

    Thank you for your update. Your question have reached my colleague and he will get back to you once he is back online. 

    Meanwhile I will also try to find out if I can come up with something to sort out the problem you are having because of the error messages.

    Thank you!

  • Profile Image

    Answered by NRCsupport on February 18, 2014 at 02:47 AM

    Thanks. I do love the speed of response on this forum. It is amazing!

  • Profile Image

    Answered by pinoytech on February 18, 2014 at 07:10 AM

    Hi NRCsupport,

    Sorry to keep you waiting. With regards on the issue, please inject this custom css into your form to fix the issue.

    .form-button-error {

    position: absolute;

    margin-left: 140px !important;

    }

    Please consider checking this clone form also to see how it work.

    http://www.jotformpro.com/form/40482515540954

    Feel free to contact us again if you need further assistance.

  • Profile Image

    Answered by NRCsupport on February 18, 2014 at 08:12 AM

    Thank you very much. That very nearly works. I've noticed two problems so far.

    1. When hitting 'next' on a page with errors, the page error message slightly overlaps the next button.

    2. (I'm not sure if this is new behaviour). On both 'next' and 'submit' buttons - if an error was reported on a previous press of the key, and the error has now been corrected, pressing the key clears the error message, but does not go to the next page or submit the form. Pressing the key one more time then has the desired action. This extra press of thekey is undesirable.

    Another oddity I've noticed is that the horizontal line above the back and next buttons does not appear on the first page, which has anext button but no back button.

  • Profile Image
    JotForm Support

    Answered by NeilVicente on February 18, 2014 at 08:59 AM

    This clone has #1 fixed:

    http://form.jotform.me/form/40483898784474?

    As for #2, I don't quite understad what you mean by 'press of the key'. Can you give us the steps as to how the problem can be recreated?

  • Profile Image

    Answered by NRCsupport on February 18, 2014 at 09:42 AM

    Thanks, I'll look at the clone in a moment. Can you tell me what you have changed.

    #2. I'll try to explain more clearly step by step. Sorry about saying 'press the key' - of course I meant click the button.

    1. Do not complete some of the compulsary fields in a page

    2. Click Next. You will get an errors on the page message

    3. Correct the errors

    4. Click Next again. The error message clears, but Next is not actioned and the same page remains open.

    5. Click Next again, and it is actioned normally.

    Step 5 should not be necessary, the next page should be shown at step 4.

    The submit button behaves similarly.

  • Profile Image

    Answered by NRCsupport on February 18, 2014 at 10:16 AM

    Hi again, I've looked at the clone you referred me to. Yes it has cured the problem with the error message overlapping the next button, but it shows the following oddities.

    1. Sometimes when there are errors on a page, the error fields are flagged as they should be, but the error message at the bottom (above the buttons) is missing.

    2. On the last page the back and submit buttons are no longer on the same level

    3. I believe that on at least one occasion, correcting a failure to fill the last radio button on the first page immediately went to the second page without clicking next again.

    4. This change makes the back and next buttons be further away from the last field. Would it be possible to put the error on page (and error on form) message below the buttons.

    5. Could we do away with the feint line above the back and next buttons? (a) It wastes a little space and (b) It does not seem to be there on the first page.

    6. The behaviour I described in my previous message seems to happen less frequently than before but is still there most of the time.

  • Profile Image

    Answered by NRCsupport on February 18, 2014 at 11:17 AM

    Another strange  thing in this form. Go through this sequence

    1. Get to the last page.

    2. Click Submit without filling in captcha. You will get the field marked as required, and (usually) the error on form message.

    3. click in the captcha field, and the required field warning will clear

    4. Click back. The required field warning reappears and thesamepage remains displayed

    5. Click back again, andit goes to the previous page.

    Step 5 should not be needed. Step 4 should go to the previous page.

  • Profile Image

    Answered by NRCsupport on February 18, 2014 at 11:25 AM

    Another funny with that form

    1. In first page click Next without filling any fields

    2. All fields will be flagged as required

    3. Click on either of the two radio button groups

    4. Ususally the required field warning will clear, but the 'selected' dot will not appear

    5. Click theradio button again and it does work correctly.

    Once again step 5 should not be needed.

  • Profile Image

    Answered by pinoytech on February 18, 2014 at 11:29 AM

    Hi,

    I've fixed the issue of error message position and alignment of submit button. Kindly check your form: http://www.jotformeu.com/form/40465193394358

    Feel free to contact us again if you need further assistance.

  • Profile Image

    Answered by NRCsupport on February 18, 2014 at 12:01 PM

    That is absolutely fantastic. Just what I wanted. Thank you so much. The service here is absolutely first class.

    Building on all your brilliant work, I'm going to see if I can do away with the blank area above the buttons where the error message used to appear. I'm learning a lot about CSS from all the help I've been getting here.

  • Profile Image

    Answered by pinoytech on February 18, 2014 at 12:17 PM

    Glad to hear that NRCsupport! If you need our assistance again, please feel free to contact us at anytime.

    Have a nice day!

  • Profile Image

    Answered by amohammedomer on August 05, 2014 at 05:10 AM

    Hi,

     

    I also wanted to put back and submit button on the same horizontal alignment and tried to clone the link provided. But the following link doesn't work .

    check your form: http://www.jotformeu.com/form/40465193394358

  • Profile Image
    JotForm Support

    Answered by ashwin_d on August 05, 2014 at 05:55 AM

    Hello amohammedomer,

    I have moved your question to a new thread and you will be answered in the following thread :  http://www.jotform.com/answers/412100

    Thank you!