Custom "Submit Form" button on Pro Form?

Ok, I could not find the solution on the forum, so posting this.

I have an issue changing “Submit form” button on Pro form. It looks like S2 overwrite the form code, regardless what I have add to it. (*the style).
the only way to make it look like I want (an image) is to remove Form ID. Which is not good, I think. Is there a way to make S2 submit for to be an image?

See:

if I use this code in my template, the custom style simply disappears :

<input  style="background-image: url('http://www.photigy.com/wp-content/uploads/2013/05/submit-order.png'); background-repeat: no-repeat;	background-color: transparent;	height:106px; width:419px; border:none; text-indent:-999em;"  type="submit" id="s2member-pro-paypal-sp-checkout-submit" value="" tabindex="500" />

This one works (without id=”s2member-pro-paypal-sp-checkout-submit”), but it may not be a good solution, something is not working right after this:-)

<input  style="background-image: url('http://www.photigy.com/wp-content/uploads/2013/05/submit-order.png'); background-repeat: no-repeat;	background-color: transparent;	height:106px; width:419px; border:none; text-indent:-999em;"  type="submit" value="" tabindex="500" />

Any ideas how i can have a custom image on submit form and preserve functionality of S2?

This is where I have the button:

http://www.photigy.com/advertising-studio-photography-online-workshop-perfume-liquid-splash/

Thank you!

I just tried it with Firebug and could change the button to the image adding the styles to the input tag. I added this for the test:

style="background-image: url('http://www.photigy.com/wp-content/uploads/2013/05/submit-order.png'); height: 106px; width: 419px;"

I added it at the end, not the beginning of the input tag, though, not sure if that’d make a difference. You could try moving your style code to the end and test if it helps:

<input type="submit" id="s2member-pro-paypal-sp-checkout-submit" value="<?php echo esc_attr (_x ("Submit Form", "s2member-front", "s2member")); ?>" tabindex="500" style="background-image: url('http://www.photigy.com/wp-content/uploads/2013/05/submit-order.png'); background-repeat: no-repeat;	background-color: transparent; height: 106px; width: 419px; border: none; text-indent: -999em;" />

Cristian,
Yes, the style will work when injected in firebug. My issue that it gets completelly wiped out by plugin when I add it in the template. I am sure creator of the plugin knows about this feature, hope to see if there is a way to get style to stay in the button.
See my initial post: style stays where I put it only if I remove Id of the button. But this cause issues, it does not work without Id :(

My issue that it gets completelly wiped out by plugin when I add it in the template.

I see. How are you customizing the template file? Are you editing the original in the s2member plugin or a copy of it in your theme’s directory (not a child theme)? See: http://www.s2member.com/kb/pro-forms/#customizing-pro-forms

I was trying to modify both ways.. Did not make any difference. Currently I have paypal-sp-checkout-form.php in my theme folder.
So, right not in the php code I have:

<div id="s2member-pro-paypal-sp-checkout-form-submit-div" class="s2member-pro-paypal-form-div s2member-pro-paypal-sp-checkout-form-div s2member-pro-paypal-form-submit-div s2member-pro-paypal-sp-checkout-form-submit-div">
	%%hidden_inputs%% <!-- Auto-filled by the s2Member software. Do NOT remove this under any circumstance. -->
	<input   type="submit" id="s2member-pro-paypal-sp-checkout-submit" class="my_checkout_button s2member-pro-paypal-submit s2member-pro-paypal-sp-checkout-submit" value="<?php echo esc_attr (_x ("Submit Form", "s2member-front", "s2member")); ?>" tabindex="500" />
</div>

where my_checkout_button is:

.my_checkout_button{
background-image: url(‘http://www.photigy.com/wp-content/uploads/2013/05/submit-order-short.png’);
background-repeat: no-repeat;
background-color: transparent;
height:106px; width:320px;
border:none;
text-indent:-999em;
cursor:pointer;
}

and this is what I am getting in html when page is loaded:

<input type="submit" id="s2member-pro-paypal-sp-checkout-submit" 
class="s2member-pro-paypal-submit s2member-pro-paypal-sp-checkout-submit"
 value="Submit Form" tabindex="500">

Whatever I put OUTSIDE “<input" tag, appeas in html, but anything inside gets overwritten soemhow to a default values. It looks like some code finds element with id "s2member-pro-paypal-sp-checkout-submit" and build it during runtime, without looking what is in the template.. Not sure if this right, but it looks like it si doing this..

Any ideas what si going on? is it normal behavior? I use Atahualpa 3.7.3 if it makes any difference..

Well, my guess would be that either your custom template is not being used or you’re getting a cached copy of the page so your change isn’t shown. The template may not be used because it’s in the wrong directory, or it’s the wrong template for the pro-form you’re using. Have you refreshed the cache?

Cristian,
it used my template. If I add a word “test” just before the button, it shows on page.
Can you confirm that other S2 users has modified this button with custom CSS in template?

Or show m n example of such customization?
Btw, did you try to customize the button same way I am trying to do?

Wow, many questions, but I really start feling like nobody did what I am trying to do here… Please give e ome support:)

You’re right. I just tried the custom template and the changes I made to that tag weren’t reflected on the form, for some reason. I’ll ask Jason about it.

What did work was using the tag’s ID as the CSS selector to style it from the theme’s style.css:

[hilite pre_code]
#s2member-pro-paypal-sp-checkout-submit {
background-image: url('http://www.photigy.com/wp-content/uploads/2013/05/submit-order-short.png');
background-repeat: no-repeat;
background-color: transparent;
height: 106px;
width: 320px;
border: none;
text-indent: -999em;
cursor: pointer;
}
[/hilite]

You can see it here: http://cristian.websharks-inc.net/general-tests/

Here’s what Jason replied:

A Pro Form changes its button dynamically, to either a PayPal Button or a regular Submit Button via JavaScript. So while it’s possible to edit the button HTML in a Pro Form Template, it get’s overwritten via JavaScript routines.

The best you can do is style the CSS for the button to your liking; and/or translate the the default text that s2Member uses.

This is not the case with Authorize.Net Pro Forms. You can change the button HTML in the template file and there is no JavaScript getting in the way in that case.