Styling the submit button « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Rami Taher
Member

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 13 years ago on Tuesday July 13, 2010 | Permalink
Kevin Flahaut
Administrator
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 13 years ago on Tuesday July 13, 2010 | Permalink
Rami Taher
Member

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 13 years ago on Wednesday July 14, 2010 | Permalink
Kevin Flahaut
Administrator

That's one way to do it. Rock on.

Posted 13 years ago on Wednesday July 14, 2010 | Permalink
studioleland
Member

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

Posted 13 years ago on Thursday February 17, 2011 | Permalink

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 12 years ago on Thursday May 12, 2011 | Permalink

phuketnet
Member

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 12 years ago on Friday May 27, 2011 | Permalink

uxllc
Member

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 12 years ago on Wednesday September 14, 2011 | Permalink
Chris Hajer
Key Master

Happy this solution worked for you.

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

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