How to Create a Contact Form with MB Frontend Submission

MB Frontend Submission is a powerful plugin to create forms for users to submit their posts from the frontend. At first, it was created for user-submitted posts. But do you know that the plugin can handle many kinds of frontend forms? In this post, I'll show you how to use it to create a contact form. You'll see how flexible it is and what it's capable of.

In order to reduce the coding, let's use the extensions of Meta Box to do other parts. We'll see it in each step below.

Step 1: Creating a custom post type for feedback

To store the contact message, let's create a custom post type feedback. A custom post type is useful for storing the messages, so you can view them later. Just in case your hosts don't send email well.

You can create a custom post type manually via function register_post_type. However, we have a plugin MB Custom Post Type to create custom post types and custom taxonomies. So why don't use it?

After installing and activating the plugin, go to Post Types → New Post Type and create a new post type called Feedback. Here is a screenshot of that:

You might leave the settings as they are. The only thing I change is the Supports meta box, which I choose only Title.

Now we have the custom post type ready, let's create a contact form for it.

Step 2: Creating a contact form

Creating a contact form is like creating a meta box for a custom post type. A contact form will have the following fields:

• Your Name
• Your Email
• Subject
• Message

You can create these custom fields with Meta Box easily by following this guide. However, to make it easy for future edits, we'll use Meta Box Builder extension. The extension helps us creating custom meta boxes via a drag-and-drop UI, without touching code. How cool it is!

So, after installing and activating the extension, go to Meta Boxes → Add New and create a new meta box with four fields above, like this:

To connect the meta box with the Feedback custom post type that we created in the previous step, go to Settings tab and select the Feedback post type as follows:

Note that you can also use the Online Generator to create form fields. However, it requires you to copy and paste the code into your theme's functions.php file or a PHP file of your plugin. Using Meta Box Builder, we don't need to do that.

Now our form is ready. Let's go to the main part - inserting the contact form in the frontend with the help of MB Frontend Submission extension.

Step 3: Inserting contact form in the frontend

We'll need the extension MB Fronted Submission to add our contact form to a page via shortcodes. This plugin has a shortcode [mb_frontend_form] that allows us to insert meta boxes in the post content, widget or anywhere in the frontend.

So, let's create a page Contact and insert our contact form with the following shortcode:

[mb_frontend_form id="contact-form"]

Here is the screenshot:

Now go to the page in the frontend and you'll see the form:

Just fill in some info and click the Submit button! Boom, your contact message has been sent!

Now go to WordPress admin area → Feedback and you'll see your message is there. Clicking on the message will show you full contact message:

Your contact form is ready for use. However, it just saves the data. As a contact form, we'll need it to send an email notification to admins. How to do that?

Step 4: Sending email notification

To send emails to admins after the form is processed, we need some coding. We'll use the hook rwmb_frontend_after_process to run our custom code to send an email. This has been documented quite well in the extension's documentation. So I just copied it here:

add_action( 'rwmb_frontend_after_process', function( $config, $post_id ) {
    if ( 'contact-form' !== $config['id'] ) {
        return;
    }
    $email = rwmb_meta( 'email', '', $post_id );
    $name = rwmb_meta( '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', "Reply-To: $email"];
    wp_mail( '[email protected]', 'New contact message', $body );
}, 10, 2 );

In the code above, I get the submitted info via the helper function and the parameter $post_id, which is the ID of the submitted post (feedback).

I also set some headers to send HTML emails and reply to the user's email.

Now our contact form is almost done. However, the admin list of all feedback looks not really professional. I'd love to improve it to show message info right on the list. Let's see how we can do that using MB Admin Columns extension.

Step 5: Improving the admin list screen

The MB Admin Columns extension is a really useful tool and is quite under-used. It helps you to create a professional admin list screen. So you won't see a default table with only title and date anymore!

This is how it looks at the end:

In order to do that, we just need to set some custom attributes for each field of our contact form. The attributes are described in the documentation of the MB Admin Columns page.

So basically, we will set the following:

• "Your Name" field: set it position "replaces title" column and change its title to "From"
• "Your Email" field: change its title to "Email" and set it position "before date"
• For other fields: set their position "before date", so "Date" column will be the last one

With the help of Meta Box Builder, this task can be done within a few minutes. Here is how I did for "Your Name" field, you can do the same for other fields as well:

Now go to Dashboard → Feedback and you'll see a better admin list page.

If you need more fields for your contact form, simply go to Meta Boxes and edit the meta box for the contact form. You don't need to change elsewhere, even the shortcode that you put on the contact page. Everything will be automatically updated. That gives you the ability to customize the contact form very quickly.

Conclusion

The process of creating a contact form might sound complicated at first, but it's the whole process that any contact form plugin must go through. I only break it down into parts so you can see them clearly and provide tools to complete each of them.

Instead of looking at the bundle of extensions that you have to use to create a simple contact form, I hope you can see this post as a demonstration of creating and processing forms on the front end. So you can apply the same techniques to your projects. If the post can be read and understand like that, I'm so happy! Let me know what you think in the comments.

• How to Create a Contact Form with MB Frontend Submission
• 4 Steps to Create Survey Forms in WordPress that Only Certain People Can Access
• Create a Subscription Form and Connect It to Mailchimp with MB Frontend Submission
• How to Create Online Admission Form for School or University