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

    Align my submit and back button and make the submit button look the same as the Back/Next button

    Asked by becca718 on October 29, 2016 at 10:30 AM

    Hi Guys I searched all over and none of the other answers worked for me.  Could you help me align the back and submit button and make them look the same as well?  TY!

    back button page break button
  • Profile Image
    JotForm Support

    Answered by jonathan on October 29, 2016 at 05:52 PM

    Hi,

    You did not mention what is the alignment you need for the page break button so I was not able to properly identify what was needed.

    As for the button colors of both page break and Submit, you can use the quick Form Designer to do it. Please review the video below for guide

    Let us know if you need further assistance.

    Thanks.

     

  • Profile Image

    Answered by becca718 on October 29, 2016 at 06:44 PM
    I would like the submit button to be the same color as the back and next buttons not have all of them blue.
    As for alignment. I'm referring to the last page where a user can cLick submit.i would like he submit and back button to look like the back and next buttons align on the other pages. Does that make sense?
    Becca
    Sent from my iPhone
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris on October 30, 2016 at 08:08 AM

    You are using a customized form with existing CSS codes injected into it. Customizing it would require another set of CSS codes to overrule the existing styles.

    Inject this CSS codes to your form, this should align the submit button to the page break buttons and changed its styles.

    http://pastebin.com/raw/m57YkBXX

    Example:

    Hope this helps!

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 30, 2016 at 08:09 AM

    By the way, here's how to inject custom CSS codes to your form http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. Paste it into the bottom section.

  • Profile Image

    Answered by becca718 on October 30, 2016 at 08:44 AM
    hmmm..I just input that code and now the submit button is aligned all the
    way to the left and on tob of the back button...
    Sent with Mailtrack

    ...
  • Profile Image
    JotForm Support

    Answered by KadeJM on October 30, 2016 at 12:40 PM

    I checked on this and it seems to me that either something was missing or was conflicting.

    Upon reapplying Elton's css code I found it seems aligned almost properly since before it definitely didn't look even close or right at all on my end I think.

    However, I ended up making some slight adjustments to fix it up some more for you since it was still a little off.

    Check and add in all of Elton's Code again then add this into the form below that:

    #form-pagebreak-back_25  {margin-top: -8px }

    #input_2 {margin-top: 6px }

     

    Alternatively, you can just clone this form here with the applied changes on it:

    https://form.jotform.com/63034543717959 

     

    Before:

    After:

    Is this closer to what you wanted? 

     

  • Profile Image

    Answered by becca718 on October 30, 2016 at 01:44 PM
    I cloned your form and it's still not working. hmmmm...
    https://form.jotform.com/63035481014143
    Sent with Mailtrack

    ...
  • Profile Image
    JotForm Support

    Answered by Mike on October 30, 2016 at 03:49 PM

    You can try the following, a bit modified version of Elton's CSS:

    http://pastebin.com/raw/fGhC3prw

    Result:

    Note that we cannot guarantee mobile compatibility for injected CSS.

  • Profile Image

    Answered by becca718 on October 31, 2016 at 04:44 PM
    It's so strange...when I modify it on the custom CSS it looks fine but once
    I preview it, the Submit button is still about 30 pixels above where the
    Back button is...
    Sent with Mailtrack

    ...
  • Profile Image
    JotForm Support

    Answered by Mike on October 31, 2016 at 06:20 PM

    I have added the next CSS to your 'Clone of Clone of Request A Bid' form.

    http://pastebin.com/raw/fGhC3prw

    Please re-check the form.

  • Profile Image

    Answered by becca718 on November 01, 2016 at 09:44 AM
    That works perfectly on every device except when I preview in mobile device
    or iPad. Thank you so much!! Is there any fix you can think of for mobile
    devices? The buttons sort of overlap one another...
    Sent with Mailtrack

    ...
  • Profile Image
    JotForm Support

    Answered by KadeJM on November 01, 2016 at 12:01 PM

    Thank you for letting us know that.

    I checked this on my iPhone and iPad and I was able to see some issues as well where the buttons were doubled up overlapping one another.

    To fix that we'll need some time to create a few additional tweaks to get it working better on mobile.

     

    Here's what I see on iOS: