piotnet forms and front end post submission

Almost every WordPress site needs form functionality and Piotnet Forms is an attractive choice. Piotnet Forms started off as a popular addon for Elementor but then a standalone plugin was created and now Piotnet Forms is releasing version two. Some features of the new version include an updated user interface, enhancements to multistep forms, easier styling, and a library of pre-designed form templates. In this post we will first have a quick tour of Piotnet Forms and then put it through its paces by creating a front-end post submission form for a Custom Post Type.

Video Version

Here is the video walk-through of Piotnet Forms.

Piotnet Forms Website

There is a free version of Piotnet Forms in the WordPress plugin directory. This version is pretty limited, but good for testing out the user interface if you want to get a feel for the plugin before purchasing.

piotnet forms website

From the website you can create an online demo site, view the documentation and pricing. It is surprising that there is no list of features. Also, Piotnet Forms has a good number of third party integrations and it surprised that these are also not listed. The document library has pretty good cover of of the features and functionality. The best list of features and integration is found by looking at the advanced features part in the documentation. Piotnet Forms comes with 30 field types and support for Advanced Custom Fields, Meta Box, Pods, Toolset, and JetEngine.

piotnet forms docs features

The lifetime unlimited sites package of Piotnet Forms is very attractively priced, especially considering the good number of features.

piotnet forms pricing

Test Site, Installation and Admin Menus

I have a test site using the Kadence Pro theme and Kadence Pro blocks. There are a number of demo posts and a Custom Post Type “Books” that was created using CPT-UI and Advanced Custom Fields.

test site

Although there is a free version of Piotnet Forms available, you will be happy to know that it is not required to run the pro version. Also, there are no addons. Just one plugin is required. Once it is installed, activated, and you have entered your license, you have a new menu area in the admin.

piotnet forms admin menu

From the bottom to the top, the Settings page has four tabs. You enter the license on the license tab. On the General tab you can disable the default CSS to use the theme’s styling and disable verifying the license via SSL if there is an SSL certificate problem, such as when working on local host.

piotnet forms general settings

On the Integrations tab you can enter your account information for any of the integrations you plan to use. On the About tab you can jump to the documentation and support areas.

piotnet forms integrations menu

You can upload your custom font for PDFs on the PDF Custom Font page. The Booking page is where your booking records will show if you are using the booking features. Similarly, the Abandonment page is where incomplete form entries can be found if you are using the abandoned form feature. The Database page is where form entries can be viewed. You can import previously exported forms from the Import page.

A new feature of version 2 is the library of pre-designed starter forms.

piotnet forms starter forms

Currently the list of starter forms includes:

  • Blank Form
  • Simple Contract Form
  • Conversational Form
  • Simple Multi Step Form
  • Calculation Form
  • Loan Calculator Form
  • Conditional Logic Form
  • Frontend Form Submissions Form
  • Repeater Fields
  • Label Animation
  • Inline Fields
  • Stripe Subscriptions
  • Stripe Subscriptions with Plan Selection

Tour of the Form Editor

form editor map

The Piotnet Forms editor takes inspiration from the types of drag and drop interfaces you find in page builders.

  1. The plus icon brings the widget list back into view if you have been editing the settings of a form field.
  2. The stack icon shows a navigator where you can see all of the elements on the canvas.
  3. Undo and redo buttons.
  4. Open the form’s settings panel where you can change the name and set form style defaults.
  5. View the form layout for different device sizes.
  6. Side the admin sidebar and admin top bar for a more distraction free editor.
  7. Save button.
  8. Preview in a new tab.
  9. The hotdog menu has links for:
    • Form Settings
    • Global Style Settings
    • Form Entries
    • Export Template
    • Light Mode
    • Dark Mode
  10. The form canvas.
  11. Search for a widget
  12. Form widgets
  13. General widgets
  14. Hide the admin sidebar and copy the form shortcode.

Creating the Frontend Submission Form

The site has a Custom Post Type called Books. Here is a book record in the editor. There are the standard fields: post title, content, and featured image. In this case the featured image is the book cover. There is a custom taxonomy called Genres. There are also two custom fields: a URL field for the author’s website and a picture of the book author. We will create a form allowing the user to fill out all of these fields.

book record in the editor

To get started, go to the Add New menu and click on the “Frontend Post Submissions Form” starter form. When you click “Use Template” then you go into the form editor.

Adding the Form Fields

Some initial fields are already added: Title, Content, and Featured Image. For some reason a “Location” field is also included. I start by deleting that field by hovering the mouse over it and clicking the X in the upper right corner of the highlighted field. Also, at the very bottom are shortcodes you can include in your page with an edit or delete link.

