Customizing Save and Continue Button [RESOLVED]

Get Help
,
1

Good morning (UK time), moving away from Legacy and would like to move the save and continue button to a line below the next and previous buttons. Would also like to remove a little icon / symbol on the save button. Tried the two suggestions within the page links below and neither work.

Wonder if I could please ask for some help?

2

I haven’t had a need for this but have you checked their developer docs for filters, as I’m pretty sure I’ve seen references in their to save and continue?

Hope this suggestion isn’t too unhelpful…

3

Thanks GravityDev for your suggestion. The 2 links on my original post are the only filter options I’ve found, which unfortunately seem to have no affect.

4

Hi Steve. You’ll need to use CSS for that. Please share a link to the page on your site where we can see the form. Thank you.

5

Thanks Chris.

Please find attached a link to a form with Legacy turned off.

6

Hi Steve. The styles I see there are not coming from Gravity Forms:

Not GF
Not GF1098Ă—440 3.97 KB

It’s coming from this CSS that was added inline somewhere:

/* This styles the previous button. */
.gform_wrapper .gform_previous_button.button, .gform_wrapper .gform_save_link.button {
    background-color: #e3e3e3;
    border-radius: 8px !important;
    color: white !important;
    border-color: #e3e3e3;
    font-size: 16px !important;
    font-family: system-ui, sans-serif;
    line-height: 10px;
    height: 50px;
	margin-bottom: 20px !important;
    margin-top:20px !important;
}

The !important makes those difficult, if not impossible, to override.

You can remove some or all of that, then apply one of those other solutions to make the button look the way you want and on a new line.

7

Thanks Chris for your help.

Looking to remove that little icon / symbol from save button and to have it located on a line below the next / previous buttons. If you could help that would be much appreciated.

8

Hi Steve. I do not see the Save and Continue button there today:

save
save1264Ă—626 8.56 KB

On page 1 or page 2.

9

Dear Chris, I briefly removed the save button, but its back now. Please could you let me know if the following 2 codes would work, including having the save button on the line below? If possible would also like to remove the icon / symbol on the save button.

/* This styles the previous button. */
.gform_wrapper .gform_previous_button {
background-color: #e3e3e3;
border-radius: 8px !important;
color: white !important;
border-color: #e3e3e3;
font-size: 16px !important;
}

.gform_wrapper .gform_page_footer a.gform_save_link {
display: block;
margin-left: 0;
margin-top: 15px;
}

10

Hi Steve. This CSS will do it:

button#gform_save_20_2_link {
  display: block;
  margin-left: 0!important;
}
button#gform_save_20_2_link svg {
 display: none;
}

The !important is necessary because the left margin is being added inline on the element. Here’s what is looks like with that applied:

buttons
buttons1306Ă—668 3.84 KB

11

Dear Chris, thanks very much for your time. One thing, when you go onto the second tab, so previous appears, the save button goes back to being inline and the save symbol reappears. I’ve cleared the browsing history and tried it on a couple of devices.

image
image1920Ă—1080 232 KB

12

Hi Steve. Sorry about that. I did no consider the other pages of the form. Try this instead:

#gform_wrapper_20 .gform_page_footer button.gform_save_link {
    display: block;
    margin-left: 0!important;
}
#gform_wrapper_20 .gform_page_footer button.gform_save_link svg {
    display: none;
}

That should apply to the Next button on all pages.

13

Excellent, very grateful for your help Chris. Much appreciated.

Assume if wish to apply to all my forms just remove the _20.

Thanks

14

To apply to all forms, you would need to change this:

#gform_wrapper_20
to
.gform_wrapper

Note that without that specific selector, you may need to add !important to some of the rules to ensure they are applied, like this:

.gform_wrapper .gform_page_footer button.gform_save_link {
    display: block!important;
    margin-left: 0!important;
}
.gform_wrapper .gform_page_footer button.gform_save_link svg {
    display: none!important;
}
15

Thank you Chris. Absolutely fab. Very grateful for the assistance.

1 Like