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.
It takes approximately ten minutes to knock together a frontend submission form using Piotnet. This video shows the whole process.
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.
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.
You’ll need the following tools to add a front-end submission form to your WordPress website:
- This is the self-hosted version of WordPress, not wordpress.com.
- Page Builder Framework.
- This is optional, but the Page Builder Framework is my WordPress theme of choice.
- You need Elementor because of the Piotnet plugin.
- This is probably the best WordPress form builder on the market. It requires Elementor.
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.
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!
Add a new page
In the back office, hover over “Pages” and click “Add New”. (You could do the exact same with a post, but this sort of form is something best added to a WordPress page.)
Your WordPress install might look completely different from mine, but where it concerns adding a page it should be exactly the same exercise.
You can name the page anything you like. Let’s call it Submit an article.
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.
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.
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.
Let’s make the form narrow so it doesn’t splay across the whole of the page on desktop.
Now the form won’t stretch wider than 600 pixels.
Add a Piotnet field
It’s time to start creating the form.
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.
Add category selection
We’ve created three post categories on our website. With this option the submitter can choose which category the post they’re submitting must be added 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 one.
That’s your first field done.
Add 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…
You’ll notice Piotnet automatically adds its own shortcode, based on your “Field ID” text.
The Placeholder, Autocomplete, Required and Required Mark settings are optional.
Add 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
Change the duplicated email field’s details
Add a title 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
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.
Add an excerpt (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
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.
Add a main content (long description) field
The main content is where the meat of the article goes.
What you’re reading here is part of the main content (long description) of this post.
The longer this is, given it’s quality content, the better.
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.
Add 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
Change the duplicated long description field’s details
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
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.
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.
The button is now in place, but it lacks functionality and styling.
Let’s make it functional first.
Add the form ID
Add submission functionality
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”, 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.
Let’s make the button look a little better.
Change the 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…
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.
Check your email
You’ll also receive an email with the information that was submitted via the form.
Here’s a screenshot…
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.