HeadstartWP – Add a form with Contact Form 7

Almost every website has a contact form, or at least on every site I create I get an explicit request to include one on the contact page. In WordPress the most popular plugins for adding a contact form are: Contact Form 7, Ninja Forms and Gravity Form. I personally use Contact Form 7 as it is free, widely used, up-to-date and easily extendable.

If you want to learn more visit the page on the repository:

Contact Form 7

Let’s get right to the point of this article, which promises to be quite meaty. I asked myself, “Can I install Contact Form 7 and add a Gutenberg block and have a form on my site built with HeadstartWP?” The answer is yes, but we need to write some code, in this article we see how to proceed.

Creation of the contact form
If we’re somewhat familiar with WordPress, and I’m assuming we are, we install Contact Form 7 from the backend, and create a Contact Form with this content:

In this article we are going to create and manage a simple solution that does not cover all cases, but only input or textarea with fields included in label tags.

Creating the page with the contact form
We now proceed to create a test page in which we are going to insert the Gutenberg block of Contact Form 7 and carefully select the form we have just created. The backend page will look like this:

While at the frontend we will see nothing but the title. Upon inspecting the code we will find something very similar to this:

So I googled a little and found that thanks to the Contact Form 7 form id that we find in data-wp-block we can take advantage of api made available at [backend]/wp-json/contact-form-7/v1/contact-forms/[cf7-id]/feedback. [ Here I owe some @props to this article where I found some very useful information and I recommend reading it for further study https://medium.com/@mahesh_joshi/wordpress-contact-form-7-rest-api-endpoints-bf45907b571c ] We can make a post request to the endpoint to send the email.

Let’s have a go at Postman
I assume you are all familiar with postman https://web.postman.co/, in any case just read the following paragraph. We set a POST on the endpoint [backend]/wp-json/contact-form-7/v1/contact-forms/[cf7-id]/feedback where [backend] is host url of our WordPress backend and [cf7-id] is the id of the contact form. By clicking on the send button we get the following response:

Side note, with Italian as the backend language the message was “Circuito di pagamento non supportato.” which is not the translation of the message that you have in English instead. If you want I have written an article on how to suggest the correct translations to WordPress.

We now go to the body tab and choose form-data and add value key all the fields required by the email:

By doing this you should get a similar response to mine with the status: "mail_sent" and receive the mail in your inbox.

So we have seen that it works in a very simple way, let us now move on to a very straightforward frontend implementation where we are going to leave out the input validation and spam filtering part for this phase.

Let’s get our hands on Blocks.js
Now to the main part of this article where we can get our hands a little dirty with some code. I would start, as always, by advising you to delve into the appropriate documentation https://headstartwp.10up.com/docs/learn/gutenberg/rendering-blocks/ as it is necessary to understand how the conversion of backend blocks to frontend components works in HeadstartWp.

To keep it very very basic, we can say that in the file src/components/Blocks.js the components inserted in <BlocksRenderer> are rendered if certain conditions are met.

In our case we are going to define a component called ContactFormBlock that we are going to render when a tagName div with class "wp-block-contact-form-7-contact-form-selector" is parsed. To this component we pass as props the html of the block. Thanks to this html we can retrieve the contact form id and with some regex also all input, label, name and type of input fields. I will give you the code in a few lines but right now I want to share with you two resources that I found very useful https://regex101.com/ and https://nextjs.org/docs/pages/building-your-application/data-fetching/building-forms.

Before I show you my lines of code let me tell you that, as we saw in the previous chapter, enctype has to be of type multipart/form-data and my advice is to take this code as poc and in case you want to take it into production, to first write a javascript function for the POST request in order to be able to validate and not have the POST page shown on submit.

Let us now look at the result:

Upon completing and clicking submit you will be shown this page with the mail_sent status and you will find that mail in your inbox:

As promised you will find all the code at this link https://gist.github.com/riccardodicurti/2bf7cafb419237a257975323588a8760, remember it is purely for demonstration purposes and far from being considered production ready. But keep reading the next paragraph as we have some conclusions to draw.

Conclusions
We have seen that the creation of a component linked to a Gutenberg block is not only possible but also very easy, but I want to point out that the solution developed so far is very rudimentary. If I were to develop a more stable solution I would most likely opt for the creation of a custom Gutenberg block that would pass all the necessary information for the creation of the component to me in json without having to make extensive use of regex. Besides, in this example we have skipped validation and spam verification altogether. Anyone who has a WordPress website knows how overwhelming the amount of spam can be if you don’t protect your contact form with a honeypot or recaptcha. May your code be bug-free.