How to create simple frontend post form

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:

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.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href=""> <abbr> <acronym> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Send a Message