need to code a button to act as a form submission button

First remove that redirect to page C. The form action should point to whatever page handles the form submit.

Assuming your form has the ID “gform_13” assigned to it, I believe you just need your <img> tag to look something like this:
<img src="button-image.jpg" onclick="jQuery('?#?gform_13?').submit();" />

You do need to ensure jQuery is loaded for this page. If it is not already loaded, you should use wp_enqueue_script() to cause it to load.

Alternately, use the javascript variant, jQuery is way overkill for this, IMO.
<img src="button-image.jpg" onclick="document.getElementById('gform_13').submit();" />

Thank you so much that worked like a charm. I went with the second option btw

hello, is there a way to change the mouse cursor when it is hovered over the button? currently with the above change it remains an arrow and not a hand with pointed finger

Yes! Add a style attribute to the <img> tag:
<img src="button-image.jpg" style="cursor: pointer;" onclick=...etc... />

You can specify many other mouse cursor styles besides pointer, see the list at W3 Schools.

Just like any other CSS property, there are other choices for where and how to apply the style, an external CSS stylesheet, an inline <style> block, or apply it via javascript or jQuery. What’s best depends on the specific need and your preferred coding style. I like to keep things organized and separated, so I would personally add the style to an external stylesheet (the one for my child theme). But since your need is just for the one image, a style attribute is perfectly acceptable.

Thank you I am a total noob at coding lol btw I am having a little problem with the following <img src=”button-image.jpg” onclick=”document.getElementById(‘gform_13’).submit();” /> what I am doing is in wordpress I edit the page in the “visual” tab then switch to the “Text” tab and add that line of code where the image was and it works great however, after I save the changes and leave the page editor and return to the page editor for that page the code is changed back to the image link only. is there a way to stop that from happening?

should I add it to my typography.css or a different file in the optimizepress theme?

We all started out noobs at some time, it’s never too late to start learning ??

The solution isn’t too simple I’m afraid. Content entered in the editor gets passed through several filters when the post is saved, one of which is the one responsible for only allowing certain attributes in HTML. I don’t remember it’s name off the top of my head, if that can be determined, you could add plugin or functions.php code to remove that filter.

Removal may not be the best solution though, the filter does provide an important layer of security by stopping malicious code injection. Unfortunately it also blocks desirable code ??

Another way around this is to create a custom page template where the template provides the button image code, and displays whatever other form content above that that you are able to enter in the editor. This does require the entry be a page post type and not a regular post. I suspect you are doing this anyway.

There is a plugin that allows you to define arbitrary PHP code as a shortcode, then you could just enter [my-button] or whatever in the editor and that shortcode will be replaced by the actual PHP output when the page loads. Unfortunately, that plugin is no longer supported, but it’ll probably work for now.

It’s not super difficult to directly define your own shortcode handler in your plugin or functions.php (of a child theme I hope) without the plugin, but there is a learning curve. You’ll probably struggle through creating your first shortcode, but then you will soon be easily creating others without much thought. This means you can just type [my-shortcode] or something in your editor and any amount of PHP will be executed when the page is loaded, the output replacing the shortcode entry.

There’s also ways to pass parameters in shortcodes so you have complete control over what the code does. All things being equal, I would recommend shortcodes as a solution, but there is that learning curve. If you’re willing (and not in a big hurry), I’m willing to help you out.

The custom template solution is easier to setup, so something to consider given your experience. The filter removal is the easiest once we figure out the correct filter, but I’m reluctant to offer that as a solution.

Let me know what has the most appeal and I’ll get you started in the right direction, though searching the Codex will get you started too. I’ll still be here if (when?) you get stuck.

I like the shortcode idea better its always best to spend the extra time learning upfront to make your life easier in the long run. I have already created a child theme (i think I did it right) by creating a folder called optimizepress-child in my themes folder then copied over style.css and created a functions.php file I went into themes and enabled the child and all seems to be working fine so far

so what is the next step.

I love people who are willing to learn ??

A good starting point is the Shortcode API. There’s a lot there, and if any of that doesn’t make sense, the External Resources near the bottom will hopefully make more sense. And I’m here for any specific questions.

In your case, it’s not nearly as bad as it looks. A lot of the content is related to passing parameters and the [shortcode]internal text[/shortcode] form which you needn’t worry about for now. You don’t really need to pass parameters either, but do take a look at this important feature at some time, it greatly increases the power of shortcodes.

For example, you could pass the element ID to submit as a parameter so you can reuse your shortcode on any form, like so: [button id="gform_13"]

For now, to get your form working, the shortcode script is not much more than the quick start “foobar” example. You would just return your <img> HTML instead of the example’s “foo and bar”. Of course this steps over the real power of shortcodes where any arbitrary PHP can be executed in order to compose the final output.

Speaking of output, the one thing that trips up more people in writing shortcode scripts is they try to echo out content to the browser from within the shortcode function. This is very wrong, resulting in grossly misplaced output. All output must be compiled into a single string that is returned by the shortcode function. The WP shortcode processor will do the actual echoing out of that string.

Well, that should give you a good start. Good luck (and have fun!).

thank you that just fried my brain trying to understand what you are talking about (way over my head) any way you can dumb it down for me? or show me what you mean by modifying the foobar example?

Sorry about that, it’s hard to judge people’s learning aptitude in this format. I try to challenge folks to work things out on their own, given the proper resources. I sometimes push too far.

Shortcodes are a great coding resource that is worth investigating further, but to simply output a static <img> tag with attributes that are not stripped out, all you need to do is this:

//use this shortcode: [button]
function foobar_func( $atts ){
	return '<img src="button-image.jpg" style="cursor: pointer;" onclick="document.getElementById(\'gform_13\').submit();" />';
}
add_shortcode( 'button', 'foobar_func' );

Of course you still need to tweak the returned tag with actual image path/name and actual form ID, but that’s it at its most basic. Also note that there are 3 levels of quotes, thus the inner single quotes must be escaped with \' . The shortcode will only work on forms where the image and form ID are identical.

You can make the shortcode more flexible by passing parameters that end up in $atts and adding code to insert those parameters where needed in the returned string. Perhaps that’s a project for a rainy day ??

ok cool thanks that makes more sense. thank you