How to make the submit button full width & how to decrease padding between questions

Get Help
,
1

I am having a few styling issues with my form:

  1. How to reduce the padding between the last checklist item and the other text box
  2. How to make the submit button full width.

Any help would be much appreciated :slight_smile:

Here is a link to the form I am referring to:
https://pacificmotorgroup.co.nz/service-reminder-unsubscribe/

2

In order to have the submit button be full width, you can select it from within the form editor and select Field Settings → Appearance → Submit Button Width // Fill Container.

The spacing looks to be introduced by theme styles. You can override them for this form using the following:

#gform_fields_37 fieldset {
    margin-bottom: 0;
}
3

Hi Joshua, thank you for proving that info I have added that CSS but it doesn’t appear to have changed the button? I have cleared my cache also.

4

I don’t see the CSS rule being rendered anywhere on the page. Double check the way in which it is being included. Reference Where to Put Your Custom CSS.

5

I think I have the CSS in the right place now and can see that it has moved up. Any advice on how to get the submit button left aligned?

6

Looks like there is a “margin-left:20%” CSS style on the div surrounding your button (see screenshot). If you remove that, the button shifts to the left. Not sure where it’s set though.

image
image1246Ă—844 129 KB

7

Yes I found where this is but if I remove it, it affects some of the other forms on our website ie: https://pacificmotorgroup.co.nz/enquiries/request-a-test-drive/ & Book a Service - Pacific Motor Group
If I remove the 20% then the submit button on these pages looks odd as it doesn’t line up with the field input boxes above. Is there a way to only apply the 20% margin to these particular forms?

8

Yes, you can apply CSS to specific forms. You can use the FORMID selector to target a specific form. Something like the following where #gform_X is the ID of your form.

#gform_X .gform_footer {
margin-left: 0;
}
9

Thank you, that has fixed all the button issues! Not sure how/why one of the changes has impacted the checkbox at the bottom of the form on this page:
https://pacificmotorgroup.co.nz/trade-in/

Any ideas on how to move the checkbox question over so it better aligns with the content above?

10

Glad to help!

The checkbox issue seems unrelated to the button issue. Looking at the code (see screenshot), the checkbox label text is missing and it has different CSS classes than other field labels. If you remove the screen-reader-text class which has “position: absolute;”, the checkbox aligns correctly.

image
image612Ă—766 82 KB

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.