How to display WordPress form using HTML code

Display WordPress form using HTML code

We already have the idea that a WordPress page with a form is published using a shortcode. Then why use HTML code to do the same thing? This blog discusses why and how do we display WordPress form using HTML code. Adding an HTML code rather than a shortcode enhances your options. With HTML codes, you can add or remove elements according to your necessity.

WordPress allows us to display WordPress form using HTML code. This is carried out by completing a few steps from your WordPress dashboard itself. On the other hand, you can also download plugins helping you add custom HTML codes to your WordPress form.

Using HTML, your form is guaranteed to attract more attention as it will be highly customizable compared to the rest of the content. For example, using HTML codes you can embed images to your form to make it alluring. To summarize, your form will now have more viewers willing to submit the form.

In this tutorial, we learn to display WordPress form using HTML code.

Fetching the pre-generated HTML code

If you haven’t created a form already, then make it your priority. In this example, we go ahead and tweak the form already created with RegistrationMagic.

From your WordPress dashboard go to your RegistrationMagic plugin. Click “All Forms” to land on the page consisting of a collection of forms. To demonstrate, the form we select here is a General-Purpose Registration Form. This form is located right next to the Login Form.

display WordPress form using HTML code html code

Hover your cursor across the form envelope to discover the “Dashboard” hyperlink. Click it to visit the dashboard of the selected form. This is the section where you can visualize the graphs related to submissions. It also displays “Field Analytics” and allows modification of certain specks present in the form.

In the meantime, you can use this Dashboard page to edit, configure, integrate and publish form content. Hence scroll down directly to the “Publish” section. Underlying is a sub-heading tagged “HTML Code”. Click on it to configure your WordPress form with an HTML code.

display WordPress form using HTML code publish section

A pop-up appears with “Publish” as the heading. This pop-up prompts you to publish your WordPress page using the HTML code placed below. This code defines class attributes as well as particulars like width and height of the form.

Click the “COPY” link underlying this code. This copies the complete HTML code used to generate the form.

display WordPress form using HTML code link

Publish WordPress form using HTML code.

Navigate all the way back to Pages >> Add New. This is the section from where you publish your form using the HTML code. Clicking “Add New” creates a new page with the heading “Add New Page”.

Assign a unique name to the page. In this example, we name the page as “Display Form”. From the body section of the email-like page click “Text” placed to the right beside “Visual”.

display WordPress form using HTML code add new page

Paste the complete HTML code in this section. The text part accepts HTML codes while the visual part doesn’t. HTML tags are generated only if they embed themselves under the “text” section.

Click “Publish” to print the form on the page. Your page is now successfully published.

Finally, you can click the “View Page” hyperlink to relish a view of your page. A roundabout to this is clicking the permalink below your page name. Both the options are approved ones.

To summarize, this is how you display WordPress form using HTML code. To illustrate, shared below is a screenshot of your form embedded in your “Display Page”.

display WordPress form using HTML code result

About rmagic

RegistrationMagic Editorial Staff (rmagic) is a team of WordPress registration experts and major contributor to the development of RegistrationMagic - WordPress User Registration Plugin.

Leave a Comment

Your email address will not be published. Required fields are marked *