### [How to Add an Image to WordPress (The Easy Way)](https://wpforms.com/add-image-to-wordpress-form/)

**Published:** September 14, 2020
**Author:** Osama Tahir

**Excerpt:** Need to an image to your WordPress site? We've got you covered!

In WordPress, it's very easy to insert an image to different parts of your site. But it's not always clear how you can do this with minimal hassle. 

This guide will walk you through the easiest ways you can add images to your WordPress site.

**Content:**

Do you want to add an image to your WordPress site?

Images are an essential part of every piece of online content. They improve the visual appeal of your website and make your content more readable.

In this tutorial, I’ll walk you through the process of adding an image to different parts of your WordPress site.

- [How to Add an Image to WordPress](#how-to-add-an-image-to-wordpress)
    - [Scenario #1: Adding Image to a WordPress Post](#scenario-1-adding-image-to-a-wordpress-post)
    - [Scenario #2: Adding Image to a WordPress Form](#scenario-2-adding-image-to-a-wordpress-form)
        - [Install WPForms](#install-wpforms)
        - [Build a New Form](#build-a-new-form)
        - [Insert an Image Into Your WordPress Form](#insert-an-image-into-your-wordpress-form)
        - [Publish Your Online Form](#publish-your-online-form)
    - [Bonus: More Ways to Use Images In WordPress Forms](#bonus-more-ways-to-use-images-in-wordpress-forms)
        - [Adding Images to Selected Fields](#adding-images-to-selected-fields)
        - [Adding Images With HTML Code](#adding-images-with-html-code)

## How to Add an Image to WordPress

The process for adding images to WordPress varies depending on where exactly you’re inserting an image. In this tutorial, we’ll show you some of the most common scenarios for uploading images in WordPress.

Here are written instructions if you prefer to read along.

[Create Your WordPress Image Form Now](https://wpforms.com/pricing/)

### Scenario #1: Adding Image to a WordPress Post

If you’re creating a new post or page in WordPress, chances are you’ll need to add a few images to make your content stand out.

To add an image to your post, you’ll first need to go to the WordPress post editor by navigating to **Posts » All Posts** from the admin menu.

![Posts menu](https://wpforms.com/wp-content/uploads/2020/09/posts-all-posts.png)This will immediately take you to the WordPress Gutenberg editor. Once inside the editor, simply click on the ‘**+**‘ button to open the list of available blocks and then select the **Image** block.

![Select image block](https://wpforms.com/wp-content/uploads/2020/09/add-image.png)When the Image block is inserted into the content area, you’ll see the options to either upload a new image from your computer, select an already uploaded image from the Media Library, or insert an image from a URL.

If you’re adding a new image that doesn’t already exist in the library, click on the **Upload** button.

![Image upload button](https://wpforms.com/wp-content/uploads/2020/09/upload-image.png)Then, select the image you want to upload from your computer and it should immediately appear in your post.

![Image-inserted-in-post](https://wpforms.com/wp-content/uploads/2020/09/image-inserted-inpost.png)That’s how easy it is to add an image to a WordPress blog post!

The process for inserting images in pages is similar. You’ll just have to follow the same process after clicking the **Add New Page** menu option from the admin sidebar in your WordPress.

### Scenario #2: Adding Image to a WordPress Form

If you want to add an image to a WordPress form, you’ll first need to install a form plugin with an easy image upload functionality.

WPForms is one of the few form plugins for WordPress that make it incredibly easy to insert an image anywhere inside your form.

#### Install WPForms

If you don’t already have WPForms installed on your site, we recommend getting the [WPForms Pro license](https://wpforms.com/pricing/).

![The WPForms pricing page.](https://wpforms.com/wp-content/uploads/2024/08/WPForms-Pricing-Page-1024x500.png)For help with installing the plugin, you can see our doc [guide on installing WPForms](https://wpforms.com/docs/install-wpforms-plugin/).

Once you’ve installed the plugin, move to the next step where we show you how to create a form.

#### Build a New Form

On your WordPress dashboard, go to **WPForms » Add New**.

![Adding a new form in WPForms](https://wpforms.com/wp-content/uploads/2022/11/wpforms-add-new.png)You’ll see the form setup window open in just a few seconds. Here, you can name your form and choose from a pre-made template to get started quickly.

We’ll use the Simple Contact Form for this tutorial by hovering the cursor over it and clicking **Use Template**.

![Use Simple Contact Form template](https://wpforms.com/wp-content/uploads/2020/09/use-template.png)The form template will now load on your screen with all the necessary fields already added.

![Simple Contact Form](https://wpforms.com/wp-content/uploads/2020/09/form-loaded-1.png)We can customize this form to add an image quite easily as shown in the next step.

#### Insert an Image Into Your WordPress Form

To insert an image, you’ll need to add the Content field to your form. Simply drag and drop the Content field from the left-hand pane to the right.

We’re going to add a logo to the top of the form, so we’ll place the Content field at the top.

![Add the content field](https://wpforms.com/wp-content/uploads/2020/09/add-content-field-1.png)After you’ve added the field, click on it to open its Field Options on the left-hand pane, which allows you to use the visual editor to insert content.

![Content field options](https://wpforms.com/wp-content/uploads/2020/09/content-field-options.png)Next, you’ll have to click on the **Add Media** button just above the visual editor.

![Add media](https://wpforms.com/wp-content/uploads/2020/09/add-media.png)Now, click on the **Select Files** button.

![Select files](https://wpforms.com/wp-content/uploads/2020/09/select-files.png)You can now select any image file to upload and insert into your form. Once it’s uploaded, can enter details like the alt text and title. Then, click on the **Insert into Form** button at the bottom.

![Insert image into form](https://wpforms.com/wp-content/uploads/2020/09/inser-image-into-form.png)Doing so will insert the image inside your form. The image will not immediately appear in the form, even though you can see it in the editor on the left.

You’ll just need to press the **Update Preview** button under the visual editor in order to see the image in the form.

![Update preview](https://wpforms.com/wp-content/uploads/2020/09/update-preview.png)This is what it should look like after you’ve added the image using the Content field and updated the preview.

![Image added to form](https://wpforms.com/wp-content/uploads/2020/09/image-added-to-form.png)You can also access additional formatting options by clicking on the **Expand Editor** button at the bottom right of the editor.

![Expand the editor](https://wpforms.com/wp-content/uploads/2020/09/expand-editor.png)For instance, you can adjust the alignment of your content, add a bulleted list for text, and more.

![Content field formatting options](https://wpforms.com/wp-content/uploads/2020/09/content-field-formatting-options.png)Excellent! Now that you’ve added an image to your form, go ahead and press the **Save** button at the top right of the form builder.

![Save the form](https://wpforms.com/wp-content/uploads/2023/04/Save-the-Form.png)All that remains now is to publish this form on your site so your visitors can access it.

#### Publish Your Online Form

WPForms comes with an easy embed wizard that makes publishing a quick and straightforward process.

Start by clicking on the **Embed** button at the top of the form builder.

![Embed your form with the embed button](https://wpforms.com/wp-content/uploads/2023/03/Embed-Button.png)You’ll then see a modal window appear, asking you to choose where you want to embed your form. We’ll select **Create New Page** to embed a form in a fresh new page.

![Embed form in new page](https://wpforms.com/wp-content/uploads/2023/02/create-new-page.png)After that, enter a name for your page and click on **Let’s Go**.

![Enter a name for your new page](https://wpforms.com/wp-content/uploads/2016/12/Embed-in-a-Page.png)The wizard will take you to the WordPress editor, where you’ll find your form embedded.

When you’re ready to go ahead, press the **Publish button** at the top right to go live with your form.

![Publish form](https://wpforms.com/wp-content/uploads/2020/09/publish-form.png)And that’s it! You’ve now successfully created a form with an image added to it.

![Contact form with logo](https://wpforms.com/wp-content/uploads/2020/09/contact-form-with-image-published.png)There’s a lot more that you can do with WPForms when it comes to adding graphics. Let’s show you a few bonus tips next.

### Bonus: More Ways to Use Images In WordPress Forms

The flexibility of WPForms makes a lot of interesting things possible when it comes to adding media to your forms.

We’ll show you a few tips that can help you make your forms look even better along with alternative methods of inserting images.

#### Adding Images to Selected Fields

In the example above, we showed you how to insert an image as a piece of content into your form.

But did you know that you can also use images to accompany selectable items in fields like Checkboxes and Multiple Items?

To use images for options in a Multiple Items field, you can click on the **Use Image Choices** toggle button in its Field Options.

![Use image choices](https://wpforms.com/wp-content/uploads/2020/09/use-image-choices.png)After toggling on Image Choices, you’ll be able to upload images for each choice in your field. Click on the **Upload Image** button to easily add any image.

![Upload image choices](https://wpforms.com/wp-content/uploads/2020/09/upload-image-image-choices.png)You can repeat this for each choice to turn a plain form into something more visually engaging.

![Image choices uploaded](https://wpforms.com/wp-content/uploads/2020/09/image-choices-uploaded.png)In fact, you’re not just limited to uploading custom images for choices. WPForms also gives you access to a huge library of pre-loaded icons that you can add to your choices.

To use icons for your choices, go ahead and click on the **Use Icon Choices** toggle.

![Use Icon Choices](https://wpforms.com/wp-content/uploads/2020/09/use-icon-choices.png)Give it a try. It’s easy to do and your visitors will enjoy filling out your forms more when there are visual elements to grab their attention!

#### Adding Images With HTML Code

Earlier, we showed you how to make quick work of inserting an image into your WordPress form using the Content field.

However, if you prefer working directly with HTML code instead, you can insert images using a more technically involved method as well.

For this to work, it’s necessary that the image you want to add to your form is already uploaded to your Media Library with its URL known to you.

If not, you can upload one and grab the URL now. From your WordPress dashboard, click on **Media » Add New Media**.

![Add New Media File](https://wpforms.com/wp-content/uploads/2020/09/add-new-media-file.png)This will open the Media Library upload area. Click on the **Select Files** button to proceed.

![Upload your form image to WordPress](https://wpforms.com/wp-content/uploads/2020/08/upload-form-image-to-wordpress.png)Now, pick the file you want to upload from your computer. When the file has finished uploading, you’ll be able to see its URL.

Click on the **Copy URL to Clipboard** button to get the link.

![Copy file URL](https://wpforms.com/wp-content/uploads/2020/09/copy-url.png)Now, open an existing form that you want to add the image to or create a new one as we showed earlier in this tutorial.

You can edit an existing form by going to **WPForms » All Forms**.

![Forms Overview Menu](https://wpforms.com/wp-content/uploads/2020/09/forms-overview-menu.png)Now, select the form you want to insert your image into from the **Forms Overview** page.

![Select form](https://wpforms.com/wp-content/uploads/2020/09/select-form-1.png)Inside the form builder, drag and drop the HTML field to the right-hand area where your form is.

![Insert HTML field](https://wpforms.com/wp-content/uploads/2020/09/html-field.png)After you’ve done this, click on the HTML field that you just placed inside your form to open its Field Options on the left.

![HTML Field Options](https://wpforms.com/wp-content/uploads/2020/09/html-field-options.png)You can use the Label option to give the HTML field a name so you can identify it in the form more easily, but this won’t be visible on the frontend.

Finally, the image you want to insert will need to be added inside an img tag in the Code box. You can use this format to add your image: ``

![Adding image with HTML field](https://wpforms.com/wp-content/uploads/2020/09/image-with-html-code.png)Note that, unlike the Content field, the HTML field can’t load the code to update the preview inside the form builder. But you can use the **Preview** button at the top to look at a preview of your entire form.

![Preview your form](https://wpforms.com/wp-content/uploads/2022/10/preview-your-form.png)This is helpful for checking if the HTML code you entered is working correctly.

You can then go ahead and publish the form following the same steps that we underlined above.

And that’s it! You’re now ready to add an image to your WordPress site whether you need to do it to a post or a form.

[Create Your WordPress Image Form Now](https://wpforms.com/pricing/)

### Next, Accept User Submitted Images

WPForms also makes it easy for your visitors to [upload their own images to WordPress](https://wpforms.com/users-submit-images-to-wordpress/), so be sure to check that out next.

Are you looking for more ways to design and style your forms? Check out this article on [styling WPForms using the Block editor](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/). This guide will show you how to design your form like a pro using simple controls and without any code whatsoever!

Ready to build your form? Get started today with the easiest WordPress form builder plugin. [WPForms Pro](https://wpforms.com/pricing) includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on [Facebook](https://facebook.com/wpforms) and [X](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** design, form, graphic, image, layout

---