Adjusting submit button on customized widget in a website

I have this form that I customized that looks good on desktop, but on mobile, the submit button is not visible. How can we edit this so that the width is adjusted and the submit button is visible?

https://form.jotform.com/242005784718055

This is the form embedded on the website and how it looks -

https://arcventuresstg.wpenginepowered.com/

This is how it looks on mobile, the submit button is not visible.

Hi digitalmulesforms,

Thanks for reaching out to Jotform support. I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Reach out again if you need any other help.

Hi digitalmulesforms,

The submit button is not visible is because the CSS code you used is fixed and not responsive. We can adjust the style of the element by modifying the CSS code. Let me show you how:

1. First, copy the code below:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');



.form-all {

    box-shadow : none !important;

    font-family : Montserrat, sans-serif;

    font-weight : 500 !important;

    padding : 0px;

    margin : 0px;

}

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : left;

    width : 100%;

}

.form-buttons-wrapper {

    border-top : 0;

}

::placeholder {

    /* Firefox, Chrome, Opera */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

    opacity : 1;

    /* Firefox */;

}

:-ms-input-placeholder {

    /* Internet Explorer 10-11 */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

}

.form-all {

    box-shadow : none !important;

    font-family : Montserrat, sans-serif;

    font-weight : 500 !important;

}

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : left;

    width : 100%;

}

::placeholder {

    /* Firefox, Chrome, Opera */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

    opacity : 1;

    /* Firefox */;

}

:-ms-input-placeholder {

    /* Internet Explorer 10-11 */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

}

::-ms-input-placeholder {

    /* Microsoft Edge */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

}

[data-css-selector="id_3"] input.form-textbox {

    padding : 34px 22px;

}

/*Change the Submit button - 17081051*/

button#input_4 {

    margin-top : -115px !important;

    margin-left : 92%;

    color : transparent !important;

}

.form-submit-button {

    background : rgba(233, 235, 235, 0.70);

    color : rgba(233, 235, 235, 0.70);

    border : none !important;

    border-radius : 100px;

    text-shadow : none;

    width : 50px;

}

.submit-button {

    background : none !important;

    min-width : 70px !important;

}

.form-submit-button form-submit-button-img submit-button jf-form-buttons jsTest-submitField img {





}

.form-textbox {

    border-radius : 1000px !important;

}

/* CSS for mobile devices */

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){





button#input_4 {

    margin-left : 55%;

}

}





@media screen and (min-width:481px) and (max-width:770px){

  button#input_4 {

    margin-left : 85%;

}

}

2. In the Form Builder, select the paint roller icon in the upper-right corner.

3. In the Form Designer panel on the right, go to Styles at the top.

4. Remove all the previous code and paste the code you copy earlier under Inject Custom CSS. All changes are saved automatically.

Remember to view your form in Preview or Live mode to check how form fillers see your form. You can find custom CSS code examples here. For applying CSS codes to widgets, see How to Inject CSS Codes Into Widgets.

Check out the screencast below to see my result:

Note, I adjusted the form color to make the element visible.

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

Hi! Thank you so much for your help! I see the button now but it's slightly off in the preview when I injected the CSS code and also in the embedded shortcode on the site. I made sure to delete all of the previous code and pasted the new one you provided. Can you assist with this?

Hi digitalmulesforms,

I cloned your form and tested it to see if I could replicate the issue, and I ran into the same issue. When I looked at your form, I saw that I did not consider the fixed padding of the submit button. You can try to use the CSS code below to fix your issue. See my previous reply for a guide on how to inject CSS code into your form.

Copy CSS code below:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

.form-all {

    box-shadow : none !important;

    font-family : Montserrat, sans-serif;

    font-weight : 500 !important;

    padding : 0px;

    margin : 0px;

}

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : left;

    width : 100% !important;

}

.form-buttons-wrapper {

    border-top : 0;

}

::placeholder {

    /* Firefox, Chrome, Opera */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

    opacity : 1;

    /* Firefox */;

}

:-ms-input-placeholder {

    /* Internet Explorer 10-11 */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

}

.form-all {

    box-shadow : none !important;

    font-family : Montserrat, sans-serif;

    font-weight : 500 !important;

}

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : left;

    width : 100%;

}

::placeholder {

    /* Firefox, Chrome, Opera */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

    opacity : 1;

    /* Firefox */;

}

:-ms-input-placeholder {

    /* Internet Explorer 10-11 */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

}

::-ms-input-placeholder {

    /* Microsoft Edge */ color : rgba(233, 235, 235, 0.7) !important;

    font-size : 18px !important;

}

[data-css-selector="id_3"] input.form-textbox {

    padding : 34px 22px;

}

/*Change the Submit button - 17081051*/

button#input_4 {

    margin-top : -115px !important;

    margin-left : 92%;

    color : transparent !important;

}

.form-submit-button {

    background : rgba(233, 235, 235, 0.70);

    color : rgba(233, 235, 235, 0.70);

    border : none !important;

    border-radius : 100px;

    text-shadow : none;

    width : 50px;

}

.submit-button {

    background : none !important;

    min-width : 70px !important;

}

.form-submit-button form-submit-button-img submit-button jf-form-buttons jsTest-submitField img {

}

.form-textbox {

    border-radius : 1000px !important;

}

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

.form-buttons-wrapper, .form-pagebreak {

     padding: 0px 0px;

    margin: 0;

}

}

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

.form-buttons-wrapper, .form-pagebreak {

     padding: 30px 52px;

    margin: 0;

}

}

[data-css-selector="id_3"] {

    width : 100%;

}

Check out the screencast below to see my result:

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

This worked perfectly! Thanks so much for your help!