PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Changing submit button style

  1. How can I change this so that it still pulls in the text that was typed in for the submit button on the form setttings instead of being stuck with "Submit":

    add_filter("gform_submit_button", "form_submit_button", 10, 2);
    function form_submit_button($button, $form){
    return "<button class='btn btn-warning btn-large' id='gform_submit_button_{$form["id"]}'><div class='center'>Submit</div></button>";
    }
    Posted 9 years ago on Wednesday October 17, 2012 | Permalink
  2. If you're using the filter, then that overrides the form settings. You would need to change the button text directly in the filter/markup.

    add_filter("gform_submit_button", "form_submit_button", 10, 2);
    function form_submit_button($button, $form){
    return "<button class='btn btn-warning btn-large' id='gform_submit_button_{$form["id"]}'><div class='center'>YOUR BUTTON TEXT HERE</div></button>";
    }
    Posted 9 years ago on Wednesday October 17, 2012 | Permalink
  3. Is it not possible to put something in like this to get it to pull the text in?

    gform_submit_button_{$form["BUTTON TEXT FIELD"]}

    Alternatively is there a better way to simply change the style of the button and get it centered in the form?

    Thank you

    Posted 9 years ago on Friday October 19, 2012 | Permalink
  4. Do you need an actual "button" element for some reason? If not, you can leave that out all together and use the default "submit" type input and the verbiage can be changed directly from the form settings.

    Also, sure, centering the button or submit element is just a matter of applying the proper CSS rules. If you would like to post a URL to your some, someone here can take a look and help you with a proper CSS snippet to get it positioned correctly.

    Posted 9 years ago on Friday October 19, 2012 | Permalink
  5. That is great, thank you. Here is an example: http://www.ccctrain.com/medical-assistant/ I'm using the pagelines framework, and they've got some classes defined for buttons that I'd like to carry through to my forms and then also get them centered in the elements in which they appear.

    Posted 9 years ago on Saturday October 20, 2012 | Permalink
  6. Just looked at your form and it appears you have the button styled and centered?

    screenshot: http://bit.ly/WymPuo

    Did you still need some help or have you sorted it all out?

    Posted 9 years ago on Saturday October 20, 2012 | Permalink
  7. Is it possible to assign a different class to the button. The styling already exists in a class with in the theme.

    Posted 9 years ago on Wednesday October 24, 2012 | Permalink
  8. Well, you can use the filter mentioned above to completely re-write the button markup and assign whatever classes you want.

    http://www.gravityhelp.com/documentation/page/Gform_submit_button

    Other than that, you can use more specific CSS inheritance to override any existing class definitions and to add new styling.

    Posted 9 years ago on Wednesday October 24, 2012 | Permalink
  9. I have a similar question to the last one Caleb44 posted. Is it possible to assign a different class name to the submit button from the form editor? It seems that custom class names can be added to every element of the form except for the submit button.

    Posted 9 years ago on Monday October 29, 2012 | Permalink
  10. You can apply a unique class name to the form itself in the form settings. From there, you can use simple CSS inheritance to target the submit button. Here's a quick example.. I added the class name "someform" in the main form settings

    [css]
    body .gform_wrapper.someform_wrapper .gform_footer input.gform_button {
    	font-size:1.6em;
    	color: blue
    }

    screenshot: http://bit.ly/Sp7tWK

    Also, if you inspect the markup, you'll see that the submit button has a unique ID besides the class that you can target for CSS manipulation. Either way should work just fine for you.

    Posted 9 years ago on Monday October 29, 2012 | Permalink
  11. Thanks, I used your solution.

    Posted 9 years ago on Tuesday October 30, 2012 | Permalink

This topic has been resolved and has been closed to new replies.