In today’s tutorial, we will give you a quick tour of the form fields – the essential part of form building. First, you’ll learn how to easily add a form field to your WordPress form using the Ninja Forms free core plugin.
Next, we’ll guide you on how to let users add a group of fields while filling out your form and how to include a dynamic write-in field for those times when none of the preset options quite fit.
As a bonus, we’ll also show you how to add custom HTML content to your online form using the HTML field. Let’s dive in!
Table of contents
- How to add a form field to your form with the Ninja Forms plugin
- How to allow users to add fields to a form (Repeater field)
- How to add an input field (Other option)
- Add custom HTML content to your WordPress form (HTML field)
1. How to add a form field to your form with the Ninja Forms plugin
You have two options to add a form field to your form. The first one is clicking on the Add new field button above the form. The second option is to click on the blue circle plus button located on the right side of your form.
To add a new field to your WordPress form, you can click on the field, or drag and drop the field to your form. This is how easy it is to build your form.
Now let’s look at how you can use the Repeater field that allows users to add fields to a form they are filling.
2. How to allow users to add fields to a form (Repeater field)
If you are building a registration form for any event, Repeater fields are a must-have as they let you add additional details for multiple guests in one place.
The Repeatable fieldset (repeater field) is part of our free core plugin so you don’t need premium Ninja Forms to use it on your form.
To access the Repeatable fieldset, navigate to the list of Ninja Forms fields > Layout fields.
Repeaters present a group of fields with repeated information and users can add these fields to the form they are filling as many times as they need.
Once you add the Repeatable Fieldset, you have options to customize the label, and the button text, add a description, or create multi-column layouts. To add a group of fields to the fieldset, you need to drag and drop the fields from the list of fields
Learn more about using and styling the Repeater Field in our blog post Add a Repeater Field in WordPress.
3. How to add an input field (Other option)
Is there a way to add an “Other” option to a Radio list that lets users manually enter their information? We get asked this question a lot, and the answer is yes! What do you need?
The combination of the Radio Button field, Single Line Text field (input field), and the Conditional Logic add-on. This will result in the following functionality:
So, head over to the tutorial How to Add an Other Option in Your WordPress Form and create smart forms with Ninja Forms!
The good news is, unlike our competitors, you can get the Conditional Logic add-on individually without a membership plan. Enjoy the flexibility and see what else you can accomplish with conditional logic features!
4. Add custom HTML content to your form (HTML field)
Searching through all the form fields but can’t find a way to add something extra and personalized to your form to inject that special touch?
The HTML field allows you to do that. You can add customized text, headlines, links, videos, and images to make your form visually more appealing.
Additionally, you can use the Ninja Forms HTML field to show a preview/summary page for a multi-step form or use it with calculations when you need to display the total amount for quote forms.
To learn more about using the HTML field in your forms, check the 5 Ways to Use an HTML Field in Your WordPress Form.
Continue your journey to master form fields in WordPress forms!
Form fields are the backbone of form building, so be sure to check our essential tutorial 10 WordPress Form Fields You Should Master. We’ll take a closer look at all the free-form fields and provide examples of when to use each one, so you can confidently choose the right field for your forms.
If you haven’t tried our contact form builder yet, we encourage you to give it a go! With free support for all users and plenty of awesome free features, the Ninja Forms plugin will definitely inspire your form-building journey.
So, don’t wait—download the free Ninja Forms core plugin and enjoy a free, yet powerful form creation!