Do you want to embed custom HTML code snippets on your WordPress forms? Adding custom HTML to your form is a great way to get creative and enhance your forms.
WordPress by itself doesn’t provide a way to create contact forms, and basic form builder plugins don’t give you an option to add your own custom HTML to your forms. For real flexibility in creating forms, you’ll need to use a more advanced plugin like WPForms.
In this tutorial, we’ll walk you through how to add custom HTML to your WordPress forms using WPForms.
Why Add Custom HTML to Your Form
One of the main benefits of adding custom HTML to your form is that it helps you to make your form stand out from the rest of the content.
For instance, you can add an image to your form using custom HTML code to make the form visually appealing. This way, you can make the form stand out on the page, which helps to grab the attention of your visitors, in turn encouraging them to submit your form.
Adding custom HTML to your form creates a wide range of opportunities to enhance the usability of your WordPress form. Some of them are listed below.
- Embed a YouTube video: You can make your form more engaging by adding a YouTube or Vimeo video to your form.
- Embed Google Maps: In your contact page, you can show the location of your business by embedding Google Maps on your contact form.
- Show an exclusive offer with conditional logic: If you’re creating an order form, you can show an HTML block with an exclusive offer if a user selects a specific option in your form. This works great for upsells. To do this, you’ll need to use our smart conditional logic.
Creating a Form in WordPress
Also, you’ll need to have a form created. To do so, you can see our tutorial on how to create a simple contact form as an example to get started.
Adding an HTML Block to Your Form
Now you need to add an HTML field to your form.
To insert your custom HTML code snippet, click on the HTML / Code block field you just added.
In the left panel, under Field Options, you’ll now see a field to add your custom code snippet.
Want to add an icon with extra info to a form field like the image above? Head over to our tutorial on how to add Tooltips in WordPress forms.
You can insert your custom HTML in that field and click Save on the top right panel.
This way, you can add any type of custom HTML code snippet to your form.
Now that you’ve added custom HTML to your form, you can take a look at our guide on styling contact forms in WordPress to make sure your custom code looks the way you want it to.
So what are you waiting for? Get started with the most powerful WordPress forms plugin today.