### [How to Embed a Form on Your WordPress Website (3 Ways)](https://wpforms.com/how-to-embed-a-form-on-your-website/)

**Published:** September 1, 2022
**Author:** Kacie Cooper

**Excerpt:** Forms are a very important part of any website, and there are endless ways to use them, whether it's a simple contact form or a customer survey. Embedding a form on your WordPress website might sound complicated, especially if you’re not tech-savvy.

I used to feel the same way, wondering if there was an easy way to make it work without running into issues or getting stuck in technical jargon. After trying different methods, I discovered that embedding forms is actually simple once you know the steps and use the right plugin.

In this post, we've put together a step-by-step guide to show you three different ways to embed a form on your WordPress website using WPForms, so you can choose the one that works best for you.

**Content:**

Embedding a form on your WordPress website means adding a working, fillable form directly to any page or post. This is so visitors can reach out, sign up, or submit information without leaving your site. With a plugin like WPForms, you can do it in just a few clicks using the built-in Embed button, the WPForms block in Gutenberg, or a simple shortcode.

To be honest, I used to think this would be way more complicated than it actually is. Before using WPForms, I was picturing iframe code and custom CSS just to get a contact form on a page. Turns out, you don’t need any of that.

In this guide, I’ll walk you through three different ways to embed a form on your WordPress site, step by step, so you can pick whichever method feels easiest to you.

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

## 3 Ways to Add a Form to Any WordPress Page