initial form

I then click on the pencil icon in the top center to access the form settings and change the form name to “Frontend Book Submissions Form”. I’m going to leave the other settings at their default. Then click the blue save button in the upper right.

change form name

The Featured Image takes up an entire row. Lets change that. Click the plus icon in the upper right to show the list of form elements. Then drag a section element over and place it above the Featured Image. Then hover over the section container and in the left corner there is a duplicate button. Click that to get two columns.

add a section

Drag the Featured Image up into the left column. Now click the plus icon again and drag a Field element into the right column. From the dropdown list of field types, pick Image Upload.

add image upload field

In the settings for the Image Upload field, change the Field ID to “authorsPhoto”, the label to “Author’s Photo”, and add “jpg, png” as the allowable field types. We will use this field for uploading an image to the ACF Author’s Photo custom field.

authors photo settings

Now let’s add another section with two columns. Drag a Section element and drop it above the first section. Again, click the duplicate button to add another column.

add second section

In the left side add a field and pick Terms Select as the field type. I gave it an ID of “genreTaxonomy”, a label of “Genres”, and set the slug to “genre”, which matches the Genre taxonomy’s slug. Note on the canvas it says that the values only show on the front-end.

adding genre field

Drag another field and put it in the right side. For field type, pick URL. For Field ID put “authorsWebsite” and for the label put “Author’s Website”. This is the second ACF custom field.

adding url field

Mapping the Fields and Configuring the Form Submission

We now have all of the fields added. Click on the Submit button to access its settings. Note the Action After Submit panel already has the “Submit Post” action added.

form actions after submit

Now go to the Submit Post panel. Here we map the fields on the form to the fields in a book record. To start, we change the Post Type to Books.

set post type

Next, we click on the Add Item for the Terms List. We pick from the list our taxonomy field, leave the slug blank, and pick the Genres item from the list for the Field Shortcode.

genre wired up

The Post URL, Title, Content, and Featured Image are configured automatically. Piotnet Forms supports several custom field providers. In the Custom Fields dropdown pick ACF Field since that is the one we are using here. Then click the Add Item button and add the author’s photo information. Pick the authors_photo from the first dropdown. Then enter the custom field slug. If you forgot the custom field slug that is used in ACF, you may have to go to the ACF screen to check it. Pick the field shortcode from the list and select the field type as Image.

set image field

Now click Add Item again and add information for the URL field, which is the custom field for the Author’s Website. Configure it like we did for the author’s photo field by picking the field from the dropdowns and entering the slug. The instructions are to pick “Text” for a URL field.

set url field

OK, we have finished mapping the form fields. I am going to leave everything else as default and click the Save button.

Testing the Form

Go and add a new Page with the title “Add A Book Review”. Add the Piotnet Forms block and pick the form we just created from the dropdown. Click the Save button and then go look at the page on the front-end.

add the form to a new page

I see the form on the page, ready to be filled out.

empty form on front end

Here is the form filled out before being submitted. I noticed that for the image fields, I could upload an image but couldn’t access the media library.

form filled out before submit

After saving by clicking the Submit button, I go into the editor to check the new book record. Everything looks good.

new book record in the editor

Now, here is the book archive with the newly added book showing.

new book record in the book archive

And here is the single book record on the front-end.

new single book record on front end

Discussion and Conclusions

Adding a front-end submission form is a common requirement, but is often a challenge. Piotnet Forms made this task easy. For the most part, everything was straightforward.

There were two issues I noticed when doing the walk-through. First, I noticed when creating the form that sometimes there was some lag. It didn’t stop me from creating the form, but it was noticeable. Second, after creating the form, when clicking to add the images, I noticed that I could pick an image to upload, but I could not access the media library if the item had been uploaded previously.

There is a lot to like about Piotnet Forms. I found support to be very polite and helpful. The user interface was clean and once you learn your way around, it is very easy to create a form. There are sufficient layout and styling options. There is also a very good list of field types, which should cover most input needs.

Overall, I liked Piotnet Forms. It has all of the foundational features you would expect, such as conditional logic, calculated fields, and repeater fields. Piotnet Forms doesn’t have as many advanced features as some of the form plugins that have been around for a long time, but it has some nice advanced features, such as tracking form abandonment, booking forms, accepting payment, the ability to create a PDF, Google Sheets integration, and front-end form submission. Piotnet Forms is very reasonably priced and it is a good option for most use cases.

Get 10% off the lifetime version. Use code: dynamicwordpress

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts