How can I align my submit button with 'next' button on page 1 of my form

  • customlogoshop
    Asked on December 22, 2015 at 7:05 AM

    I want to have a submit button on the first page where people can just submit details and select order without filling in the details. 


    However, I need the submit button the same line as 'next' and I want 'submit' to be in the right corner of the form. 

    Can you help please,


    Thanks Jotform Team :) 

  • victor
    Replied on December 22, 2015 at 9:09 AM

    Thank you for contacting us. I have clone your form and made the following changes to accomplishe what you were looking for:

    https://form.jotform.com/53553710722956

    To align the submit button to the right, click the right-align button in the designer window

    How can I align my submit button with next button on page 1 of my form Image 1 Screenshot 30

    To adjust the position of the next button we have to inject the following CSS code

    #cid_41 {

        padding-top : 20px !important;

        position : absolute !important;

    }

    How can I align my submit button with next button on page 1 of my form Image 2 Screenshot 41

    Please let us know if this helps.

  • customlogoshop
    Replied on December 22, 2015 at 10:25 AM

    the next button is not there on clone form

  • BJoanna
    Replied on December 22, 2015 at 1:01 PM

    If I understood you correctly you want to have additional submit button on first page of your form. Do you want that first page of your form looks like this?

    How can I align my submit button with next button on page 1 of my form Image 1 Screenshot 30

    If that is the case first you need to add additional submit button to your form above first page break field. Then you need to Shrink that field and align submit button to Right.  

    How can I align my submit button with next button on page 1 of my form Image 2 Screenshot 41

    Then you need to add this CSS code:

    #cid_50 {

    padding-top: 41px !important;

    margin-left: 300px!important;

    position: absolute !important;

    }

    How to Inject Custom CSS Codes

    Here is my demo form: https://form.jotform.com/53554555807968 

    Feel free to clone it

    Hope this will help. Let us know if you need further assistance.