WS Form: The Ultimate Cheat Code for Front-End Post Submission

I recently had the pleasure of talking with Mark Westgard, the creator of WS Form, both online and at WordCamp US. To be honest, I hadn’t given his form plugin much of a shot before. It wasn’t because I wasn’t interested—I already had a lifetime deal for Fluent Forms, so it didn’t make sense to explore other options.

However, after catching a few videos online and seeing WS Form’s Black Friday deal, I decided to give it a try. I’m so glad I did. In fact, I’ve gone through my starter site and completely replaced Fluent Forms with WS Form going forward.

There are countless features in WS Form that are worth exploring, but today I want to focus on one in particular: front-end post submission forms. Traditionally, creating these types of forms can be tricky, but WS Form has created a one-click solution that makes it incredibly simple.

In this post, I’ll show you how front-end submission forms are typically set up manually and then demonstrate how WS Form’s cheat code simplifies the process.

Setting Up the Custom Post Type

To start, I created a custom post type called Listings using Advanced Custom Fields (ACF). This post type is designed to list companies, similar to a directory.

Field Groups

I added several fields to the Listings post type to make it as complex as possible and showcase WS Form’s capabilities. These fields include:

• Company Name (text)
• Company Description (text area)
• URL (URL field)
• Email (email field)
• Phone (number field)
• Logo (image field)
• Address Information (text fields)

By mixing different field types, I wanted to demonstrate how WS Form handles a variety of data inputs.

The Traditional Way: Manual Setup

Before showing you WS Form’s one-click solution, it’s important to understand how front-end submission forms are traditionally set up.

Creating the Form

1. Start with a Blank Form:
   • Go to WS Form and click Add New.
   • Select the blank form option and name it (e.g., “Manual Form”).
2. Add Fields:
   • Drag and drop fields into the form to match the fields in your custom post type.
   • For example, add a text field for the company name, a text area for the description, and email and URL fields.
   • Don’t forget to add a Submit button.
3. Save and Preview:
   • Save the form and preview it on the front end.

At this point, you’ll have a basic form, but the fields aren’t yet mapped to the custom post type.

Mapping Fields

To map the form fields to the custom post type:

1. Add a Post Management Action:
   • In WS Form, click Actions and add a new action.
   • Select Post Management as the action type.
2. Configure the Post Type:
   • Set the post type to Listings (or your custom post type).
   • Change the status to Draft to ensure submissions don’t automatically publish.
3. Map Fields:
   • Expand the field mapping section.
   • Map the company name field to the Post Title.
   • Map other fields (e.g., description, email, URL) to their corresponding ACF fields.
4. Save and Test:
   • Save the form and test it by submitting dummy data.

When you check the back end, you’ll see the submitted data mapped correctly to the custom post type.

While this process isn’t overly complicated, it does take time to manually set up and map each field.

The WS Form Cheat Code

Now let’s look at how WS Form simplifies this process with its one-click solution.

Using the Post Management Template

1. Create a New Form:
   • Go to WS Form and click Add New.
   • Select the Post Management template.
2. Choose Your Post Type:
   • WS Form automatically detects all custom post types on your site, including those with ACF fields.
   • Select the template for your custom post type (e.g., Listings).
3. Automatic Form Creation:
   • WS Form generates a complete form with fields mapped to your custom post type.
   • For example, it creates a text field for the post title, a text area for the description, and URL and email fields for the corresponding ACF fields.

Customizing the Form

While WS Form creates the form automatically, you can still customize it:

• Rename fields (e.g., change “Title” to “Company Name”).
• Remove unnecessary fields (e.g., the slug field).
• Adjust field types or settings as needed.

Testing the Form

1. Preview the Form:
   • Save the form and preview it on the front end.
2. Use the Debug Console:
   • WS Form includes a debug console that lets you populate the form with dummy data.
   • Click Populate to automatically fill in the fields with appropriate data (e.g., a formatted URL for the URL field).
3. Submit the Form:
   • Submit the form and check the back end.

WS Form maps all the fields perfectly to the custom post type, just like the manual setup—but in seconds instead of minutes.

Why WS Form Stands Out

WS Form’s ability to automatically generate front-end submission forms is a game-changer. It eliminates the need for manual field mapping and significantly speeds up the process.

Other standout features include:

• Post Management Templates: Automatically create forms for any post type, including custom post types with ACF fields.
• Debug Console: Quickly populate forms with dummy data for testing.
• Customizability: Easily adjust fields, actions, and settings to fit your needs.

Wrapping Up

WS Form has completely changed the way I approach form creation. Its one-click solution for front-end post submission forms is just one example of the plugin’s power and flexibility.

If you’re looking for a form plugin that combines simplicity with advanced functionality, WS Form is worth exploring. Whether you’re building complex forms or handling custom post types, WS Form makes the process faster and easier.

I’ve been blown away by the quality-of-life features in WS Form, and I’m excited to continue using it in my projects. If you’re interested in learning more, check out the WS Form tutorials by WP Builds or Kevin Geary—they offer deep dives into the plugin’s features.

If you have a specific use case or feature you’d like me to cover, let me know—I’d be happy to explore it further!