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.

Styling the submit button

  1. I want to use my theme styling for the button in the form, the problem I'm facing is that in my theme CSS, for the image to appear correctly, I have to include the button text within <span>submit</span> for it to display correctly. Otherwise, the button's right border is chopped off.

    This is how my CSS looks like for the button styling in the theme:

    .button { color:#5c5c5c; text-decoration:none; text-transform:uppercase; font-weight:700; display:block; background:url(../img/bg_button.png) no-repeat 0 0; height:75px; width:290px }

    I need one of two possible solutions:

    1. How to include the <span> tag into the submit button text

    OR

    2. How to get the CSS to display properly without the need for the <span> element.

    Thx in advance!

    Posted 9 years ago on Tuesday July 13, 2010 | Permalink
  2. The submit button uses the "input" type rather than the "button" element that you need to pull of the "sliding doors" technique you're talking about.

    You can use change the default button using a built in filter. Just add the following to your theme's functions.php file.

    // filter the Gravity Forms button type
    add_filter("gform_submit_button", "form_submit_button", 10, 2);
    function form_submit_button($button, $form){
        return "<button class='button' id='gform_submit_button_{$form["id"]}'><span>Submit</span></button>";
    }

    This will change the button for every form. If you only want it to apply to a specific form, you can do that this way (just remember to replace the "_1" with the id of the form you want to change)

    // filter the Gravity Forms button type for a specific form
    add_filter("gform_submit_button_1", "form_submit_button");
    function form_submit_button($button){
        return "<button class='button' id='gform_submit_button_1'><span>Submit</span></button>";
    }

    source screenshot

    That should get you going. Otherwise, you'll simply have to style the input with a button background that has both ends.

    You can always use an image button for each form which can be defined in the form settings.

    screenshot

    Posted 9 years ago on Tuesday July 13, 2010 | Permalink
  3. Thx for the quick response, that got the button to display, but there were alignment issues... so I just took a screenshot of the button (how it's supposed to look) and created an image out of it.

    Posted 9 years ago on Wednesday July 14, 2010 | Permalink
  4. That's one way to do it. Rock on.

    Posted 9 years ago on Wednesday July 14, 2010 | Permalink
  5. studioleland
    Member

    This is perfect. Thank you for code example and complete response Kevin.

    Posted 8 years ago on Thursday February 17, 2011 | Permalink
  6. To preserve the text value from the form button, you can use the following:

    // filter the Gravity Forms button type
    add_filter("gform_submit_button", "form_submit_button", 10, 2);
    function form_submit_button($button, $form){
    	$xml = new SimpleXMLElement($button);
        return "<button  class='submitBtn' id='gform_submit_button_{$form["id"]}'><span>{$xml['value']}</span></button>";
    }
    Posted 8 years ago on Thursday May 12, 2011 | Permalink
  7. Just an update. For IE 7 or less the button needs 'type="Submit"' to enable the form to submit; e.g:

    // filter the Gravity Forms button type
    add_filter("gform_submit_button", "form_submit_button", 10, 2);
    function form_submit_button($button, $form){
    	$xml = new SimpleXMLElement($button);
        return "<button type='Submit' class='submitBtn' id='gform_submit_button_{$form["id"]}'><span>{$xml['value']}</span></button>";
    }
    Posted 8 years ago on Friday May 27, 2011 | Permalink
  8. Thanks phuketnet -- realized only now that some of our clients' forms were not working in IE7 and below. Added the type='submit' attribute to buttons and it's all good now. Thanks again.

    Posted 7 years ago on Wednesday September 14, 2011 | Permalink
  9. Happy this solution worked for you.

    Posted 7 years ago on Wednesday September 14, 2011 | Permalink

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