Why Add Image To Contact Form 7 Submit Button?
Adding a decorative image to your submit button, like an arrow, looks really nice and professional. It also provides an opportunity for a nice hover interaction where you can slide the arrow a few pixels to the right on hover using a transition.
It just looks nice.
But how do you do it with Contact Form 7?
Well you can’t, kind of.
Add HTML Instead Of Input Tag
The trick here is just to use plain HTML. Instead of using a tag or shortcode for your submit button just use a regular <button></button> tag with your text and image in between.
Here’s an example:
<button type="submit"><span>Submit</span><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_3066_3117" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="30" height="30">
<rect width="30" height="30" fill="#D9D9D9"></rect>
</mask>
<g mask="url(#mask0_3066_3117)">
<path d="M15.75 15L10 9.25L11.75 7.5L19.25 15L11.75 22.5L10 20.75L15.75 15Z" fill="#006EFF"></path>
</g></svg></button>Don’t have any new lines between the start of your svg between the </svg> and </button> tags, otherwise Contact Form 7 will put line breaks there.
But this works, and gives you a beautiful button!
See adding classes to Contact Form 7 input fields, as well.