WordPress is one of the most popular website creation platforms out there right now. According to BuiltWith, there are currently 28,183,568 live WordPress websites and counting. It is typical for new creators of WordPress sites to start using plugins immediately. You can also create a WordPress contact form via a plugin.
Unfortunately, standard plugins don't always tick every box for your business. "To use a plugin or not to use a plugin?" seems to be the big question here. But before you follow the same well-trodden route. Here is a summary of the main problems with plugins. You can also follow the easy-to-use guide to create a WordPress contact form with HeroTofu instead.
Firstly, it's handy to know about the problems you can experience when you use plugins. It can be surprising how many areas of your business and website they affect. You should consider dropping the plugin option altogether.
The good news is that you can create a WordPress contact form with HeroTofu, without using a plugin. Imagine having the ability to customize your layout exactly how you want. Then, you can grab the bull by the horns and go it alone.
There are quite a few options for how you can create an HTML form. The following guide will explain how each option works, also, why the third option is the best solution.
Before you begin, you will need to have a WordPress site. You can watch this quick tutorial on YouTube below if you don't have one already.
It's a good idea to keep your WordPress site open. You can now create a WordPress contact form in four easy steps.
Go straight to HeroTofu, set up a FREE account, or log in to your existing one. HeroTofu is simple to use. So, if you don't have any technical knowledge, you don't need to worry. It is 100% free, and you don't need to use credit card details to get started. You get a free 14-day trial and can change to the free forever plan after this period.
Once you are in the HeroTofu dashboard, select the "Forms" tab on the left-hand side menu. This selection will take you to the main forms screen. Select "+ New Form" in the top-right-hand corner. You can now start to create your form.
Give the form an easy name, such as "Contact Form for WordPress Site." Note that you will have a unique form endpoint for your new form. Please keep this information to hand as you will need to use it later.
You can now go to your WordPress website, which you should already have open. Go to the WordPress dashboard, select the "Pages" option, and click "Add New." You can check the screenshot below if you are unclear where that is. Give the new page a relevant title, such as "Contact Us."
You are now ready to set up your WordPress Form. At this stage, you have two different options:
<div class="w-full md:w-96 mx-auto"> <div class="p-6 border border-gray-300 sm:rounded-md"> <form method="POST" action="https://herotofu.com/start"> <label class="block mb-6"> <span class="text-gray-700">Full name</span> <input type="text" name="name" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="Peter Parker" /> </label> <label class="block mb-6"> <span class="text-gray-700">Email address</span> <input name="email" type="email" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="firstname.lastname@example.org" required /> </label> <label class="block mb-6"> <span class="text-gray-700">Message</span> <textarea name="message" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2" rows="3" placeholder="Tell us what you're thinking about..." ></textarea> </label> <div class="mb-6"> <button class="h-10 px-5 text-indigo-100 bg-indigo-700 rounded-lg transition-colors duration-150 focus:shadow-outline hover:bg-indigo-800">Contact Us</button> </div> <div> <div class="mt-2 text-gray-700 text-right text-xs">by <a href="https://herotofu.com" class="hover:underline" target="_blank" rel="noopener noreferrer">HeroTofu</a></div> </div> </form> </div> </div>
<form action="https://herotofu.com/start" method="POST" target="_blank" > <div> <input type="text" placeholder="Your name" name="name" required /> </div> <div> <input type="email" placeholder="Email" name="email" required /> </div> <div> <textarea placeholder="Your message" name="message" required></textarea> </div> <div> <button type="submit"> Send a message </button> </div> </form>
Once you have decided which code block you will use, you can add a custom HTML block. Then copy and paste the code you prefer. (NB For older WordPress versions without HTML blocks. You can click the "Text" tab and paste the code there.
Finally, you now need to use the unique form endpoint you saved earlier on. Then, you can paste the URL into the action attribute of the HTML block. Replace "herotofu.com/start" with your form endpoint. By doing this, any submissions will come to the new form you made on the HeroTofu dashboard.
Once you have completed the four simple steps above. The coded form, published on your WordPress page, will look like this:
Also, on the HeroTofu dashboard, the submitted form data is displayed like this:
It is as simple as that. You are a true hero! HeroTofu is now active and will handle the contact form submissions for your website. You did it and with no pesky plugins' insight. You are now in total control of your forms and not at the mercy of a standard format.
You can also take your form to the next level by:
If you have followed the easy instructions above, you should be well on your way to creating your ideal form. But, if you have any questions, please get in touch with us here, and we will be more than happy to help you. Here are a few of the benefits for you when you use HeroTofu for your forms.
We hope you enjoyed using this guide! We are here to answer any of your questions and give you friendly support whenever you want. So please feel free to contact us or share your form-building experiences.