- [Quick Comparison](#aioseo-quick-comparison-6)
- [Way 1: Using the WPForms Embed Button](#aioseo-step-3-embed-your-form)
- [Way 2: Using the WordPress Block Editor](#aioseo-using-the-wordpress-block-editor)
- [Way 3: Using the Shortcode Embed](#aioseo-using-the-shortcode-embed)
- [Now Publish Your Form](#aioseo-step-4-publish-your-form)
- [FAQs — How to Embed a Form on Your WordPress Website](#aioseo-faqs-how-to-embed-a-form-on-your-wordpress-website-70)

### Quick Comparison

You can embed a form on your website by using a form plugin like WPForms, which is the easiest and fastest way. Normally, you would need to use an embed code snippet to add a form to your website.

For example, if you wanted to embed Google forms on your site, you would need a bit of html code called an iframe to add the form to your site. Then you would need to use CSS to style the form and make it look the way you wanted.

With WPForms, adding a form to your WordPress site is much easier. It has 3 different methods for embedding forms on your website without the need for extensive code snippets.

**Method****Best For****Where It Works**Embed ButtonBeginners — fastest optionPages (new or existing)WPForms BlockGutenberg users — visual previewPages and postsShortcodeMaximum flexibilityPages, posts, sidebars, footers, widgets### A Couple Prerequisites 

Before we jump into embedding a from, there are a couple of things we need to check off our list.

#### Install the WPForms Plugin

WPForms allows you to create your own web forms from scratch or choose from [2,100+ form templates](https://wpforms.com/templates/). The options include signup forms, registration forms, and tons of industry-specific forms for every type of business. And they’re super easy to embed on your WordPress website. To begin, download the [WPForms plugin](https://wpforms.com/pricing/).

[![The WPForms homepage](https://wpforms.com/wp-content/uploads/2024/08/WPForms-Website.png)](https://wpforms.com/pricing/)Once you’ve downloaded the plugin, you’ll need to upload it to your website. If you’re not sure how to do that, this [beginner’s guide to installing WordPress plugins](https://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners/) can walk you through the process.

[Get the WPForms Plugin Now! 🙂](https://wpforms.com/pricing/)

#### Create a New Form

Once you’ve installed the WPForms plugin, you’re ready to create forms using the drag-and-drop builder. Whether you want to build your own form or start from a template is up to you, but the first thing to do is click **Add New**.

![Add new form](https://wpforms.com/wp-content/uploads/2022/08/Add-New-1.png)Once you click that button, you’ll see a variety of templates you can choose from. There’s also the option to select a blank form and create your own.

When you hover your mouse over your selection, you’ll see 2 options:

- Use template
- View demo

If you view the demo, it will show you what the embedded form looks like. Remember that the template is customizable, so if there’s anything you want to change, you can.

Once you’ve determined which template you want to use, go ahead and click the **use template** button. It will open in the editor. For this post, we’ll be using the [simple contact form template](https://wpforms.com/templates/simple-contact-form-template/).

Now is the time to customize your form if you’d like. In our case, the template only collected a phone number. We customized it by first adding a checkbox field asking for their contact preference and adding an email option.

![Preferred contact checkbox field](https://wpforms.com/wp-content/uploads/2022/08/Pref-Contact-Setup.png)Then we set up a little bit of conditional logic, which you can find in the **Smart Logic** tab under **Field Options**. Conditional logic lets you set up rules so that users only see the fields that apply to them.

In this example, if they select email, they’ll see a field to provide an email address. If you wanted to include a [GDPR checkbox](https://wpforms.com/how-to-add-a-gdpr-agreement-field-to-your-sites-forms/) here, you could easily do that as well.

![Conditional logic radio buttons](https://wpforms.com/wp-content/uploads/2022/08/EmailCL.png)If they select phone, they can provide a phone number. Now it’s time to choose how you want to embed your form.

Now, let’s get to the main event: embedding your form!

### Way 1: Using the WPForms Embed Button

WPForms has 3 ways to add a form to your website. I’ll show you all three ways to do it here and you can choose the one that’s easiest for you.

The first embed method is to simply use the **embed** button at the top of your form editor.

![Template Embed Button](https://wpforms.com/wp-content/uploads/2022/08/Embed-Button.png)Once you click that button, you’ll get the option to either select an existing WordPress page or create a new page. You can choose whichever makes the most sense for your site. We created a contact page here. Once you’ve got that, you can click the **Let’s Go!** button.

![Embed to a Page](https://wpforms.com/wp-content/uploads/2022/08/Page-Name-Embed.png)Once you do that, the page draft will open, and you’ll see the embedded form. Click **publish** and you’re good to go!

### Way 2: Using the WordPress Block Editor

Embedding a form right from the WordPress block editor (also known as Gutenberg) is another easy way to add one of your forms to a post or page.

Open the page where you want the form to appear, and click the blue **plus (+)** icon.

![Embed from block editor](https://wpforms.com/wp-content/uploads/2022/08/Embed-From-Block.png)A menu will open with a variety of widget options. Scroll down until you find the **WPForms widget** and click on it. When you do that, a box will open and you can select the form you want to embed.

![Widget embed options](https://wpforms.com/wp-content/uploads/2022/08/WPForms-Widget-Embed.png)After you make your selection, you’ll see the form embedded on your page.

### Way 3: Using the Shortcode Embed

Another simple way to embed a form on your website is by pasting a shortcode, which takes only a matter of seconds. You can find your form’s shortcode in 2 places:

#### The Embed Button

When you click the **embed** button from the editor, as we did above, one of the alternative options is to **use a shortcode**. If you click on that, your form’s shortcode will appear and you can copy it.

![Form short code embed option](https://wpforms.com/wp-content/uploads/2022/08/Short-Code-Clicked.png)#### Your List of Forms in the WPForms Plugin

From your WordPress dashboard, click on the **WPForms plugin** in the sidebar. It will display the list of forms you’ve created and you’ll see the shortcodes for all of them. This is helpful if you’re not actively working on a form but need to grab the shortcode quickly to embed it somewhere.

![WPForms shortcode](https://wpforms.com/wp-content/uploads/2022/08/Short-Code-Alt.png)After you’ve copied the shortcode, go to the page or post where you want to embed it. Once again, you’ll want to click on the blue **plus (+)** sign in the top left corner to get a list of dropdown options.

![Embed from block editor](https://wpforms.com/wp-content/uploads/2022/08/Embed-From-Block.png)Instead of selecting the WPForms widget as we did before, we’re going to select the **Shortcode widget** instead.

![Embed a form with the shortcode widget](https://wpforms.com/wp-content/uploads/2022/08/Shortcode-Widget.png)When you click that, a box appears in your post editor. All you have to do is paste that shortcode into the box.

![Embedding a form from shortcode](https://wpforms.com/wp-content/uploads/2022/08/Shortcode-Pasted.png)If you preview the page, you’ll see that the form is successfully embedded. Additionally, you can also paste the shortcode directly into the editor instead of going through the widget.

![Shortcode pasted in editor](https://wpforms.com/wp-content/uploads/2022/08/Simple-Shortcode-Paste.png)And again, after pasting it where you want it to appear within the content, you can preview the page and see that it’s been embedded.

This method also works great for easily [adding a form to the footer of your website](https://wpforms.com/how-to-add-a-contact-form-to-your-wordpress-footer/).

### Now Publish Your Form

After you’ve successfully created and embedded your form, it’s time to publish it! Go ahead and click that **publish** button in WordPress. When you visit the live page, your embedded form is ready to gather information.

![Published contact form](https://wpforms.com/wp-content/uploads/2022/08/Published-Contact-Form.png)By default, the user will remain on the same page. If you want to [redirect users to another page](https://wpforms.com/how-to-redirect-users-after-a-wordpress-form-submit/) after they submit their form responses, you can.

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

### FAQs — How to Embed a Form on Your WordPress Website 

#### **How do I embed a contact form on my WordPress website?**

To embed a form on your WordPress website, simply create the form in WPForms, then click on the **Embed** button at the top of the form builder. You can either add the form to an existing page or create a new one. The form will automatically appear on the page after you select where you want it to go.

#### How do I add a fillable form to a website?

Using WPForms, you can easily add a fillable form to your WordPress site. Once you create your form, copy the shortcode provided and paste it into any page or post. Alternatively, you can use the block editor to insert the WPForms block, then select your form from the dropdown.

#### How do I link to a form on WordPress?

To link to a form in WordPress, create a page or post with the form embedded, then copy the URL of that page. You can share this URL on buttons or text links anywhere on your site, directing users to your form.

#### **What’s the best way to add a form widget to WordPress?**

The easiest way to add a form widget in WordPress is using WPForms’ native WordPress blocks. Simply edit any page or post, click the plus (+) button, search for “WPForms,” and select your form.

This method works better than traditional WordPress widgets because it’s more flexible and doesn’t require theme-specific widget areas.

#### **Can I embed forms without coding knowledge?**

Absolutely! WPForms is designed specifically for non-technical users. You can embed forms using the visual WordPress editor, one-click embed buttons, or simple shortcodes.

No HTML, CSS, or PHP knowledge required. This makes it much easier than alternatives like Google Forms (which requires iframe codes) or custom HTML forms.

#### ****What’s the difference between embedding forms with blocks vs shortcodes?**** 

WordPress blocks (the WPForms block) offer a visual interface and are easier for beginners, while shortcodes offer more flexibility for advanced users.

Blocks work great in the main content area, while shortcodes can go anywhere – sidebars, footers, custom template locations, or even other plugins’ content areas.

#### ******Can I embed the same form in multiple places on my website?******

Yes! You can embed the same WPForms form on multiple pages, posts, or locations using any of the three embedding methods.

All submissions go to the same place, making it perfect for having a contact form in your header, footer, and dedicated contact page simultaneously.

#### ********Do embedded WordPress forms work on mobile devices?********

Yes, WPForms automatically creates mobile-responsive embedded forms that work perfectly on all devices.

Unlike external form builders that sometimes have mobile display issues, WPForms uses your WordPress theme’s responsive design, ensuring consistent appearance and functionality across desktop, tablet, and mobile.

### Next, Secure Your Form With hCaptcha

Do you want to add an extra layer of spam protection to your form? WPForms includes hCaptcha integration, making it simple to do. Learn [how to secure your WordPress form with hCaptcha](https://wpforms.com/how-to-add-hcaptcha-to-wordpress-forms/).

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

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 [Twitter](https://twitter.com/easywpforms) for more free WordPress tutorials and guides.

**Categories:** WordPress Tutorials

**Tags:** contact form, embed, WPForms

---