Skip to main content

Creating a contact form using Meta Box

The contact form makes it simple and reliable for anyone to leave their information for buying your product, looking for consulting, or just contacting your brand. And you know what, Meta Box can help you create a contact form in WordPress very easily.

I made an example with the most popular form as you can see in the Contact page:

Contact forms page

Video version

Preparation

To get started, we need the Meta Box core plugin to have the framework for creating a custom post type for the contacts and custom fields for the form. You can download it directly from wordpress.org.

For the advanced features from Meta Box, we need some of its extensions:

1. Creating a custom post type for contacts

Go to Meta Box and create a new post type to save the contacts.

Create a new post type to save the contacts

After that, you will see a new menu for the post type in the admin dashboard.

A new menu for the post type in the admin dashboard

2. Creating custom fields for the form

My form will have some fields as below. In your own case, you may have any other kind of field for users to fill in information. Meta Box has more than 40 field types that can meet your needs.

These are some fields that I created

Go to Meta Box and create them.

Go to Meta Box and create custom fields

You should set some or all the fields as required, and show them as an admin column to have a clear overview of all the contact information in the admin dashboard.

Set some or all the fields as required, and show them as an admin column

If you want to set this field display as the Title, you can set this option as Replace, and title. It helps to display the field in the place of the title in the admin dashboard, not replace the data saved in the title.

Set this field display as the Title and set this option as Replace

In the event that you want the name filled in the field to be the title of the post, you should replace the ID of this field to post_title.

You should replace the ID of this field to post_title

After creating all the wanted fields for the form, move to the Settings tab, set the Location as Post type, and select Contacts to apply these fields to it.

Select Contacts to apply these fields

Now, when adding a new post on the Contacts post type, you’ll see the fields.

The Fields after adding a new post on the Contacts post type

After filling in the information, you will see the information display on the admin dashboard as well.

The information display on the admin dashboard

But, this form is just in the backend now. Users must access the admin page to fill in the form. So, we should bring it to the frontend.

3. Displaying the form

Create a page for the Contact page as usual.

Create a page for the Contact page

I will bring the custom fields as the form into the content section of this page. So, look for a block named Submission Form. This block is available only when you activate the MB Frontend Submission extension from Meta Box.

Look for a block named Submission Form

As default, just the Title and Content fields display.

The Title and Content fields display

To have the fields on the page, move to the block’s settings, and fill in the ID of the field group that we created for the form. All the fields will be displayed immediately.

 Fill in the ID of the field group to have the fields on the page

I recommend you turn on the option ‘Enable ajax submission’. It helps to avoid refreshing the entire page during the submitting process.

Turn on the option ‘Enable ajax submission’

Next, choose the post type as Contact to stipulate that the submission will be saved as a post in this post type.

Choose the post type as Contact to stipulate that the submission will be saved as a post in this post type

You also can remove the Title and Content field since we do not need them for the contact form.

Remove the Title and Content field

These notification texts also can be changed as you want.

These notification texts also can be changed as you want

Now, go to the page on the frontend. You'll see the form with the custom fields we created.

The form with the custom fields we created

Let’s check if the ones I fill into the form are saved or not.

Fill into the form are saved or not

It works perfectly!

4. Sending email notification

Whenever someone submits the form, the website’s admin should notice it. You can set it to automatically send them an email to notify it.

We should add some lines of code in the theme’s file.

Add some lines of code in the theme’s file

add_action( 'rwmb_frontend_after_process', function( $config, $post_id ) {
if ( 'contact-form' !== $config['id'] ) {
return;
}
$email = rwmb_meta( 'your_email', '', $post_id );
$name = rwmb_meta( 'your_name', '', $post_id );
$subject = rwmb_meta( 'subject', '', $post_id );
$message = rwmb_meta( 'message', '', $post_id );
$body = "<p>Name: $name</p>
<p>Email: $email</p>
<p>Subject: $subject</p>
<p>Message: $message</p>";

$headers = ['Content-Type: text/html; charset=UTF-8', 'From: My Site Name <[email protected]>',"Reply-To: $email"];
wp_mail( '[email protected]', 'New contact message', $body,$headers );
}, 10, 2 );

This means that we'll add the hook rwmb_frontend_after_process to run our custom code to send the email.

Add the hook rwmb_frontend_after_process to run our custom code to send the email

In the email, I want to let the admin know the contact information, so I will get the data submitted to the fields using the rwmb_meta() function.

Using the rwmb_meta()  function to get the data submitted to the fields

These are the IDs of the custom fields that we’ve just created for the form.

The IDs of the custom fields that we’ve just created for the form

These following lines of code are to display that information in the email.

Following lines of code are to display that information in the email

This line is to set the type of email, how it displays the sender name, and how to reply.

This line is to set the type of email, how it displays the sender name, and how to reply

'[email protected]_' is the receiver's address who will receive all the notifications about every submission. It should be the email of the admin or anyone who manages the contacts.

The receiver's address who will receive all the notifications about every submission

From now on, whenever someone submits the form, they will see a new contact in both the admin dashboard and their inbox.

A new contact will display in both the admin dashboard and their inbox