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

    Submit button not centred

    Asked by stringtheorist on October 16, 2014 at 11:37 AM

    I have been unable to get the Submit button to remain centered reactively as window is resized. It seems stuck in one position. I have tried editing the CSS to no avail.

    Please advise.

    Page URL:
    http://www.jotform.com/form/13612751313

    submit button submit CSS CSS centered submit layout
  • Profile Image
    JotForm Support

    Answered by david on October 16, 2014 at 01:33 PM

    Hi,

    I made several changes to your form and its CSS.  It appears that the overall width of 900px compared to the widths being forced on the fields, caused the form to be stretched in certain places.  This in combination with your forced positioning of your submit button was causing the button to move everywhere except the center.  I removed the position attributes of the submit button and constrained the width of the total form in order to make the fields like up and allow for the submit button to center.  This is the form I came up with:

    http://form.jotformpro.com/form/42885095341965?

    You can clone this form by following the steps in this guide:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    If there is still anything you do not like about it, let us know and we will be happy to make any changes you would like.

  • Profile Image

    Answered by stringtheorist on October 16, 2014 at 01:38 PM

    Fantastic. Many thanks! :)

  • Profile Image

    Answered by stringtheorist on October 16, 2014 at 01:46 PM

    Hmmm. Something's still not right because when I preview your form in the editor the button is still pushed over to the right, and doesn't realign with a page resize :/

  • Profile Image
    JotForm Support

    Answered by david on October 16, 2014 at 02:30 PM

    This is how the submit button looks in all browsers on the live version for me:

    The position is fixed though so when the form is made smaller within the page the button does stay in the middle.  Are you seeing different results or is this not what you were looking for?  Let us know and we will be happy to have another look.

  • Profile Image

    Answered by stringtheorist on October 16, 2014 at 02:55 PM

    It's not quite working for me. This is what preview looks like:
    http://www.jotformeu.com/form/42885325372359

    Here is how it looks on my webpage:
    http://www.huntingdonguitarteacher.co.uk/contact.html

    I am seeing text spilling out to the right, and an oversized button that isn't centered.

  • Profile Image
    JotForm Support

    Answered by david on October 16, 2014 at 04:06 PM

    I made some changes directly to the CSS.  When you opened the form in the form designer again, the previous CSS was applied again.  Clicking on the submit button in the form designer should allow you to customize it to taste:

    Also under form layout, change it to 550 from 500.  This will allow for enough space for the text:

    These two changes as well as changing the text size in the form designer should allow you to get the form looking the way you would like.

    Let us know if there are any more changes you would like to make and we will be happy to assist you.

  • Profile Image

    Answered by stringtheorist on October 16, 2014 at 04:45 PM

    Still isn't working. This is what it looks like now (using your suggested settings):
    http://www.huntingdonguitarteacher.co.uk/contact.html

    The button is too small, still isn't centered. And there is still text overflowing the fields in the form.

  • Profile Image
    JotForm Support

    Answered by KadeJM on October 16, 2014 at 06:06 PM

    To center your submit button in the middle of your text below the whole of your form you need to use the following code:

    .form-submit-button {

        margin-right : 150px;

    }

    As for the text labels overflowing beyond the inputs that is happening a combination of the width of your form and the existing specified sizing therefore it is conflicting. To fix it you will have to adjust it some more so that it removes the overflow. If I can find the fix for this part then i'll update you.

  • Profile Image

    Answered by stringtheorist on October 16, 2014 at 06:11 PM

    Thanks. I just tried that fix for the button, but as you can see following the above links, it still isn't central. Also, the label font size now jumps up hugely when viewed on my phone.

  • Profile Image

    Answered by Ben on October 16, 2014 at 06:19 PM

    Hi,

    Can you please inject this CSS into your jotform?

    div#cid_2.form-input-wide > div.form-buttons-wrapper {
        width: 100%;
    }
    div.form-buttons-wrapper button.form-submit-button.form-submit-button-simple_orange {
        font-size: 18px;
        line-height: 10px;
        margin-right: 0;
        width: 200px;
    }

    You can see how the submit button would look after you do here: http://form.jotformpro.com/form/42886897819986

    Do let us know if this is what you wanted to achieve.

    Best Regards,
    Ben

  • Profile Image

    Answered by stringtheorist on October 16, 2014 at 06:22 PM

    Thanks Ben! That works perfectly now. :)

  • Profile Image

    Answered by Ben on October 16, 2014 at 06:28 PM

    Hi,

    You are welcome I am glad to hear that.

    Do let us know if you have any further questions or issues and we will be glad to assist you with them.

    Best Regards,
    Ben

  • Profile Image

    Answered by stringtheorist on October 17, 2014 at 11:13 AM

    Cheers Ben.

    I am still curious as to where all the white space is coming from above and below the form as it appears on my webpage. Could you take a look please?
    http://www.huntingdonguitarteacher.co.uk/contact.html

    Also, what would be the best way to shift all the form content to the centre of the blue box at full display view (still aligned left), but have it move to the left as the page is resized?
  • Profile Image

    Answered by Ben on October 17, 2014 at 11:39 AM

    Hi,

    I do see what you mean and it is easy to fix, but I have moved the issue to a new thread so that we can set it up properly for you. You can find the thread here: http://www.jotform.com/answers/445072

    Also, I have moved your other question to another thread as we might need several attempts to have it working just the way you would like it to be :)

    The other thread is here: http://www.jotform.com/answers/445077

    Best Regards,
    Ben

  • Profile Image

    Answered by stringtheorist on October 17, 2014 at 11:40 AM

    Thanks mate. :)

  • Profile Image

    Answered by Ben on October 17, 2014 at 11:41 AM

    Hi,

    No problem :) We want to make sure each issue gets the full attention :)

    Best Regards,
    Ben