Adding a logo, image or a graphic to your Contact Form 7 (CF7) form helps maintain consistency across your website, promotes brand recognition and projects professionalism.
In this article, we’ll guide you through how you can easily add any image to your Contact Form 7 form with the CF7 Skins Visual Editor.
Adding Image to WordPress
Make sure you have the intended image saved in your WordPress Media Library to be able to use it in your form.
1. Go to Media >> Library.
2. Click Add New button.
3. Now you can either drag and drop the image from its file directory on your computer to the Media Library or you can go to Select Files to navigate to the image location on your computer and select the required files to upload.
Tip: You can upload multiple images at the same time by selecting them at once.
HTML Image Tag
An HTML image tag lets you embed an image where it’s required. With respect to our use case, its most important attributes include src, width, height and styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form..
<img style="alignnone" src="https://example.com/wp-content/uploads/logo.jpg" width="600" height="150" />
src — source link
width — width in pixels
height — height in pixels
style — alignment
To create your personal image tag;
1. Navigate to the media library and click the desired image. The image link is displayed with the properties on the right side panel. Copy the link and paste it into the src attribute.
2. Set width and height, such that the image fits properly within the form.
3. Assign a style for proper alignment of the image.
Adding Image to Contact Form 7 Form
You can add a logo, graphic, or any other image to your form through the image tag. Just follow the steps below:
1. Open your form; From your WordPress dashboard, navigate to Contact >> Contact Forms >> Form.
2. From FIELDS (CF7 SKINS ITEMS) in the visual editor, drag the HTML box and drop it between the form fields where you want the image to appear.
Tip: The HTML field is only available with CF7 Skins Pro add-on.
3. Click the edit button. A text box will appear where you can add HTML tags.
4. Paste your image tag in the text box and click Done.
5. Click Save Visual.
You have successfully added an image to your Contact Form 7 form.
If you are looking for an easier way to add an image to your CF7 form or tailor your contact form in any other way, CF7 Skins is an efficient way. Its user interface is highly intuitive and provides loads of options for your contact form’s fields and its outlook.
For more detail, refer to CF7 Skins documentation.
Have questions or need help?
If you are using the free version of CF7 Skins, you can get help via the CF7 Skins community and also the Contact Form 7 Support forum.
If you are using any of our Add-ons, we provide Premium Email Support to help with your questions and problems.
