Search
Close this search box.

Contact Form 7 Customization: How to Add Images to a Contact Form on your WordPress site?

Listen to this article
Contact Form 7 customization
Contact Form 7 Customization

Do you want to know how to customize a form on your WordPress site?

You’re at the right place!

Contact Form 7 is the most downloaded and used plugin to create forms.

The plugin can be used to create simple forms dynamically using several tags offered like Text field, Email, Checkboxes, Date, etc. These tags are predefined. But let’s say you would want to add some element of your own apart from what the form provides, for example, an image or your company logo.

You could probably create your custom tag, but this would be a lengthy process, and not all of us are coding experts to achieve this easily.

Explained below is a method to achieve this using simple HTML code which anybody can use. Not only can we use it to add an image but we can extend the idea to add any other field such as a table or footnotes if desired.

Do note that this solution is to make a change only for an individual form.

So let’s get started.

Add an Image to Contact Form 7

Let us take a use case to add a company logo in the comments form. Our form would contain fields for name, email, comments, the logo (which we would want to display), and a submit button. The logo would be some file ‘abc_logo.png’.

The first thing you would want to do is to upload the logo file (if not present already) in the media files from the dashboard. This provides us with the path for the file which we will be using to display the logo.

Our code for the form would have to look something like this:

<p>Your Name (required)<br/>
[text* your-name] </p>

<p>Your Email (required)<br/>
[email* your-email] </p>

<p>Your Comments<br/>
[textarea comments x4] </p>

<!-- add company logo -->
<div >
<!-- specify the url path for the image -->
<img src="http://localhost/wordpress/wp-content/uploads/2014/01/abc_logo.png">
<br/>
</div>

<p>[submit "Send"]</p>

If we were to add the form to a page, the output would be:

contact-form-7-with-logo
Contact Form 7 with a Logo

Conclusion

So, that’s how you add an image in a Contact Form.

Similarly, we can add any WordPress UI element using simple HTML code.

Just add the corresponding HTML code for the desired element in place of the image tag.

It could be a simple link, an image link, maybe a table, or a customized button. This code can be placed anywhere in your form.

This is a much neater and design-friendly solution than changing the core code of the plugin.

If you need help with other types of form customization, you can reach out to our expert team.

We are WordPress core contributors with 12+ years of experience working on 800+ projects. We can perform any type of WordPress plugin customization with minimum downtime and help optimize your site for maximum speed.

Be sure to leave comments if you have any further questions or suggestions for a better way of achieving the same.

Namrata

Namrata

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads