Fluent Forms – Allow Users to Manage Forms on the Front-end

In this tutorial, we’ll show you how to manage Fluent Forms on the front-end.

You can use the Fluent Forms plugin to create a WordPress website where authorized users can create polls to collect information online. They will be able to create new forms, edit existing forms, read form entries, view statistics, etc., and all that will be done completely from the front-end.

This is a great way to create a web app for a client or to develop your own business idea and get money from people who come to your website to create and manage polls.

We’ll use the WP Frontend Admin plugin, which allows us to display any wp-admin page on the front-end. You can create beautiful front-end dashboards and web apps using WordPress plugins behind the scenes.

Once you install the plugin, follow these steps to allow users to create polls on the front-end:

1- Display the Fluent Forms page on the frontend

Normally, you have to go through a hard and time-consuming process to create a frontend page like this. But with WP Frontend Admin you can display the Fluent Forms page on the frontend by going to Fluent Forms > All Forms and clicking on View on the frontend.

WP Frontend Admin also works with WordPress page builders, here are some of them:

• Elementor
• Visual Composer
• Gutenberg
• Divi
• Beaver Builder
• WP Page Builder
• Page Builder by SiteOrigin
• Oxygen
• Live Composer
• Brizy
• Etc.

You can display the Fluent Forms page on the frontend using the following shortcode on any page:

[vg_display_admin_page page_url="admin.php?page=fluent_forms"]

Now you need to click Preview to see the forms page on the frontend.

2- Select the page’s basic information on the frontend

WP Frontend Admin will display the Quick Settings panel on the left side of the screen, so you can start configuring your frontend Fluent Forms page by selecting the following information:

• Page title
• URL slug
• Page template
• Add to this menu

3- Hide any unnecessary elements from your page

WP Frontend Admin allows you to customize the wp-admin pages displayed on the frontend by hiding any unnecessary elements.

This is great because you can use free plugins to build your web apps and hide any upgrade notices from the pages.

In this case, here are some elements you can hide from the front-end forms page:

• Fluent Forms text
• Upgrade to Pro button
• Support page
• SMTP page
• Integrations page
• Global settings page

To hide these and any other element:

1. Click Hide element
2. Click on the element you want to hide.
3. Repeat these steps for each element.

4- Edit all the texts to customize the page

Besides hiding all unnecessary elements, you can also edit any texts on the front-end page.

1. Click Edit texts.
2. Edit all the texts you want.
3. Click Stop editing texts.

The plugin will highlight all the texts that can be edited.

5- Save the changes and continue with other pages

Here are some last changes you can make to finish configuring your front-end forms page:

• Tick the Hide notices added by other plugins or themes checkbox.
• Tick the The users should see the posts created by them only checkbox.
• Click Save to apply all the changes.

You can continue editing other pages. For example, you can open the All Entries page and hide any unnecessary elements from it. Also, you can click the Add a New Form button and customize the add form page by hiding elements and editing texts.

6- Allow users to manage forms on the frontend

Once your Fluent Forms dashboard is published, the users with the “fluentform_settings_manager” capability will be able to manage forms on the frontend.

You can follow this tutorial to learn how to add that capability to any user role.

This is how your front-end fluent forms page will look

Note. The page design will depend on how you design it. You can use your own design, colors, etc.

This is the All Forms front-end page.

This is the Add a New Form front-end page.

This is the All Entries front-end page with the chart enabled.

This is the All Entries front-end page without the chart.

This is the Global Settings front-end page.

Important

You can add a log-out button to the navigation menu using this shortcode:

[vg_display_logout_url]

Just go to Appearance > Menus and add a new item as a custom link. Enter the shortcode in the URL field and the title in the Link Text field.

For the shortcodes to work as links in menu items, you need to install the Shortcode in Menus plugin.

Now your users will be able to create and manage Fluent Forms on the front-end.

WP Frontend Admin allows you to display any wp-admin page on the front-end to create front-end dashboards and wep apps based on WordPress plugins.