How To Add A Front End Submission Form To WordPress Using Elementor And Piotnet Forms

Front-end submission forms empower users to contribute content to your WordPress site without requiring them to log in to the WordPress dashboard. This is useful for accepting guest posts, user-generated content, or any scenario where you want to streamline the content submission process.

The Idea

Imagine a public page where anyone can submit an article. You receive a notification, review the submission, make edits if necessary, and then approve or reject it.

This setup is perfect for crowdsourcing content or for posting on the go. You could even submit a post directly from your phone by taking a picture and using the form.

The Tools

Here’s what you’ll need:

• WordPress (self-hosted): The self-hosted version from wordpress.org (not wordpress.com).
• Page Builder Framework (Optional): A lightweight theme optimized for page builders like Elementor. Any theme will work, but this one is recommended.
• Elementor (Free): The free version of the Elementor page builder is sufficient.
• Piotnet Forms (Paid): The premium Piotnet Forms plugin is required for its post submission capabilities. Note that this article focuses on *Piotnet Forms*, not PAFE.

You’ll need to be logged into WordPress. The type of editor doesn’t matter, as Elementor overrides it.

Activate Piotnet Forms’ Form Builder

First, install the Piotnet Forms plugin like any other WordPress plugin (Plugins > Add New > Upload Plugin). After installing, activate the plugin.

You will likely need to enter your license key for Piotnet Forms to activate its full functionality. Check the Piotnet Forms documentation for specifics on activation.

Add a New Page

In your WordPress dashboard, go to “Pages” > “Add New.” Give your page a title (e.g., “Submit an Article”).

Click the “Publish” button to save the page. Then, click the “Edit with Elementor” button to open the page in the Elementor editor.

Page Layout (Optional)

For a cleaner look, you might want to set the page layout to “Elementor Full Width” or “Elementor Canvas.” You can do this by clicking the gear icon (Settings) in the bottom-left corner of the Elementor editor, then selecting the desired layout from the “Page Layout” dropdown.

Add a Section for the Form

In the Elementor editor, click the plus (+) button to add a new section. Choose a single-column layout.

To control the form’s width, select the section, go to the “Layout” tab in the left-hand sidebar, and set the “Content Width” (e.g., 600px). This prevents the form from stretching too wide on larger screens.

Add Piotnet Forms Fields

Click the nine-dot icon (Widgets) in the top-left corner of the Elementor editor. Scroll down to the “Piotnet Forms” section in the sidebar.

Drag and drop a “Field” widget into your newly created section. *All fields in your form must have the same Form ID.*

Important: Form ID

Give all your fields the same “Form ID” (e.g., “article_sub_form”). This tells Piotnet Forms that these fields belong to the same form.

Creating the Form Fields

Now, let’s create the individual fields for your submission form. We’ll use the “Field” widget for each one, duplicating and modifying as needed.

Category Selection

Drag a “Field” widget into your section. Configure it as follows:

• Field ID: `cat_select` (or something descriptive)
• Type: Terms Select
• Label: Choose a Category
• Terms Type: Category
• Autocomplete: Off (This forces the user to select a single category)

Email Field

Duplicate the category field (right-click and select “Duplicate”). Change these settings:

• Field ID: `email_address`
• Type: Email
• Label: Email address
• Placeholder: Your email
• Required: On
• Required Mark: On

Name Field

Duplicate the email field. Update as follows:

• Field ID: `your_name`
• Type: Text
• Label: Name
• Placeholder: Your name
• Required: On

Title Field

Duplicate the name field. Change these settings:

• Field ID: `title`
• Type: Text
• Label: Article Headline
• Placeholder: (Leave this blank)
• Required: On

Short Description Field

Duplicate the title field. Configure as follows:

• Field ID: `form_post_excerpt`
• Type: Textarea
• Label: Short Description
• Rows: 2 (or adjust as needed)
• Required: On

Note: This field’s content will need to be manually added to the post excerpt after submission, as Piotnet Forms doesn’t have a direct mapping for this.

Long Description Field

Duplicate the short description field. Change these settings:

• Field ID: `form_long_description`
• Type: Textarea (or TinyMCE, if you want rich text editing)
• Label: Long Description
• Required: On

Featured Image Field

Duplicate the long description field. Update as follows:

• Field ID: `form_featured_img`
• Type: Image Upload
• Label: Featured Image
• Multiple Files Off
• Required: On

Anti-Spam Protection (Honeypot)

Duplicate the image field. Configure it like this:

• Field ID: `your_last_name` (or something similar)
• Type: Honeypot
• Label: Your last name (but hide it)
• Show Label: Off

The honeypot field is hidden from human users but is often filled out by spambots. Piotnet Forms can then identify and reject these submissions.

Adding the Submit Button

From the “Piotnet Forms” section in the Elementor widgets panel, drag the “Submit” widget below your form fields.

Set the “Form ID” to match the ID you used for all the fields (e.g., “article_sub_form”). Customize the button text (e.g., “Submit for Review”) and size.

Adding an Icon (Optional)

You can also add an icon to the button (e.g., a thumbs-up icon). In the “Button” section, click on “Icon” and select an icon from the library.

Configuring Submission Actions

This is where we tell Piotnet Forms what to do after a user submits the form.

Select the “Submit” button widget. In the left-hand sidebar, click on the “Actions After Submit” tab. Add a “Submit Post” action.

Within the “Submit Post” settings, map the form fields to the corresponding post elements using shortcodes:

• Terms: `[field id=”cat_select”]`
• Post Title: `[field id=”title”]`
• Post Content: `[field id=”form_long_description”]`
• Featured Image: `[field id=”form_featured_img”]`
• Post Type: Posts
• Post Status: Pending (This puts the submission in a draft state for review)

Adding Email Notifications (Optional)

You can also add an “Email” action to receive notifications when a new submission is received. Configure the “To,” “Subject,” and “Message” fields as needed. You can use shortcodes like `[field id=”your_name”]` and `[field id=”email_address”]` to include submitted data in the email.

Styling the Button

Select the submit button widget. Click on the “Style” tab in the left-hand sidebar. Customize the button’s appearance:

• Background Color: Choose a color that stands out.
• Border: Add a border if desired (e.g., 2px solid).
• Hover: Set different colors for the button’s hover state.

Testing the Form

Publish or update your page. View the page on the front end and test the form by filling it out and submitting it.

You should receive an email notification (if configured) and see a new pending post in the “Posts” section of your WordPress dashboard.

Adding a Success Message or Redirect

After a successful submission, you might want to display a thank-you message or redirect the user to another page. You can configure this in the “Actions After Submit” settings of the submit button widget. Add a “Redirect” action or a “Message” action.

Conclusion

Elementor and Piotnet Forms provide a powerful combination for creating front-end submission forms in WordPress. This allows you to easily accept user-generated content, guest posts, or other types of submissions.

By following this guide, you can create a fully functional form that streamlines the content submission process. Remember to regularly review and moderate submissions to maintain the quality of your site.