Placement of "Submit" button

  • Profile Image
    Michael Benson 
    Asked on October 31, 2020 at 12:19 PM

    I have a multi-page survey. I'd like to enable the user to Submit the survey from anywhere (any page). Is it possible to include a "Submit" button on the same field area as the "Next and Save" area? Below is snap shot of what the system is making me do now and what I'd like to do.. ????

    1604161164_5f9d8e8cbaa06_

  • Profile Image
    Ariel_P
    Answered on October 31, 2020 at 02:47 PM

    Hi,

    Thank you for reaching out.

    I'm currently looking at your form, I'll update you on this same thread as soon as I have some news.

  • Profile Image
    Ariel_P
    Answered on October 31, 2020 at 03:34 PM

    Thank you for waiting.

    To enable your users to submit the survey from any page, simply add a Submit button on every page.

    16041725722020-11-01 03_25_37.jpg

    For the Submit button's alignment, you can use the following custom CSS code:

    @media only screen and (min-width: 668px) {
        li[data-type="control_button"] {
        width: auto !important;
        padding: 0;
        margin:0;
        margin-left: -37.66px; /*<- adjust the Submit button's alignment here*/
        position: absolute;
        bottom: 24px;
        left: 50%;
        }
        li[data-type="control_button"] .form-buttons-wrapper {
        margin: 0 !important;
        }
        .form-button-error {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: -56px;
        background: #fff;
        padding: 20px 0 !important;
        }
    }
    li[data-type="control_button"] .form-submit-button {
        display: none;
    }
    li[data-type="control_button"] .submit-button {
        display: block !important;
    }

    Once applied, it should look something like so.

    16041726862020-11-01 03_31_07.jpg

    Here's a demo form with the setup above applied. Feel free to clone the form and use it as you please: https://form.jotform.com/203045344321947.

    Give it a try and let us know how it goes.

    Related Guide: How to Inject Custom CSS Codes.