How to add a front end submission form to WordPress using Elementor and Piotnet forms

One of the best ways to build your website is to add a front end submission form so other people can add content to it. It works for Facebook! Here's how to do it with WordPress.
Share on email
Share on whatsapp
Share on linkedin
Share on reddit
Share on facebook
Share on twitter
This content is FREE. But when you buy through my referral links I earn commission.
Table of Contents

I needed a form on one of my websites where people can submit posts for me to review and add to the site.

The form contains a title, description and featured image field, as well as a name and email field. Finally, I also added a checkbox so the person submitting the form can opt in (or not) for a newsletter.

I added the form to another site of mine which is no longer in use, so don’t stress about what the pictures display. The important thing is that you need a self-hosted WordPress installation.

For this to work you must use Elementor, a popular WordPress page builder, and Piotnet, a plugin specifically for Elementor.

Let’s go through the process step-by-step so you can see how easy Elementor and Piotnet forms are to use and how powerful the system is.

If you don’t know about Elementor, you should. It’s a phenomenal page builder, along the same vein as Beaver Builder and Divi. But Elementor outshines both of them.

Who is this for?

For people who want to offer website visitors an opportunity to post articles to your site.

This form also comes in handy for posting from your phone if you don’t have the WordPress app installed or XML-RPC disabled.

Say you’re away from your computer and you see something you want to write an article about.

Snap a quick pic with your phone, visit the page on your website where you’ve set up the form on your mobile browser, add the details and choose the picture you snapped from your library.

You don’t have to be logged in to post.

You can set the form to post immediately or to be moderated.

The concept

Create a publicly visible page with a form where anybody can submit an article for review.

Once the article is submitted admin is notified and can approve or reject the article, or make changes before approving.

You must buy the Piotnet Pro version for this powerful functionality.

Log in

You must be logged into WordPress from here on in.

Note: I use the WordPress classic editor, not Gutenberg. It doesn’t matter, however, since you’ll be using Elementor, which overrides the classic editor and Gutenberg.

Activate Piotnet’s form builder

Once you’ve installed Piotnet you can activate it like you would any other WordPress plugin.

Once you’ve activated it, activate the Pro version by following these steps.

Click On Piotnet Addons In The Left Hand Sidebar
Click On “Piotnet Addons” In The Left Hand Sidebar.
On The Plugin Page, Add The Username And Password You Used To Create Your Piotnet Account With When You Bought Their Plugin, Then Click Save Changes
On The Plugin Page, Add The Username And Password You Used To Create Your Piotnet Account With When You Bought Their Plugin, Then Click “Save Changes”.
Activate The Necessary Piotnet Components To Get Going With Front End Submission Forms
Activate The Necessary Piotnet Components To Get Going With Front End Submission Forms.

Some of the features I activated aren’t necessary for a standard front end submission form. But I activated them in any case because I’ll probably use them later.

Now you’re set to create your first submission form with Piotnet and Elementor!

Create a page

In the back office, hover over “Pages” and click “Add New”.

Your WordPress install might look completely different from mine, but where it concerns adding a page it should be exactly the same exercise.

In The Back Office, Hover Over Pages And Click Add New
In The Back Office, Hover Over “Pages” And Click “Add New”.

You can name the page anything you like. Let’s call it Submit an article.

Add A Title. In This Case, Submit An Article
Add A Title. In This Case, “Submit An Article”.
Click The Publish Buttton
Click The “Publish” Button.

Activate Elementor for the page

You’ve created a page, but now you need to use Elementor to build that page, not the classic editor or Gutenberg.

Click The Edit With Elementor Button
Click The “Edit With Elementor” Button.

Now you’re in the Elementor Editor screen.

I’m making the page take on Elementor’s full width setting. It’s not necessary, but follow along if you want to do it.

Click On The Tiny Settings Gear In The Bottom Left Corner
Click On The Tiny Settings Gear In The Bottom Left Corner.
Under Page Layout, Click The Dropdown And Choose Elementor Full Width
Under “Page Layout”, Click The Dropdown And Choose “Elementor Full Width”.

It should update the page automatically.

Add a section where the form will go

Elementor works with sections that build from top to bottom. You must create a section if you want to add a widget or other element.

Click The Plus Button
Click The Plus Button.
Select A Structure. A Single Column Layout Will Suffice
Select A Structure. A Single Column Layout Will Suffice.
This Is What The Single Column Should Look Like
This Is What The Single Column Should Look Like.

