How to Add Custom HTML to Your WordPress Forms

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

The first thing you need to do is to install and activate the WPForms plugin. Here’s a step by step guide on how to install a WordPress plugin.

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.

add html field

To insert your custom HTML code snippet, click on the HTML / Code block field you just added.

click on html code block

In the left panel, under Field Options, you’ll now see a field to add your custom code snippet.

add custom HTML to your WordPress forms

You can insert your custom HTML in that field and click Save on the top right panel.

save button

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.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. I wish you would show an example of someone doing this (just because it sometimes it spurns ideas for me).

    1. Hi Reuben,

      Sure! The article mentions a couple examples (such as embedding a YouTube video or a Google Map), but there are lots of ways that people use this field. Here are a couple extra examples:

      Adding an image
      Adding terms of service or disclaimer
      – And, most commonly, adding a simple note to the user (often this is simple instructions, could be plain text or include basic HTML). Here’s a screenshot of an example that uses b tags (for bolded letters) and a tags (to create a link): http://cloud.supportally.com/3k1I1L1M162C

      I hope that helps! 🙂

    1. Hi Claudia,

      We’ll be including a basic option for this in the next update (it will just require a little custom code that we’ll provide, which you can then copy/paste into your site).

      That update will go out within the next couple of weeks (version 1.4.6), and you’ll see that in your WordPress updates page (or you can watch for the announcement post in our blog). After that, please feel welcome to get in touch and we’ll share all the details you’ll need. Or in the meantime, if you contact us there we can provide a workaround idea.

      Thanks! 🙂

  3. I need help! I’ve added the HTML Code properly but the image and text doesn’t show in the email sent by the wpform. We need this appear as it is part of a email contract.

    Can this be done?

    Am I missing something? What is the purpose of the HTML ID # and where do we paste it?

    1. Hi Michael,

      Sure, so in order to include an image in your email you’ll need to add the image HTML directly to the body of your email. We don’t include HTML fields in your emails normally since they often contain content that would essentially break the email.

      To set this up, you’ll need to open the form builder and go to Settings > Notifications. There, you’ll see the Message field. Just paste your image HTML (same code you added to the form) right here and the image will display in your email. I’d just recommend submitting the form yourself to test this out and be sure everything looks how you’d like.

      I hope this helps! If you have any additional questions, please get in touch and we’ll be happy to assist further 🙂

    1. Hi Danny,

      Our sister site, MonsterInsights.com, has tons of great resources on improving SEO (through keywords and a bunch of other methods). Here’s an article from them that I’d suggest starting with: How to Improve Your Keyword Research to Boost Traffic and Sales.

      If you browse their blog, or use the search option in the right sidebar of their site, you’ll find a ton more helpful resources. Hope that helps! 🙂

  4. Is there any way to change the URL and action for the form? For instance, I found a form on CSS-Tricks that allows the site visitor to input their location and get directions to a pre-defined address. The form uses the “get” action and will redirect to Google Maps when the submit button is clicked.

    1. Hi Jim,

      We don’t have a way to implement quite what you’re describing, however we do have hooks that you can use to apply changes to what occurs when the submit button is clicked. For example, wpforms_process and wpforms_process_complete are a couple of popular hooks for adding new submission behaviors.

      Hopefully that’s a helpful starting point! 🙂

  5. Hi,
    is there a way to avoid reload of the page on click of the submit button when the form is open in a popup window? Something like
    .

    If the form opens in a popup window, on the click of the submit button, instead of showing the confirmation button it reloads the whole page…

    1. Hi Luigi,

      What you describe is true — most popup windows are designed to either close or refresh the entire page when an embedded form is submitted. However, many of our users do still use forms in popups and get around the confirmation issue by redirecting users to a Thank You/Confirmation page rather than displaying a message where the form was.

      Here’s an article that will show how to set up a Thank You page, as well as some tips on what all you could include on it.

      If you need any further assistance with this please get in touch with our support team.

      Thanks!

  6. Hi, Can I also place wordpress [shortcodes] inside the html element?
    I would like to display something with a [shortcode] like a slider.

    Thanks!

    1. Hi Sebastiaan,

      We don’t have a built in way to allow shortcodes to process within the HTML field but you can accomplish this with a little bit of custom code:

      /**
      * Process shortcodes inside the HTML field.
      */
      function wpf_dev_html_field_shortcodes( $field, $field_atts, $form_data ) {

      if ( ! empty( $field['code'] ) ) {
      $field['code'] = do_shortcode( $field['code'] );
      }
      return $field;
      }
      add_filter( 'wpforms_html_field_display', 'wpf_dev_html_field_shortcodes', 10, 3 );

      In case it helps, here’s our tutorial with the most common ways to add custom code like this.

      I hope this helps! If you need any extra assistance, contact support. 🙂

  7. Is it possible to use the above code, modified, to enable the html block to run php?

    I’ve got some custom ACF fields I’d like to show using

    Thanks!

    1. Hi Renier,

      We currently don’t have that function but I have noted it as a feature request for our development team to consider down the road. Thanks for the suggestion! 🙂

  8. Hi,
    I am delighted with WPForms and have build a product order form.

    The challenge I can’t solve is how to add a ‘discount code’ and, when entered, to reduce the ‘Total’ price accordingly.

    Any ideas really appreciated.

    Thanks

    1. Hi Malcolm,

      We currently don’t have the ability to include coupon codes in our forms right now but in the meantime, I have an idea for a workaround that could work for you if your form setup is relatively simple. Here’s a screencast video demo so that you can see if my idea could be a good fit.

      To set up this example, I added two Multiple Items fields — one with normal pricing and one with discounted pricing. I also added a Single Line Text field to accept a coupon code.

      The last step was to create conditionals for each of the item fields. To do this, I clicked on one of those fields and that opened its Field Options screen. Here I opened the Conditionals section and checked ‘Enable Conditional Logic’.

      For the full price items, the logic should resemble this screenshot. This tells this field to be hidden if the correct coupon code is entered.

      The discounted item’s conditional logic should be set to display when that same ‘coupon code’ is entered.

      I realize this isn’t the idea solution for this but I hope this helps! 🙂

    1. Hi Timothy,

      Can you make sure that both your site and the WPForms plugin are completely up to date? We experienced an issue not too long ago when adding the target=”_blank” element to a form.

      If that doesn’t work and you have a paid license, please feel free to contact our support team.

      Thanks!

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.