In this article, we will show you how to create the really really simple front end post form. Here’s what we will achieve after following this tutorial:
- Make a simple front-end post form, without coding.
- Guest post allowed
That’s it, don’t ask why it’s so short, b/c it’s simple!! 😉
Let’s get started.
We will assume that you have read the prerequisites post, about installing the independent plugin.
If you didn’t, you can read about it in this article: https://catsplugins.com/knowledge-base/frontend-submit-pro/prerequisites-before-you-start/
Step 1: Create Post Type
We need to create a custom post type, by doing so, we will have to have a place to store the posts after we submit.
Please see the picture below:
After installing the CPT UI plugin, you will have a new section on admin sidebar, click on “Add/Edit Post Type”
At the Basic Settings fields, we need to put the required information to create the first custom post type
Here’s the result after creating the custom post type by CPT UI
That’s it, we have created the custom post type, called “Real Estates” for our website. Let’s move on to the next part.
Step 2: Create a Frontend Real Estate Ads Form
Head over to Field Group section on your admin sidebar, then click on Fields Groups
Then you click on Add new button
To have a smooth flow, we will break into 3 parts.
- Part 2.1: Create the custom field
- Part 2.2: How to use User Frontend Submit PRO settings
- Part 2.3: Select where the fields will be affected to
Let’s move on.
Part 2.1: Create Custom Fields
You might have heard about meta box or the custom meta, or more familiar is “custom fields”.
By default, when you create the post types, we only have the commons fields like title, content, tag, category.
But to make it more and more suitable for your business, like RealEstates advertising, then we have to add more data to the post. So, we have the custom fields.
They just like the title or content default field, but serve your specific purpose.
After click on Add new button, you will see a screen like this:
At first, we have no fields appear at the table, so we need to create our fields, depending on your business, you will create the specific fields. Here’s ours:
If you find something different about the “Field Types“. Like, you do not have repeater field type. Check out this article to see why
Part 2.2: User Frontend Submit PRO Settings
We have a lot of settings to serve the multipurpose, but for each example, we will only show you some, so you will have a faster kick start and better understanding.
After going through all the examples, you can use the plugin from A to Z.
So, when you scroll down a little bit, you will see a green panel. Here’s it:
Please follow the below checkpoints, one by one:
- Form Display: Switch to On (so the plugin will know and use the field group you have created as the form)
- Form Type: Select the Frontend Post Submission.
- Redirect after submission: Select type of redirection, either redirect to a Page, Edit Page, to the specific URL or newly created post.
- Page: For each the select of redirection, you will get a specific setting, in this case, we select “page”, so the plugin will show you all the pages in your website to redirect to.
- Enable Payment: Switch to Off
- Enable Guest Posting: Switch to On
Next, click on Form Settings tab
We need to focus on 2 things:
- Custom post type: Select the post type we just created, here we selected “real_estate”
- Edit page: The edit page, when the user clicks on edit post, after submit, they will be redirected to that page.
That’s it for step 2.2, continue will be a simpler step.
Step 2.3: Select where the fields will be affected to.
You will scroll down a little more, and find Rules section
At this section, you will need to select again the post type that the fields will be shown.
To explain you understand:
- Select custom post type at the previous 2.2 step, you will let the plugin know where to store the posts to, after user submit.
- Select post type at Rules section, it will allow you to show the field in the backend, too, to let you edit the submitted post if needed.
Step 3: Paste the shortcode and testing
That’s it, now we will copy the shortcode and create a page to put the shortcode in. Then we will see the demo.
By click on Add Shortcode (1) in image, you will see a popup with the options, follow the step and click Add, you will have the shortcode form, showed as (2) in the image.
Here’s our result:
Check out the live demo here
That’s it, hope you understanf the full flow.