User Frontend Submit PRO – Full Guide

User Frontend Submit PRO is the multiple purpose form builder plugin, which allows you to make a frontend post form without access to the WP Dashboard.

You can create a rich diversity of classifying services on your website by allowing the user to add their ads on the frontend.

It’s not hard to build the form, just drag and drop, select the post type that user will post to, and even take money for each post if you want.

The main usage of User Frontend Submit PRO is creating the post/post type on the frontend without login, but you can create the other forms like the contact form or email subscription form by taking advantage of form builder feature.

How to install the plugins that you have bought from us.

Before we installing the plugin, we have to prepare for the materials that the plugin needed to run.

User Frontend Submit PRO is an add-on for Advanced Custom Field plugin, it can run with both ACF Free and PRO.

Prerequisites – Required plugin

So, before you getting started in install the plugin. Please remember to install ACF first.

To make it clearer, let’s make a list of prerequisite stuff:

• Must install Advanced Custom Field first
• Advanced Custom Fields must be 5.6 or above. See how to update ACF Free from 4.x to 5.x

Optional Plugins

Besides, in this full guide documentation, we have the several videos to help you follow easier.

In the videos, we used some plugins, which if you follow, you need to install to have exactly what we’ve shown.

Here’s the full list:

• CPT UI: Create the post types without coding.
• WooCommerce: We take advantage of WooCommerce’s payment gateway to accept money from front end post user’s

That’s it, now let’s install the User Frontend Submit PRO plugin!

If you’ve just installed WordPress then you’re probably looking for a way to install WordPress plugin that you need for your website. If that’s you then keep watching because in this video I’ll show you three methods that you can use to install a plugin on your site.

Fastest: Install WordPress Plugin by Plugin Dashboard

The first method is the easiest method and we will be using the WordPress plugin directory.

It sounds complicated but it’s really not.

• From your WordPress dashboard, you’ll look for the plugins area and you want to click add new.
• When you click add new it takes us to this whole area this is the WordPress plugin directory.

These are all the free plugins available that you can install on your site.

To find the one that you’re looking forward we want to search for the plugin, well do ACF For WooCommerce that’s a great additional plugin for WooCommerce that you can install.

Let’s go ahead and install it now and you have to do two things with any plugin.

You’ll want to install it but then you want to activate it which means you want to make sure that it goes live on your site and that you can utilize it.

Once you click to activate it’ll activate the plugin and each plugin will be different, for the ACF For WooCommerce, it will take me to the active page where you will active by the purchase code.

So that’s the first method and it’s by far the easiest but its also utilizing only the free plugins that are on the WordPress directory.

Slower: Install WordPress Plugin Section in Upload ZIP file

Now the next method is you’ve purchased a plugin and you’ve downloaded it from the plugin website.

You will need to upload it on your own so let’s do that next.

We want to go back over to our plugins area we can click add new again.

• Instead of doing the search plugins area we want to click on the upload plugin button.
• So well click upload and now we can choose the file and we need to search for it on our computer.
• From here you can either click Choose file or if you have it open you can left-click the zip folder and drag it and then you see it.

Once you choose the file you want to click install now and it will go through and install the plugin that you just uploaded.

Again once it’s installed you’ll be prompted to activate the plugin if you need to activate it right now

If you don’t want to activate it you can go to your installed plugins and you can see the status of them where we only have our ACF For WooCommerce activated you can tell by the blue background.

From the WP Plugin List you can activate any of them, you can also delete them, you can deactivate them if you don’t want to use that plugin anymore.

So that’s method two now method three is very similar to method two however instead of uploading it through our plugins admin area well be using an FTP client.

Slower a little more: Install WordPress Plugin by FTP

There are several FTP clients that you can choose from Ill be using FileZilla for this tutorial.

If you’re not familiar with FTP clients then you can view our FTP video on how to get started with that once you connect to your website make sure that you go into your plugins folder.

To do that I’ll show you.

• We’ll drill down into the public HTML.
• You need to go to wp-content that is where all of our themes and plugins are kept.
• Right here you see our plugins page and here are the three plugins that we have.

What you need to do is when you download your zip file from the website that you’ve purchased your plugin you’ll also need to unzip the file so that you can upload just the folder.

• So you see here I have my acf-for-woocommerce_v3.8.zip file so we need to right-click and extract all
• Browse where we want it to go

Now let’s go back to our FTP client.

• Going to right-click, refresh so you can see all of the items on the left panel, what you want to do is bring this folder and upload it over the right panel.
• You need to do is right-click, select upload, and now it will upload all of the folders into your plugins area on your website.

When it’s finished we can head back over to our plugins page and you’ll want to click refresh or just click the installed plugins again and when you do that you now see that the plugin that we just uploaded is here.

When you upload via FTP it automatically uploads but it does not activate so anything that you want to activate.