Let’s make the form narrow so it doesn’t splay across the whole of the page on desktop.

Make Sure The Section You Want To Narrow Is Selected
Make Sure The Section You Want To Narrow Is Selected.
In The Left Hand Sidebar, Under Layout, Set The Content Width To 600
In The Left Hand Sidebar, Under “Layout”, Set The “Content Width” To 600.

Now the form won’t stretch wider than 600 pixels.

Create a Piotnet field

It’s time to start creating the form.

Click The Nine Dot Button
Click The 9 Dot Button.
Scroll Down The Left Hand Sidebar Until You Reach The Pafe Form Builder Section
Scroll Down The Left Hand Sidebar Until You Reach The “PAFE FORM BUILDER” Section.
Hover Over The Field Button
Click And Hold The “Field” Button.
Drag The Field Button All The Way To The Box You've Created For It
Drag The “Field” Button All The Way To The Box You’ve Created For It.

The left hand sidebar now changes to show you the settings for the PAFE form field you’ve just dropped into that box.

Give the form a unique Form ID

Every Piotnet form field you create must share the same unique Form ID to mark them as belonging to the same form.

Although Elementor Pro’s built-in form is a cohesive structure that comes with preset layouts, it doesn’t have many layout options.

Piotnet’s form is slightly more tedious to put together, but your form elements could be in different places all over the page. As long as the unique ID is present in each field it’ll be seen as part of the same form.

I've Given This Form A Unique Id Of Article Sub Form
I’ve Given This Form A Unique ID Of “article_sub_form”.

Add category selection

There are three categories to choose from. Let’s add it so the form submitter can choose which category he’d like to post his article to.

The first field we’ve added automatically defaults to a Text field.

Let’s change it to drop down that shows the site’s categories.

You can allow the submitter to choose multiple categories, but I like to keep things tight with my categories and tags, so I’ll only allow the submitter to choose 1.

Add A Field Id Of Cal Select, Change The Type To Terms Select, Make The Label Choose A Category And Switch Off Autocomplete
Add A “Field ID” Of “cat_select”, Change The “Type” To “Terms Select”, Make The “Label” “Choose A Category” And Switch Off Autocomplete.

That’s your first field done.

Create an email field

Because we want the submitter’s email address, we must change the details accordingly.

But we won’t create a new field. We’ll duplicate the “Category Select” field.

Once it’s copied we’ll add some details…

Below The Form Id, Inside The Field Id, Add Email Address And Set The Type To Email
Below The “Form ID”, Inside The “Field ID”, Add “email_address” And Set The “Type” To “Email”.

You’ll notice Piotnet automatically adds its own shortcode, based on your “Field ID” text.

Add A Label Called Email Address, A Placeholder, Set To Autocomplete, Make It A Required Field And Show The Required Mark
Add A “Label” Called “Email address”, A “Placeholder”, Switch on “Autocomplete”, Make It A “Required Field” And Show The “Required Mark”.
This Is What The Email Field Looks Like On The Frontend
This Is What The Email Field Looks Like On The Front End.

The Placeholder, Autocomplete, Required and Required Mark settings are optional.

Create a name field

Just like we duplicated the “Term Select” field, we’ll also duplicate the email field and change its details.

Duplicate the email field

To Duplicate A Field, Hover With Your Mouse Pointer Over The Little Blue Square Of The Email Field The Choose Duplicate
To Duplicate A Field, Hover With Your Mouse Pointer Over The Little Blue Square Of The Email Field, Then Click “Duplicate”.
Now You've Got 2 Email Fields
Now You’ve Got 2 Email Fields.

Change the duplicated email field’s details

Select The New Field For Editing
Select The New Field For Editing.
Add Your Name To The Field Id, Set The Type To Text, Add Name To Label, Change The Placeholder And Leave Autocomplete, Required And Required Mark On
Add “your_name” To The “Field ID”, Set The “Type” To “Text”, Add “Name” To “Label”, Change The “Placeholder” And Leave “Autocomplete”, “Required” And “Required Mark” On.

Create an article headline field

If you want people to add articles to your website they’ll have to provide a post title, AKA headline.

As a matter of interest, Ogilvy said of the headline…

On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar.

Duplicate the name field

Duplicate The Name Field
Duplicate The Name Field.

Change the duplicated name field’s details

Here you can leave the Type to Text, since a headline is made up of plain text.

We’re calling the “Field ID” “title”, but we’re giving it a different label to make it easy for anyone to understand what the field is about.

