How to Embed a Form on Your Website (3 Ways)

Do you want to embed a form on your website? Whether it’s a simple contact form or a customer survey, forms add functionality. There are endless ways to use them.

In this post, we’ve put together a step-by-step guide to show you the easiest way to embed a form on your WordPress website.

Create Your WordPress Form Now

How Do I Add a Fillable Form to My Website?

You can embed a form on your website by using the WPForms plugin, which is the easiest and fastest way. It has 3 different methods for embedding a fillable form on your website. We’ll walk you through those in this post.

How to Embed a Form on Your Website

We’re going to show you 3 different ways to easily publish a form in WordPress.

Let’s get started.

WPForms is the best WordPress Form Builder plugin. Get it for free!

Step 1: Install the WPForms Plugin

WPForms home

WPForms allows you to create your own forms or choose from 400+ templates, and they’re super easy to embed on your WordPress website. To begin, download the WPForms plugin.

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 can walk you through the process.

Step 2: Create a Form

Once you’ve installed the WPForms plugin, you’re ready to get started. Whether you want to create 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

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:

  1. Use template
  2. 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.

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

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 here, you could easily do that as well.

Conditional logic radio buttons

If they select phone, they can provide a phone number.

Now it’s time to choose how you want to embed your form.

Step 3: Embed Your Form

WPForms has three ways to embed your form on your website. We’ll show you all three ways to do it here and you can choose the one that’s easiest for you.

Using the WPForms Embed Button

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

Template Embed Button

Once you click that button, you’ll get the option to either select an existing 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

Once you do that, the page draft will open and you’ll see the form embedded. Click publish and you’re good to go!

Using the WordPress Block Editor

Embedding a form right from the WordPress block editor 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+ icon.

Embed from block editor

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

After you make your selection, you’ll see the form embedded on your page.

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

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

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 + sign in the top left corner to get a list of dropdown options.

Embed from block editor

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

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

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

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.

Step 4: Publish Your Form

Now that 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

By default, the user will remain on the same page. If you want to redirect users to another page after they submit their form responses, you can.

Create Your WordPress Form Now

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.

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.