Make sure you come back over to your installed plugins area and activate the plugins that you need to.

That’s the simple way of how you can install a plugin on your WordPress website.

Video Source: Youtube

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.

To continue with the previous post about creating a simple frontend real estate post form, today we will learn about pay per post feature.

Pay Per Post is the feature that allows you to take money from the poster, who submit the ads to your site.

Because we have created the real estate post form already, we will make use of that form, change from guest post to pay per post feature only.

So, if you didn’t read, please read the mentioned link above first.

Enable Pay Per Post

Still at the edit field group page, you scroll down and notice to these settings:

• Enable Payment: Switch to On
• Select currency: Select the currency user will pay by
• Check out page: The page contain shortcode [acf_fb_checkout]
• Checkout failed: Any page if you want to show a message to the user when the payment failed, select that page

Now, we will move to next tab, Payment Settings tab

At this tab, we have:

• PayPal setting: email, sandbox key, production key, mode. See the requirements and how to setup here
• Stripe Settings: email, sandbox key, sandbox secret, production key, production secret, mode
• WooCommerce Payment Gateway Settings: title, description

If you want to use which payment gateway, enable that one and fill out the information.

Here’s the result, after user click submits, the user will be redirected to the checkout page and make a payment there.

Well, as in the previous feature, it was Pay Per Post, and the plugin also supports Subscription.

The name said it all! The subscription will help you sell your service as packages, in each package will have different post limit and feature.

In this section, we will go through the flow of subscription form, from creating the package to set up the form to final demo.

Each step will have its demo video or screenshot for better understanding.

What’s the package

The package or the pricing plan is created to help you sell the service with a recurring payment (monthly, yearly).

Each package will have a different feature, such as:

• Allowed post types
• Package price
• Total post allowed
• Package expiration date
• Max post allowed per day/week/month/year
• Number of Featured Post
• Number of VIP Post
• Package features in text

Step 1: How to create the packages

At your admin sidebar, click Packages, then click Add new, you will get a page like this:

You will see the various settings, set it as you want.

Step 2: Enable Subscription in Form Settings

Now, we head back to the real estate frontend form.

At the Payment Type setting, you will select Subscription instead of Pay Per Post.

• Package: SElect the packages you just created. Only who bought the packages you have chosen can use this form to post.
• Package style: We have the prebuild 4 styles of the package, select the styles that you want to show on the frontend.

and save it!

Here’s our result:

In the favorable case, we will use the plugin with a totally new custom post type, and we have nothing to talk about.

But, some cases, when you buy the theme with pre-built meta box (includes meta_key), and now you switch to use our User Frontend Submit PRO plugin, but want to map with the current meta_keys so the system will run as we haven’t touched anything.

That’s the ideal case, and I will show you how.

Continue with the pre-built form of real estates frontend post form, we just need to change something.

We will need to focus on 3 points:

• What’s the current meta_keys
• Map with the current meta_keys
• Disable/enable field group effects on the backend.

Hold my beer and let’s get started.

Step 1: Find the current meta_keys

To find the meta key for each field in your meta box, you will:

• Point the mouse to that field
• Right-click and select “Inspect Element”
• Find “name” attribute in the source code, that’s the meta key.

Step 2: Map with the current fields

In this step, we will map the just found meta_key in the source code, with our custom field, so that when the user creates the posts from frontend, the value will be saved to your current form field.

To do that, navigate to your field group setting, and expand the field setting.

On the screenshot, you will see I have select “Meta Field” at Form Field Type option.

That’s it. Next step, disable in the backend.

Step 3: Only work for front-end form

At the field group setting, you scroll down a little bit, you will see the “Settings” section.

Then, you will switch off the “Active” setting.

This will help you only use this field group for front-end post form, else, at your edit post in the back-end, you will see 2 duplicate meta box, 1 from your theme, and 1 for the ACF field group here, that’s not we want, right?

We only want the ACF field group work with front-end post form, then, the front-end post form will save the value to your current meta box, without any changes.

Updating content

Updating content

Here are the available shortcodes that you can use in any case for your business.

Each shortcode will have its attribute, and the explanation as well as a note to that one.

Frontend Post Form Shortcodes

Create new post

This shortcode will show the front-end post form with the field group ID you specified.

• Attribute group_id is required

Example:

[cats_form group_id="197"]

Edit post

This shortcode will render the edit form.

• Attribute group_id is optional
• Attribute post_id is required

[cats_edit_form group_id="1" post_id="1"]

Your either can use attribute post_id in the shortcode, or on the URL. This will be useful if you create the edit link for each post and redirect to the edit page with post_id param included

Post list

This shortcode will show you the table of posts that created by the current user.

I.e: A customer logged in, and he can see all his posts on the frontend.

• Attribute post_type is required
• Attribute post_status is required
• Attribute show_all_posts_for_roles is optional