You could give it a label like “Post title” but some people might not know what that means.

I’ve removed the Placeholder. I think it’s superfluous for a headline field.

Make Sure The New Field Is Selected Before Edting
Make Sure The New Field Is Selected Before Editing.
Add A Field Id Of Title, Keep The Type As Text, Add Article Headline As The Label, Remove The Placeholder And Leave The Other Settings As Is
Add A “Field ID” Of “title”, Keep The “Type” As “Text”, Add “Article headline” As The “Label”, Remove The “Placeholder” And Leave The Other Settings As Is.

Create a short description field

A post excerpt (AKA short description) is used as a summary of the article. It’s great for when someone shares your article to a social media platform. It serves as an intro, almost like a lede.

For the sake of clarity we’ll label this field “Short description”.

Note that the short description cannot be automatically mapped to the post excerpt.

That means you’ll have to manually add the short description to the post for the submitter.

Duplicate the article headline field

Duplicate The Article Headline Field
Duplicate The “Article headline” Field.

Change the duplicated article headline field’s details

You could use a normal “Text” field for the excerpt, but I changed the field type to “Textarea”. This gives a little more space for the intro.

There’s no need for a placeholder in this instance.

I changed the rows to two because you don’t want the excerpt space to look too large.

Make Sure The Duplicated Article Headline Field Is Selected
Make Sure The Duplicated “Article headline” Field Is Selected.
Add Form Post Excerpt To The Field Id, Change The Typre To Textarea, Change The Label To Short Description And Change Rows To 2
Add “form_post_excerpt” To The “Field ID”, Change The “Type” To “Textarea”, Change The “Label” To “Short description” And Change “Rows” To 2.

Create a long description field

The long description contains the meat.

What you’re reading here is part of the long description of this post.

The longer this is, given it’s quality content, the better.

Duplicate the short description field

Duplicate The Short Description Field
Duplicate The “Short description” Field.

Change the duplicated short description field’s details

I set the “Long description” field to type “TinyMCE” so the submitter can add some formatting if they wish.

Make Sure The Duplicated Short Description Field Is Selected
Make Sure The Duplicated “Short description” Field Is Selected.
Set The Field Id To Form Long Description, The Type To Tinymce And The Label To Long Description. Leave The Other Settings As Is
Name The “Field ID” “form_long_description”, Set The “Type” To “TinyMCE” And The “Label” To “Long description”. Leave The Other Settings As Is.

Create a featured image upload field

The featured image makes a big difference to archive pages. It also draws attention when the article is shared to social media.

Duplicate the long description field

Duplicate The Long Description Field
Duplicate The “Long description” Field.

Change the duplicated long description field’s details

Make Sure The Duplicated Long Description Field Is Selected
Make Sure The Duplicated “Long description” Field Is Selected.
Name The Field Id Form Featured Img, Set The Type To Image Upload And The Label To Featured Image. Make Sure Multiple Files Is Set To No. Leave The Other Settings As Is
Name the “Field ID” “form_featured_img”, set the “Type” to “Image Upload” and the “Label” to “Featured image”. Make sure “Multiple Files” is set to “NO”. Leave the other settings as is.

Add some anti-spam protection

Piotnet has honeypot functionality, which helps combat spam. You can also use reCAPTCHA v3 with their forms.

Let’s set up a honeypot field.

Duplicate the Featured image field

Duplicate The Featured Image Field
Duplicate The “Featured image” Field.

Change the duplicated Featured image field’s details

I give the honeypot field a random name, such as “Your last name”.

But you can call it whatever you like. The idea behind the honeypot is to send bots on a wild goose chase. They complete the honeypot field not knowing that it’s a trap.

The honeypot form field is not supposed to show on the form.

Make Sure The Duplicated Featured Image Field Is Selected
Make Sure The Duplicated “Featured image” Field Is Selected.
Name The Field Id Your Last Name, Change The Type To Honeypot, Add Your Last Name To The Label And Disable Show Label, Autocomplete And Required Mark
Name The “Field ID” “your_last_name”, Change The “Type” To “Honeypot”, Add “Your last name” To The “Label” And Disable “Show Label”, “Autocomplete” And “Required Mark”.

That’s the bulk of the form. All that remains is a submit button!

Add a submit button

Follow these steps to add a submit button to your Elementor Piotnet form.

