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:

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:

• MB Custom Post Type: to create a custom post type for the contacts;
• MB Frontend Submission: to create forms that allow users to submit their information from the front end;
• Meta Box Builder: to have a UI on the back end to create custom fields;
• MB Admin Columns (optional): to display contact’s information in the admin screen.

1. Creating a custom post type for contacts

Go to Meta Box and 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.

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.

Go to Meta Box and create them.

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.

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.

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.

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.

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

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

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.

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.

As default, just 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.

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

Next, 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.

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.

Let’s check if the ones I 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_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.

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.

These are 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.

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.

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