[cats_posts post_type="post" post_status="draft,pending,private,publish" show_all_posts_for_roles="administrator"]

If you’re the admin, and you wish to manage all the posts of the user on the frontend, then use show_all_posts_for_roles for administrator role.

You do not need to use attribute show_all_posts_for_roles when showing posts of a specific user

Packages List a.k.a Pricing Table

This shortcode will show you the pricing table with the pricing package you specified. The packages mean the customer will subscribe to your website.

It will be useful in case you want the user to buy the package separately, then posting at another time.

Because if you enable the subscription feature in the form, then you do not need to use this shortcode, as the plugin will show the packages automatically, and force the user to buy packages before allowing the customer to post.

• Attribute id is required (it’s the ID of the package)
• Attribute  style is required (from 1 to 4)
• Attribute column is required (from 1 to 6)

[cats_package id="396,395,394" style="style-1" column="1"]

If you use this shortcode, it will take the payment settings from the global ACF FB setting page. Please set the information there first, before using this shortcode.

Check out page

This shortcode will render the checkout page, with the information of current pay per post or subscription, like pricing, the name of package….etc

This shortcode has no attribute.

[cats_checkout]

You do not need to create the checkout page, as when you activate the plugin for the first time, it will create the page for you automatically.

User’s Shortcodes

User Create Form

Since the plugin allows you to create the user as well, so, you can use this shortcode with the field group ID (of course you have to set the options in the form set to have the ability to create user).

• Attribute group_id is required

[cats_user_regist group_id="1"]

Edit User Profile

This shortcode will render the form just like the create user form but without the field group attribute.

Example usage:

You just need to create a page, called “Edit Profile”, and then add to your menu bar, so, when the user clicks on that, you will render the edit form. Easy!

[cats_user_edit]

User Profile

This shortcode will show you the user profile with the pre-built template.

• This shortcode has no attribute

[cats_profile]

User’s Transactions

This shortcode will show you a table with the detailed transactions of the current logged-in user.

[cats_user_transaction]

User’s packages

This shortcode will show you the packages that the logged-in user purchased, it will have: name of the package, expire date/time, remaining post, renew button.

[cats_user_packages]

Available hooks and filters of User Frontend Submit PRO

acf_fb_before_render_form

Since version 2.5: Add HTML or do your own custom action, before the frontend post form is rendered.

Example Code

Add an HTML message before the form is rendered

add_action('acf_fb_before_render_form', 'message_before_form_rendered');
function message_before_form_rendered(){
    echo '<div class="custom_message">Welcome</div>'; 
}

acf_fb_after_render_form

Since version 2.5: Add HTML or do your own custom action, after the frontend post form is rendered.

Example Code

Add an HTML message before the form is rendered

add_action('acf_fb_after_render_form', 'message_after_form_rendered');
function message_after_form_rendered(){
    echo '<div class="custom_message">Good bye!</div>'; 
}

acf_fb_before_render_purchased_package

Since version 2.5: Add HTML or do your own custom action, before the user’s package shortcode is rendered.

Example Code

Add an HTML message before the form is rendered

add_action('acf_fb_before_render_purchased_package', 'message_before_package_rendered');
function message_before_package_rendered(){
    echo '<div class="custom_message">Welcome!</div>'; 
}

acf_fb_after_render_purchased_package

Since version 2.5: Add HTML or do your own custom action, before the user’s package shortcode is rendered.

Example Code

Add an HTML message before the form is rendered

add_action('acf_fb_after_render_purchased_package', 'message_after_package_rendered');
function message_after_package_rendered(){
    echo '<div class="custom_message">Good bye!</div>'; 
}

Filters

acf_form_types

Since version 2.5: register new custom form type

Param

$form_types (required): all the form types are defined via this variable, your custom form type will have slug and text

Example Code

Register new custom form type for creating a contact in AgileCRM.

add_filter('acf_form_types', 'add_new_form_type');
function add_new_form_type($form_types){
    $form_types['agile_crm_connector'] = 'AgileCRM Connector';
 return $form_types;
}

acf_currency_options

Since version 2.5: register new currency

Param

$currency_options (required): all the currency via this variable, your custom form type will have currency code (ISO) and Currency name

Example Code

Add new currency code of Vietnam currency

add_filter('acf_currency_options', 'add_new_currency');
function add_new_currency($currency_options){
    $currency_options['VND'] = 'VietnamDong';
 return $currency_options;
}

acf_frontend_post_html_before_fields_form

Since version 2.5: add the custom field to your demand before form

Param

$html_before_fields (required): all the custom field before form’s field is rendered.

Example Code

Register new custom form type for creating a contact in AgileCRM.

add_filter('acf_frontend_post_html_before_fields_form', 'add_new_fields');
function add_new_fields($html_before_fields){
 $html_before_fields .= '<input name="custom_field_form" type="hidden" value="your_value_here" />';   
 return $html_before_fields;
}