Inject Custom CSS: Submit button not mobile responsive

Hello!

On the mobile version of my form, the submit button does not adapt to the width on mobile and exceeds the form fields. How can I get it so that the submit button is full width with the rest of the form fields?

https://form.jotform.com/252095701304045

Hi Jack,

Thanks for reaching out to Jotform Support. When I checked your form, I found that there's already existing CSS codes in the form. When I test the form on mobile devices, it does not have the same issue reported. See the screenshot for reference:

Could you try again? Make sure to test on mobile browser.

Let us know if you need any more help.

Hi Jack,

To ensure also that the submit button will be mobile responsive on different devices, we can inject custom CSS in the form. Let me show you how:

1. First, copy this code:

/* mobile responsive form #29645291*/

@media screen and (max-width: 480px) {

    .jf-form-buttons.submit-button {

        min-width: 100px !important;

        width: auto !important;

    }

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject Custom CSS box. That’s it. The code is automatically saved.

You can also check out my test form here. The screenshot below shows the result:

Let us know if you need any more help.

Hi! This code did not work -- please see below. The submit button is still stretching off screen.

Hi Jack,

When I checked your form, the button is already mobile-responsive. Check out the screencast below:

I have cleared your form cache as a precaution. Can you try to open the form on a different mobile device or mobile browser to see if the issue still replicates?

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

Hello,

I checked on both the preview of the form in Jotform and cleared the cache and checked again on my website and the submit button is still the same. Please advise.

Thanks!

Hi Jack,

I checked your form and noticed that some issues in your custom CSS are preventing the submit button from displaying full-width on mobile view. Let me show you how to fix it:

1. First, copy this code:

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

.form-all,

.form-all * {

    font-family : 'Work Sans', sans-serif !important;

}

.form-all {

    padding : 0 !important;

    margin : 0 auto !important;

    box-shadow : none !important;

}

.form-line,

.form-input,

.form-input-wide {

    width : 650px !important;

    max-width : 650px !important;

    padding : 0 !important;

    margin : 12px 0 !important;

box-sizing : border-box;

}

.form-textbox,

.form-textarea {

    border : none !important;

    border-bottom : 1px solid #000 !important;

    border-radius : 0 !important;

    padding : 2px 0 !important;

    background : transparent !important;

    box-shadow : none !important;

    outline : none !important;

    box-sizing : border-box;

}

.form-textbox:focus,

.form-textarea:focus {

    border-bottom : 1px solid #000 !important;

    box-shadow : none !important;

    outline : none !important;

}

.form-label {

    display : block !important;

    margin-bottom : 4px !important;

    font-weight : 500;

}

.form-submit-button {

    font-family : 'Work Sans', sans-serif !important;

    background-color : #B54828 !important;

  border : none !important;

    border-radius : 10px !important;

    padding : 24px 48px !important;

    font-weight : 600;

    margin : 0 !important;

    float : left !important;

    box-shadow : none !important;

}

.form-submit-button:hover {

    background-color : #9EAF8F !important;

}

.form-submit-clear {

    padding : 0 !important;

    margin : 0 !important;

}

.form-buttons-wrapper {

    border-top : 0;

}

::placeholder {

    /* Firefox, Chrome, Opera */ color : #000000 !important;

    font-size : 18px !important;

    opacity : 1;

    /* Firefox */;

}

:-ms-input-placeholder {

    /* Internet Explorer 10-11 */ color : #000000 !important;

    font-size : 18px !important;

}

::-ms-input-placeholder {

    /* Microsoft Edge */ color : #000000 !important;

    font-size : 18px !important;

}

    @media only screen and (max-width: 480px) {

        .form-submit-button {

            width: 120% !important;

            margin-left: 0 !important;

        }

                .form-all {

            border: 0 !important;

            overflow-x: hidden !important; /* Hides horizontal overflow */

        }

    }

2. In Form Builder, click on the Paint Roller icon located on the right side of the page.

3. In the Form Designer, go to the Styles tab, and replace the existing code with the copied one inside the Inject Custom CSS area.

That's it. Test your form, and you'll see that the submit button now appears full-width on mobile devices. Check out the screencast below for the result:

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

Hello!

Thank you for looking into this. This unfortunately did not solve the issue. The submit button still extends past the frame!

Hi Jack,

Can you try to clone this demo form I created? This is to see if the issue still replicates with the updated form. This guide will show you how to clone the form and make it your starting form.

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

Hello! The issue still persists!

Hi Jack,

You can replace the whole CSS code on your form with the code below:

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

.form-all,

.form-all * {

    font-family : 'Work Sans', sans-serif !important;

}

.form-all {

    padding : 0 !important;

    margin : 0 auto !important;

    box-shadow : none !important;

}

.form-line,

.form-input,

.form-input-wide {

    width : 650px !important;

    max-width : 650px !important;

    padding : 0 !important;

    margin : 12px 0 !important;

box-sizing : border-box;

}

.form-textbox,

.form-textarea {

    border : none !important;

    border-bottom : 1px solid #000 !important;

    border-radius : 0 !important;

    padding : 2px 0 !important;

    background : transparent !important;

    box-shadow : none !important;

    outline : none !important;

    box-sizing : border-box;

}

.form-textbox:focus,

.form-textarea:focus {

    border-bottom : 1px solid #000 !important;

    box-shadow : none !important;

    outline : none !important;

}

.form-label {

    display : block !important;

    margin-bottom : 4px !important;

    font-weight : 500;

}

.form-submit-button {

    font-family : 'Work Sans', sans-serif !important;

    background-color : #B54828 !important;

  border : none !important;

    border-radius : 10px !important;

    padding : 24px 48px !important;

    font-weight : 600;

    margin : 0 !important;

    float : left !important;

    box-shadow : none !important;

}

.form-submit-button:hover {

    background-color : #9EAF8F !important;

}

.form-submit-clear {

    padding : 0 !important;

    margin : 0 !important;

}

.form-buttons-wrapper {

    border-top : 0;

}

::placeholder {

    /* Firefox, Chrome, Opera */ color : #000000 !important;

    font-size : 18px !important;

    opacity : 1;

    /* Firefox */;

}

:-ms-input-placeholder {

    /* Internet Explorer 10-11 */ color : #000000 !important;

    font-size : 18px !important;

}

::-ms-input-placeholder {

    /* Microsoft Edge */ color : #000000 !important;

    font-size : 18px !important;

}

/* Adjust submit button on mobile - 29645291 */

@media only screen and (max-width: 480px) {

  .form-line, .form-input, .form-input-wide {

  width: 200px !important;

  max-width: 200px !important;

  }

}

You can clone and test my demo form here. Take a look at the screenshot below to see my results:

Give it a try and reach out again if you have any other questions.

Hello!

This worked, thank you!

However, now the form is not the full width we would like. Below is a screenshot of the form, and an image of the mockup.

Current form:

Mockup:

Hi Jack,

I've removed some of the codes and replaced them, so now your form fields will stretch to the full width, and the submit button will be fully visible on screens with 480px width or lower. On higher resolutions, it'll appear just like in the mockup you shared. Go ahead and replace your CSS code with the one below:

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');





.form-all,

.form-all * {

    font-family: 'Work Sans', sans-serif !important;

}





.form-all {

    width: 100% !important;

    padding: 0 !important;

    margin: 0 auto !important;

    box-shadow: none !important;

}





.form-line,

.form-input,

.form-input-wide {

    width: 100% !important;

    padding: 0 !important;

    margin: 12px 0 !important;

    box-sizing: border-box;

}





.form-textbox,

.form-textarea {

    width: 100% !important;

    border: none !important;

    border-bottom: 1px solid #000 !important;

    border-radius: 0 !important;

    padding: 2px 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    outline: none !important;

    box-sizing: border-box;

}





.form-textbox:focus,

.form-textarea:focus {

    border-bottom: 1px solid #000 !important;

    box-shadow: none !important;

    outline: none !important;

}





.form-label {

    display: block !important;

    margin-bottom: 4px !important;

    font-weight: 500;

}





.form-submit-button {

    font-family: 'Work Sans', sans-serif !important;

    background-color: #B54828 !important;

    border: none !important;

    border-radius: 10px !important;

    font-weight: 600;

    box-shadow: none !important;

}





.form-submit-button:hover {

    background-color: #9EAF8F !important;

}





.form-submit-clear {

    padding: 0 !important;

    margin: 0 !important;

}





.form-buttons-wrapper {

    border-top: 0;

}





/* Placeholder styles */

::placeholder {

    color: #000000 !important;

    font-size: 18px !important;

    opacity: 1;

}





:-ms-input-placeholder {

    color: #000000 !important;

    font-size: 18px !important;

}





::-ms-input-placeholder {

    color: #000000 !important;

    font-size: 18px !important;

}





/* Mobile adjustments */

@media screen and (max-width: 480px) {

    .form-submit-button {

        width: 100% !important;

    }

}

It should look like the example below:

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

This worked! Thank you!