The buttons on the form do not look right

  • Profile Image
    KLiebs
    Asked on June 08, 2020 at 05:43 PM

    The next, back, and save buttons on each page using page break do not look right.  I have tried to adjust settings, remove, and add back the form element.  It does not look like this on other forms I have created, so I do not know how to fix this problem.  Thank you for your help!


  • Profile Image
    Jovanne_A
    Answered on June 08, 2020 at 06:13 PM

    Hi, thank you for reaching out to us.

    You can insert this custom CSS:

    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next {

        height: 50px;}


    .form-all .form-submit-button{

      padding: 0 18px !important;

      height: 50px;

      background: #1e62d0 !important;

      font-size: 20px;

      border: 1px solid #0d4aab !important;}




    15916544219.png



    Here is a guide on how to inject custom CSS codesHow-to-Inject-Custom-CSS-Codes,

    Let us know if you need further assistance.

  • Profile Image
    KLiebs
    Answered on June 08, 2020 at 06:34 PM

    I copied and pasted these lines of custom CSS codes and saved it, but it does not seem to have changed the look.


  • Profile Image
    Jovanne_A
    Answered on June 08, 2020 at 06:42 PM

    Hi, I visited your form and the codes are working in my end (see attached photo).

    159165612310.png


    Please note that these changes will only be visible to preview mode or in the publish form.

    Let us know if the issue still persists.

  • Profile Image
    KLiebs
    Answered on June 09, 2020 at 01:35 PM

    I am still not liking the way the buttons look on the last page for submit, print.  When I try to click on widget to edit, the edit feature is acting odd.  This has never happened on the other forms, so not sure what is glitching on this form

  • Profile Image
    BDAVID
    Answered on June 09, 2020 at 06:03 PM

    Hi, you are referring to this:

    1591740059this.png

    Please remove all the code, and inject this instead:

    .form-submit-button,.form-submit-reset,.form-submit-print {

        width: 250px;

        font-size: 20px !important;

    }

    .form-all .form-buttons-wrapper {

        display: flex;

    }

    .form-submit-button {

        padding: 0px 0 !important;

    }

    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next {

        height: auto;

    }

    .sacl-button.form-sacl-button {

        margin: 0 8px 0 0;

        padding: 9px 15px !important;

    }


    Result: https://form.jotform.com/201606940221949

    1591740165result.gif

  • Profile Image
    BDAVID
    Answered on June 09, 2020 at 06:08 PM

    I forgot this piece of code too:

    .form-submit-button{

     background: #1e62d0 !important;

      font-size: 20px;

      border: 1px solid #0d4aab !important;

    }

    If you need to clone my form, please follow this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    KLiebs
    Answered on June 10, 2020 at 06:23 PM

    so I used both sets of code and the buttons do not look like this and the save button is no longer there

  • Profile Image
    BDAVID
    Answered on June 10, 2020 at 07:48 PM

    Hi, the Save button does not show, because the "Continue Forms Later" feature is disabled:

    1591832324continuelater.png

    I have cloned your form in your account, and replaced the code of the clone version with the code of my form:

    1591832552clone.png

    This is how your clone version looks: https://form.jotform.com/201617528363152

    1591832831cloneform.gif

    Let us know if you need more help.

  • Profile Image
    KLiebs
    Answered on June 11, 2020 at 11:59 AM

    The cloned version looks a lot better.  Should I go with this copy and delete the other?  I only want to keep what I need in my account since I pay for only a certain number of forms.


    Thank You!

  • Profile Image
    BDAVID
    Answered on June 11, 2020 at 12:06 PM

    Hi, since you have not really used the original one, you can go with the clone version and delete or archive the other.

  • Profile Image
    KLiebs
    Answered on June 11, 2020 at 12:09 PM

    Great!  Thank you for your help!