menu-icon
Bit Assist Menu Icon

Breakdance Zero Theme

Meta Box Integrations

Estimated reading: 5 minutes 0 views

Bit Form Integration With Meta Box

Meta boxes are a great way to add extra functionality to a form, such as allowing your visitors to add comments or upload images. A meta box is a custom field that you can integrate into your WordPress form fields. They are especially useful when you need to add custom fields that do not come with the standard WordPress form in the backend. With Meta Box integration with Bit Form, users can easily integrate their form on a post or a page.

Create custom post type & fields using Meta Box plugin

Here, we will demonstrate an example of Properties to show how you can integrate meta box custom fields with Bit Form fields. Follow the below instructions:

1. For the Meta Box integration, make sure you have installed the Meta Box plugin successfully on your WordPress dashboard.

Metabox-plugin-Bit-Form

2. Create a post type according to your use case. Here we have already created a type Properties. Also created categories/type related to the post type- Commercial,ResidentialLand & Industrial.

Post-Type-Bit-Form
Categories-Bit-Form

3. As we have created Properties as a custom post type earlier, we will create some custom fields under the type.

4. Navigate to the Custom Fields option of Meta Box plugin & click on Add New to create a field group under your post type. Then set a name for the field group. Here we have created a new field group called *Properties Custom Fields**.

Add-New-Field-Group-Bit-Form

5. Create your required fields from the option Add Fields in terms of field type you want. Set the label of the field, basically which are required for your use case.

Add-Fields-Bit-Form

6. For the demonstration purpose, we have created four fields – Description ,LocationPrice & Gallery. Then go to Settings & set the location of the all fields you have created

Created-Fields-Bit-Form
Location-Bit-Form

7. Now, click on Publish/Update to save the fields settings.

note-icon-bit-apps  Note

All the field settings you have to set are related to your custom post type. Here we have shown you some demo field settings

Create a form using Bit Form

It’s time to create a form using Bit Form where you have to integrate the Meta Box custom fields created in the earlier steps.

1. After the Meta Box settings, navigate to Bit Form & click on Create Form. Then select Blank form.

Create-Form-Bit-Form

2. Drag & Drop a text field & name it as Post Title. Then select the other fields from the toolbar related to the custom fields you have created on Meta Box & set the fields settings similar to Meta Box settings. Here we have taken four fields – Drop-down field, File upload field, Text field & Number Field . For the drop-down field we have imported all the properties types from the taxonomy section. To import these we have selected the import option as Terms.

1Form-Bit-Form
Import-Taxonomy-Bit-Form

3. After completing all the field settings, save the form.

note-icon-bit-apps  Note

When you import any tag, categories or any other available taxonomies using the drop-down menu, If you want to link any taxonomy to the post then enable “Use Post Taxonomy Fields” option. It will automatically assign posts to taxonomies without field mapping

Integration Settings​

After finishing the form creation part, move to the integration part where you have to map Meta Box fields with Bit Form fields to create a post via form submission.

1. Follow the path: Settings => Integrations => Click on (+) => Click on ‘Meta Box’. Give a suitable name for the integration.

Settings-to-Integration-Bit-Form
Select-MetaBox-Bit-Form

2. After navigate to the integration page, select the Post Type you have created for the integration. For example we have selected Properties as custom post type.

Select-Post-Type-Bit-Form

3. Now , select Post StatusAuthor & Comment Status according to the requirement.

Select-Other-Bit-Form

4. For the field mapping option you have to configure three types of mapping –

Mapping-Bit-Form
  • At first map the form fields with the general/default post fields.
  • Then map the form fields with the related Meta Box fields.
  • Lastly map the file upload field.

5. Save all the integration settings.

Save-Bit-Form
Created-Integration-Bit-Form

note-icon-bit-apps  Note

Note: Greater Than, Less Than, Greater Than or Equal, Less Than or Equal, these conditions only work with the number field.

6. After completing the settings, you have to set the conditions when this integration works. Don’t forget to specify the integration name; otherwise, the integration will not work correctly. Here we have set the condition that – every time when records are created/ edited, on form submission the integration will be triggered. At last click on Update button.

CL-Bit-Form

7. Now, whenever a user will submit the data it will be posted as content on the created custom post type option. Admin can edit those data if needed. Also all the submitted data will be stored on the Form Responses page. Admin can view & manage those data.

CL-Bit-Form

8. Now, whenever a user will submit the data it will be posted as content on the created custom post type option.Also all the submitted data will be stored on the Form Responses page.

Input-Bit-Form
Post-Bit-Form
Edit-Page
Response-Bit-Form

9. Admin can edit those data if needed. Admin can view & manage those data. Edited data will be updated automatically both on the responses page & post.

Edit-Input-Bit-Form
Edit-On-Response-Bit-Form
Edit-On-Post-Bit-Form
Share this Doc
CONTENTS