How to add front-end forms to your website with Toolset

You can use Toolset Forms to create front-end forms which will make it easier than ever to add and create content on your website. Below we will go through all the steps you need to take before you and your users will be enjoying front-end forms on your website.

Don’t forget that you can see for yourself exactly how the forms look and work on our classic cars reference site.

01Step Download the plugins you need to build your front-end forms

Before you start creating your forms with Toolset, you will need to download the following plugins:

Depending on what you want to achieve with your forms, you might need to download these plugins as well:

To install your Toolset plugins follow our guide on how to install and register Toolset.

02Step Create your custom post type

Now that we have all the tools we need we can create the custom post types for the content that our users will be adding to using our forms. On our classic cars reference site, you can see we have a custom post type called Listings where you can see all of the cars for sale: Here is how you create a post type like Listings:

  1. To start, head to the Toolset Dashboard in the WordPress admin and click Add new post type.
  2. Enter the following in each box:
  3. Click Save Post Type and your Listing post type is ready.

03Step Create your custom fields

Now that we have created our Listings post type we can now add the custom fields which will help us display the information about each car we want to sell. On a page displaying a listing for a car, you will see custom fields for the price, the year it was built, the number of bathrooms/bedrooms and many more. Just like on our reference site: As you can see, we have a number of custom fields including for the Production year, Website and Price. Let’s create our custom field for the Production year.

  1. On the Toolset Dashboard click on Create field group next to the Listings post type.
  2. Click on the button Create field group and then Add New Field to add fields to the group.
  3. Now we choose the type of field we want. For our Production year custom field we’ll use the Numbers option.
  4. Set the options for the field. We can include the name of the field, the number of values and whether it’s a required field among other variables.
  5. Click Save Field Group and it will now appear when you edit your Houses posts.

04Step Create your custom form

Now that we have our custom post type and custom fields, we can create our front-end form. We can use Toolset’s drag and drop editor which makes it even easier than ever to create forms. We can create one just like the form on our reference site which allows users to add their own listings for classic cars: To create your own form using the drag and drop editor, check out our guide to building forms for creating content. Not only can you create forms to add content but you can also use forms to edit posts. To add these to your website, take a look at our documentation on building forms for editing content and users.

05Step Display maps on your forms

For certain fields in your forms, you will want to add a map so that users can provide the exact location where their item is being listed. On our reference site form, we have a field for the Advertiser location where users can enter an address for the item. Once they do, a map will appear with the location. To add a map like this one to your Toolset forms, take a look at our guide on how address fields work in Toolset Forms.

06Step Add email notifications when someone fills out a form

You can create email notifications to tell editors when someone has posted a new listing and to keep the lister updated about the progress of their lists. To create a notification system on your website, follow our guide to automated email notifications with forms.

07Step Add an expiration date to listings

You can add expiration dates to listings which get published on your website. This is a great way to keep the amount of data you need to manage down. You can also introduce a premium listing where posts never expire. If you look on our reference site, you will notice how the bottom of each listing contains an expiration date. Check out our guide to adding automatic post expiration in Toolset forms to implement expiry dates on your website.

08Step Add a payment option for regular listers

We can provide a payment option for regular listers who want to display a lot of items. For example, on our classic car reference site, we can offer a premium listing for users who need to list more than a certain number of cars. Premium users will benefit from “featured listings” which will appear at the top of search results. Their listings will also never expire. If you want to add a payment option similar to this one on your forms, follow our guide on adding payment to forms.

09Step Create a form for users to register

Not only can you create front-end forms for users to add content, but also forms for users to sign up. There are two ways to handle user registration.

Handling user registration with Toolset

We can use Toolset Forms to help users to register with the website using the so-called “user forms.” On our reference site, users can sign up to become a member using our registration form.

How to add front end formsCheck out our documentation on building forms for registering users to see how it’s done.

Handling user registration with WooCommerce

Another way to manage user registration is with WooCommerce. User registration is a part of the purchasing process when you use WooCommerce. To set up user registration using WooCommerce, follow our guide on how to charge payments using forms for registering users.

Handling user registration with Toolset

We can use Toolset Forms to help users to register with the website using the so-called “user forms.”   On our reference site, users can sign up to become a member using our registration form.   Check out our documentation on building forms for registering users to see how it’s done.  

Handling user registration with WooCommerce

Another way to manage user registration is with WooCommerce. User registration is a part of the purchasing process when you use WooCommerce.   To set up user registration using WooCommerce, follow our guide on how to charge payments using forms for registering users.

We look forward to hearing your feedback

If you are not a Toolset customer yet, feel free to send your questions using the presales questions form. We’ll be happy to answer. If you’re already a Toolset client and you need help, use the technical support forum.