User Front-end Submit Pro Documentation

user-frontend-submit-pro-wordpress-plugins

User Frontend Submit – WordPress Frontend Post Plugin Overview

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 User Frontend Submit – WordPress Frontend Post Plugin?

Prerequisites – Before You Start

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 getting started to install the plugin. Please remember to install ACF first.

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

Optional Plugins

Besides, in this full guide documentation, we have 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!

Install User Frontend Submit – WordPress Frontend Post Plugin

You can read this post “How to install the dependent plugin

Frontend Create Post

How to create a 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: 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:

create a simple frontend post form 1

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

create a simple frontend post form 2

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

create a simple frontend post form 3

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:

create a simple frontend post form 5

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:

create a simple frontend post form 6

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:

create a simple frontend post form 7

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

create a simple frontend post form 8

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.

create a simple frontend post form 9

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.

create a simple frontend post form 10

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:

create a simple frontend post form 11

Check out the live demo here

That’s it, hope you understand the full flow.

Simple Pay Per Post Form

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:

Simple Pay Per Post Form

  • 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 the next tab, Payment Settings tab

Simple Pay Per Post Form 1

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.

Simple Pay Per Post Form 3

How To Create Simple Frontend Post Form with Subscription Feature?

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 the 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

How to create the packages

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

How to create the packages 1

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.

How to create the packages

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:

(Update)

Map Existing Custom Fields to Post Form

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.

Map Existing Custom Fields to Post Form

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

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 a front-end post form, then, the front-end post form will save the value to your current meta box, without any changes.

User Creation / Update

Updating content…

Extending UFSP

Updating content…

How to create and use User Frontend Submit PRO – Shortcodes?

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 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 currently 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]

Hooks & Filters

Available hooks and filters of User Frontend Submit PRO

User Frontend Submit PRO – Hooks List

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>'; 
}

User Frontend Submit PRO – Filter List

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;
}

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