How to Add HTML Code to a Page in WordPress

If you’re looking to insert HTML code into the WordPress Gutenberg editor, whether it’s for embedding a form, a YouTube video, or any third-party software, this guide will walk you through the steps. Here’s how you can do it:

Step 1: Prepare Your HTML Code

First, ensure that you have the HTML code ready. This code could be for a variety of purposes, such as embedding a newsletter subscribe form, a video, or any other external content.

Step 2: Open the WordPress Gutenberg Editor

Navigate to the page or post where you want to insert the HTML code. In this example, we’ll use a contact page as the location to embed the HTML code.

Step 3: Add a Custom HTML Block

1. Inside the Gutenberg editor, click the Add Block button (the plus icon).
2. In the block search bar, type Custom HTML and select the block that appears.
3. This will add a Custom HTML block to your page, which provides you with a text box for inserting HTML code.

Step 4: Insert the HTML Code

1. Copy the HTML code you need to embed. For example, you might have a code snippet for an email subscription form.
2. Paste the HTML code directly into the Custom HTML block.

Step 5: Preview the HTML Code

One great feature of the Custom HTML block is the ability to preview how your code will look on the front end of your website:

1. Click the Preview button at the top of the block. This will show you a visual representation of how the HTML code will be rendered.
2. Ensure that the content displays as expected.

Step 6: Save and View the Page

1. Once you’re satisfied with the preview, click the Update button to save your changes.
2. After updating, you can view the page on the front end of your website to see the HTML content live.

Example Use Case: Embedding a Newsletter Form

In this example, you might be embedding a newsletter subscription form for a campaign like “Design to Dollars.” After following the steps above, the form will appear on the designated page, allowing visitors to sign up directly.

Conclusion

Inserting HTML code into the WordPress Gutenberg editor is quick and easy using the Custom HTML block. This method works for various types of content, from forms to embedded videos and more. By previewing the code within the editor, you can ensure that everything looks perfect before publishing it on your site.

This approach makes it simple to integrate third-party tools and features into your WordPress site without needing extensive technical knowledge.