Click The Nine Dot Button
Click The 9 Dot Button.
Scroll Down The Left Hand Sidebar Until You Reach The Pafe Form Builder Section
Scroll Down The Left Hand Sidebar Until You Reach The “PAFE FORM BUILDER” Section.
Click And Hold The Submit Button
Click And Hold The “Submit” Button.
Drag The Submit Button And Drop It Below The Featured Image Field
Drag The ‘Submit” Button And Drop It Below The “Featured image” Field.

The button is now in place, but it lacks functionality and styling.

Let’s make it functional first.

Add the form ID

Make Sure The Button Field Is Selected
Make Sure The Button Field Is Selected.
Add The Article Sub Form Form Id, Change The Text To Submit For Review, Change The Button Size To Medium And Choose An Icon
Add “article_sub_form” as the “Form ID”, Change The “Text” To “Submit for review”, Change The “Button Size” To “Medium” And Choose An Icon (in this case, thumbs-up).

Add submission functionality

In The Actions After Submit Section, Click Inside The Add Action Field To Reveal A Dropdown. Choose Submit Post
In The “Actions After Submit” Section, Click Inside The “Add Action” Field To Reveal A Drop Down. Choose “Submit Post”.

Add the form field ID’s to the submit button

You have to map each field to the correct box in the Submit Post section. But you have to create shortcodes for these inputs.

As mentioned earlier, you can’t map the short description to the excerpt. You’ll have to add it once you approve the submission.

Here are the (relevant) shortcodes we can create from the form field ID’s we created for each field:

  • Terms Select – [field id=”cat_select”]
  • Post title AKA Article headline – [field id=”title”]
  • Content field AKA Long description – [field id=”form_long_description”]
  • Featured image – [field id=”form_featured_img”]

You can also incorporate custom fields if you’re using ACF, Toolset or JetEngine, but we won’t be doing it here.

Choose Posts Post Type, Choose The Taxonomy, Add The Terms (categories) Shortcode, Choose Pending Post Status And Add The Necessary Shortcodes To Map The Submitted Form Fields To The Post
Choose “Posts” “Post Type”, choose the “Taxonomy”, add the “Terms” (categories) shortcode, Choose “Pending” “Post Status” And Add The Necessary Shortcodes To Map The Submitted Form Fields To The Post.

Choose “Posts” “Post Type”, add the “Terms” (categories) shortcode, Choose “Pending” “Post Status” And Add The Necessary Shortcodes To Map The Submitted Form Fields To The Post.Piotnet is super powerful. You can even add Stripe payments to the form. But that’s not the mission with this form.

Add style

Let’s make the button look a little better.

Make Sure The Button Field Is Selected
Make Sure The Button Field Is Selected.
In The Left Hand Sidebar, Click On Style
In The Left Hand Sidebar, Click On “Style”.

Change the background color

Change The Background Color
Change The “Background Color”.
Change The Border To Solid, Give It A Width Of 2px And Change The Color
Change The “Border Type” To “Solid”, Give It A “Width” Of 2px And Change The “Color”.
Click On Hover And Change The Text And Background Colors
Click On “Hover” And Change The “Text Color” And “Background Color”.

Add more information

You can add a title to the page, as well as some intro text to inform submitters what they can and can not do.

You can also change the form’s style to match your site.

There are many possibilities, and they’re all optional, of course.

Test the form

Whenever someone submits the form, two things should happen:

  • You must receive an email about it.
  • There must be a pending article in your WordPress back office.

Complete and submit

Let’s do it…

A Screenshot Showing The Form Input Before Submission
A Screenshot Showing The Form Input Before Submission.

When you click the button you’ll receive a success message or error message.

You could also add a redirect to the form, which is great for directing attention to an important issue or upselling the submitter once they’ve submitted the form.

Check the Posts section

Any post that’s been submitted via the form should be lying in wait in your WordPress back office’s Posts section.

Click On Posts In Your WordPress Back Office
Click On “Posts” In Your WordPress Back Office.
One Of The Test Post In The Back Office, Waiting To Be Checked I
One Of The Test Post In The Back Office, Waiting To Be Checked.

Check your email

You’ll also receive an email with the information that was submitted via the form.

Here’s a screenshot…

Screenshot Of Email Sent By Piotnet Form
Screenshot Of Email Sent By Piotnet Form.

Conclusion

Elementor gives you a powerful tool to build websites with and the Piotnet plugin adds serious kick to it.

It’s a great combo for getting WordPress front end submissions sorted.

I highly recommend it.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Get WordPress tutorials and online marketing tips delivered to your digital door

Scroll to Top
I won't spam you and you can easily unsubscribe any time you wish.