Contact form 7, Style the submit button

You need to edit the submit.php in the ‘modules’ folder.

Edit this line:

$html = '<input type="submit" value="' . esc_attr( $value ) . '"' . $atts . ' />';

Thanks alot ??

I did it other way.
this is how I add a class:

<p align="left">[submit class:buttons_mainpage " "]</p>

and then in the theme class I add a new class buttons_mainpage:

.buttons_mainpage {
	background-image: url("images/but_submit.png");
	background-repeat: no-repeat;
	margin: 0px 190px 0px 0px;
	padding: 0px;
	float: right;
	height: 26px;
	width: 69px;
	border: 0 none;
	cursor: pointer;
}

Something like that ??

@sbatuev: gracias! ??

<p align=”left”>[submit class:buttons_mainpage ” “]</p>

Which file and where (row) should i add this class?

Thank you.

@jarmusch go to the plugin’s settings page and add that to the “form” text field, then add the styles in your CSS file

sorry if this is too simple a question, @sbatuev, but in what css file is the new button style to be put? I’ve tried:

<root>/wp-content/themse/arras-theme/css/styles/default.css
<root>/wp-content/themse/arras-theme/css/mycss.css (the stylesheet particular to the site)

So far, no dice. & just to be thorough, I have referenced the new style in the settings page for the form to:

<p>[submit class:SignUpForEmailSubmitButton ” “]</p>

– O8

@orionculver

In your theme’s style.css should be fine.

@sbatuev — Thanks so much for the guidance you provided to the inital poster. I was searching for a solution to use submit images instead of text with Contact Form 7 and this did the trick ?? Thanks!

I wouldn’t do the css route. a lot of time css called images won’t load correctly on a page, particularly if it’s a graphic intensive page.

This should be easier anyways.

instead of putting the standard submit button in your form when you edit the form, remove it and put the code for a submit button image.

<input type=”image” name=”whatever” src=”yourimageurl.jpg” width=”55″ height=”22″>

This will load without issues and save the step of editing the stylesheet

I wouldn’t do the css route. a lot of time css called images won’t load correctly on a page, particularly if it’s a graphic intensive page.

Uh? Since when?

This will load without issues and save the step of editing the stylesheet

But will mean that you can’t upgrade the plugin without over-writing your changes.

Uh? Since when?

since at least recently. Not sure why but for some people (in i.e. and safari most commonly) when they loaded the page for the first time the image in the css wouldn’t show the button image it would just show the standard grey submit button but shrunken and without any label since you remove it to get the css image to work. Refreshing would make it work afterwards.

But will mean that you can’t upgrade the plugin without over-writing your changes.

I don’t think you understood where to put it… you don’t change the plugin code at all. it’s less obtrusive than changing the css style of the button… when you edit your contact form instead of [submit class=”whatever”] just put
<input type=”image” name=”whatever” src=”yourimageurl.jpg” width=”55″ height=”22″>
it’s not overwritten on upgrades and there won’t be any problems.

the mess-up with css might not be a huge percentage of people but the site I was running with it saw thousands a day so there were quite a few upset people. I saw it happen a few times on computer too so it does happen.