How to Create a Custom WordPress Contact Form Without Plugins
Anthony Penner on Jan 6 2022
Wordpress is a free and open-source content management system that currently powers over 455 millions websites on the internet, and that number continues to grow every year. If your website is built with WordPress, you know that you can add new features and functionality easily with plugins.
Setting up a simple contact form using plugins like Contact Form 7, Gravity Forms, and Ninja Forms is pretty straightforward and they all do the job of managing your submissions. However, in many cases using a plugin for form management is not the best solution.
The Downsides of Using Plugins to Create and Manage WordPress Forms
Although plugins let you create forms quickly and easily, there are various reasons why using a plugin may not the best choice for website.
Limited customization: Most WordPress form plugins do not give you complete control over the end user facing form experience. And overwriting CSS styles or JS events if you are able to can be tedious and time consuming.
Compatibility issues: The WordPress platform is updated in a frequent basis. Many plugin developers are unable to keep up with the WordPress update schedule and maintain their plugin code accordingly. This can lead to compatibility issues between both the platform and other plugins, which leads to malfunctioning features and broken WordPress sites.
No integration support for third party applications: Most form plugins built for WordPress don’t support integration with other external tools, which limits your ability to pass submission data on to other applications for workflow automation.
Security risks: Since WordPress plugins are so widely used to enhance website functionality, this makes them a prime target for hackers. If your site is running an older version of a plugin or a plugin that is not being actively maintained by the developer, it might contain defective code that can lead to bugs and security exploits.
Reduced performance: Plugins often incorporate more features than you really need. The more plugins you have installed on your WordPress site, the more calls to load external assets like CSS and JS files you’ll have, and that will negatively affect your website performance and speed.
Limited Support: Many plugins have poor documentation and limited developer support to help you troubleshoot issues that can come up over time, leaving you to figure it out on your own.
Create Better WordPress Forms with Basin
Basin makes it easy to bypass the limitations of creating WordPress forms using plugins. We built it with the needs of designers and developers in mind, and it helps you and your site visitors get the most out of the form submission experience.
Here are some of the benefits to using Basin to process and manage the form submission data on your WordPress website.
Fully customizable: Unlike most WordPress form plugins, Basin gives you complete control of the form building and frontend user experience. You can build HTML or Javascript forms and customize them with specific form elements and styles to suit your needs.
Versatile data processing capabilities: Instead of relying solely on an email service provider, Basin provides you with multiple ways to process and manage your form submission data. You can export the data in CSV or XLSX format or use the developer-friendly API to access it easily.
Enhanced security: Basin uses best-in-class cloud technology to ensure the safety and security of all collected form data. With automatic spam filtering and multiple layers of protection against bots, your inbox will stay squeaky clean.
Minimal to no maintenance: No need to make regularly scheduled changes to your form code to stay up to date with the latest version of WordPress, and no compatibility issues with other plugins to solve either.
Improved performance: When you use Basin to power your WordPress forms, you avoid installing unnecessary plugin files. Without that additional overhead, your website will load content faster and perform better overall.
Endless integration possibilities: Basin makes form data processing and management work more seamless by giving you the tools to send your form data to 3,000+ popular apps and services through our integrations, web hooks, and API. We have built-in support Zapier, Integrately, and Integromat integrations, and we’ll be adding support for more native integrations in the future.
How to Create a Simple WordPress Contact Form Using Basin
If you want to create and mange WordPress forms without relying on existing plugins, you’ll need to write your own custom HTML form code and then connect it to Basin.
In the guide below, we’ll show you how to quickly setup a simple WordPress contact form on your site using Basin.
Step 1: Create a New Basin Form
basin_create_form.png184.12 KB
First things first — you’ll need a Basin account. Our Free plan is perfect for testing and personal use. Go to our sign up page to create your account. Once you are logged in, create a new project. Projects are great for organizing multiple forms that belong to the same website.
After you create a project, create your first form. Your new form will have a unique endpoint URL that we’ll add to your custom form code in a later step. If you just need a simple form with basic fields, we provide a ready-made example with the endpoint included.
Now let’s hop over to your WordPress dashboard to begin the implementation process.
Step 2: Add Custom HTML Block to Page/Post
wordpress_custom_html_block.png173.38 KB
WordPress lets you add custom HTML blocks to any page or post, which is all we need to setup our example contact form. In your WordPress dashboard, simply navigate to the page / post that contains your form (or create a new page / post if needed).
In the page / post edit interface, add a new block by clicking the “+” button and searching for “HTML”. Choose the 'Custom HTML' option.
With the custom code block added, we’re ready to plug in our form code.
Step 3: Copy / Paste Your Form’s HTML Code
basin_example_form_code.png104.22 KB
Back in Basin, navigate to your form’s setup screen and copy the ready-made example code. If you want to use your own form code instead, you just need to copy the form action line that includes your form’s unique URL endpoint.
With our form code in the clipboard, we can hop back over to WordPress and add it to our new custom code block.
wordpress_form_code_copy_paste.png180.44 KB
Paste your new form’s HTML code into the block. If you used our example code, you will already have the action set to your form’s unique endpoint URL and the method parameter set to “POST”.
If you used your own form code instead, be sure to set the form action and method to the appropriate values.
Your new form is ready to be published and start accepting submissions.
Step 5: Publish & Test Your Form
wordpress_form_submit.png111.92 KB
After you publish the changes to your WordPress website, visit the page/post where your form is located and submit a test entry. After you hit the submit button, you'll be redirected to Basin's default submission success page...
basin_form_submission_success.png142.6 KB
...and the data will be sent to your form’s submission dashboard in Basin and safely stored there until you decide to delete it.
And that’s it! You now have a working custom WordPress contact form powered by Basin.
With just a few lines of code, Basin will handle all of the form submissions on your WordPress website without the performance overhead of a third party plugin. Pretty sweet, huh? :)
You can use our Free plan with 100 submissions a month for as long as you’d like, and as you grow and need access to more advanced features, you can upgrade at any time.
Anthony is one of the technical co-founders of Basin. He is an avid programmer and outdoorsman. You can reach him at @AnthonyPenner and anthony@usebasin.com
Get Started with a Free Basin account today!
Discover the benefits of Basin and how it can help streamline your forms. Sign up now and explore our features.
