How To Build A Create Custom Posts Form

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to make a create custom posts form.

Preview

Description

How to create the Create Custom Post Form seen in the image above.

Difficulty

Medium.

Time

20 Minutes.

Step 1: Set It Up - Divi Form Module

Add the Divi Form Module to the page, post or template of your choice.

1.) Add the  Form Module from the Divi Form plugin.
2.) Add a Form Field Item giving it the Admin Name of "Custom Post Title."
3.) Add a Form Field Item giving it the Admin Name of "External LInk."
4.) Add a Form Field Item giving it the Admin Name of "Thumbnail Image."

Step 2: Set It Up - External Link ACF Field

I will assume that you have already created a Custom Post Type that you are wanting to use alongside this form. You will be using this form to allow users of your website to create posts associated with a specific Custom Post Type. In this example I have created a Custom Post Type called, "Climbing Equipment" and I would like users to add posts of climbing equipment with an external link to their website selling that specific climbing equipment.

1.) Give a title to the Custom Field Group assigned to the right Custom Post Type.
2.) Create a URL ACF field called "External Link."
3.) Make sure that the Field Group is assigned to the right Custom Post Type.

Step 3: Customize Our Settings - Divi Form Module Main Settings

Customize the Main Options of the Main Settings in the Form Module. Below are the important settings to follow to get the style of the Create Custom Posts Form shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

1.) Give your Form Module a Title.
2.) Give your Form Module an ID.
3.) Select from the Form Type dropdown the name of your Custom Post Type.
4.) Set the default posts status of each custom post.

Step 4: Customize Our Settings - Divi Form Module Form Fields

Customize each Form Field correctly. Below are the important settings to follow to get the style of the Create Custom Posts Form shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

Post Title

1.) Give the first Form Field a title like, "Custom Post Title."
2.) Set the ID.
3.) Select "Input Field" for the Form Type.
4.) In the Layout Options assign the Placeholder Text.
5.) In the Mapping Options select the "Post Default Field(Post/Page/Product..." as the Field Mapping Type.
6.) Map the data to the correct field which in this case is, "Post Title."

External Link

7.) Give the first Form Field a title like, "External Link."
8.) Set the ID.
9.) Select "Input Field" for the Form Type.
10.) In the Layout Options assign the Placeholder Text.
11.) In the Mapping Options select the "ACF Field" as the Field Mapping Type.
12.) Map the data to the correct ACF Link Field created in ACF.

Thumbnail Image

13.) Give the first Form Field a title like, "Thumbnail Image."
14.) Set the ID.
15.) Select "Image Upload" for the Form Type.
16.) In the Layout Options assign the Placeholder Text.
17.) In the Mapping Options select the "Post Default Field(Post/Page/Product..." as the Field Mapping Type.
18.) Map the data to the correct field which in this case is, "Featured Image."

Step 5: Add Custom Code

No custom code here.

Step 6: Conclusion

If you would like to style the button then please go to Appearance > Customize > Button. Lastly, create a Custom Loop Layout containing the Post Title, Thmbanil and View Post modules. Assign this Custom Loop Layout to the Archive Loop on the page of your choice. Now when your users create a custom post it will be assigned to this loop. All that you will need to do is to turn the custom post from draft to published and review that no spam has entered through.

More Support?

Please email us at [email protected] if you are unable to get Divi Form Builder working.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us