Are you looking for a simple way to add an according form design to your WordPress website?
Accordion forms offer an intuitive and accessible way to present complex data while maintaining a clean, organized look.
Create Your WordPress Accordion Form Now
In this article, we’ll show you the easiest way to design an accordion form with WPForms to boost your website’s functionality and user experience.
How to Design an Accordion Form in WordPress
To create an accordion design form in WordPress, you can rely on the simplicity and functionality of WPForms. Follow the steps below to get started:
1. Install and Activate WPForms
WPForms is an advanced and user-friendly form builder plugin for making all types of forms. It comes with hundreds of form templates and features.
While we’ll be using the Pro version for this tutorial, remember that all license holders, including Lite users, can create accordion form designs.
It’s time to install and activate the plugin on your WordPress website once you’ve determined which WPForms version suits your needs.
Now, let’s create your form!
2. Create a New Blank Form
From your WordPress admin dashboard, navigate to WPForms and click on Add New from the list of options.
Next, give your form a name and select an existing template based on your specific requirements or simply set up a blank form.
For this tutorial, we will create a new form to walk you through all the vital steps to achieve the accordion form design. So, we’ll be selecting the Create Blank Form option.
You will now be directed to the Fields screen, where available fields appear on the left panel. The ones you have access to will depend on your license level.
In the right panel, you will see an editable preview of your form. Since we have selected a Blank Form, this section will appear as empty.
Now, we’ll walk you through the easy steps to create an accordion component through a checkboxes field with icon choices.
3. Add a Checkboxes Field with Icon Choices
To add the Checkboxes field to your form, you can either click on it in the left-hand panel or drag and drop it directly into the form preview.
Next, click on the Checkboxes field on the right preview to open up its Field Options. From here, remove the extra choices and just keep one.
To accomplish this, all you need to do is click on the red button that looks like a minus sign (—) next to one of the choices.
Next, set the remaining choice name to something that describes the fields appearing below it. After that, check the Use icon choices option.
When you enable this option, change the icon to something that looks like you’re clicking on an accordion. For instance, you can select the circle-arrow-down icon.
Next, if you’d like, you can adjust the Icon Color to something that works better with the overall style of your website.
After that, make sure that the Icon Choice Style is set to Modern and that the Icon Size is set to Small.
The next step is to navigate to the Advanced tab in the Field Options for the Checkboxes. From here, change the Choice Layout to One Column.
Once you’ve done that, make sure that you also check the Hide Label option since we’ve already added it as an Icon choice in the earlier steps.
Great job so far! You’ve now set up the Checkboxes field to act as an accordion, but for it to function, you’ll need to add a few fields below it.
4. Add a Few Fields Below the Checkbox
The fields that you include in your form will entirely depend on the sort of form you’re creating as well as the particular purpose for which it will be used.
Since we’re creating a simple Sign Up Form for this tutorial, we’ll add fields more relevant to this particular use case.
For instance, right below the Personal Information section, we’ve added fields to record a user’s name, email, phone, date of birth, and gender.
Since an accordion form design has multiple sections for a user to fill out, this is a great time to follow the same steps above to create another Checkboxes field.
You can then add more relevant fields below it. Continuing with the Sign Up form example, we added a Create Your Account section.
Likewise, we also created a Terms and Conditions section for the example. Now, we have three sections users need to fill out in our accordion form.
If you want to customize the form to your liking, simply add, edit, and rearrange fields using the WPForms’ intuitive form builder, just like we did!
5. Apply Conditional Logic on Your Form Fields
Once you’ve added your form fields, it’s time to apply Conditional Logic to them so they only appear upon clicking the Checkboxes field.
You can do this easily by clicking on any field from the right form preview and navigating to the Smart Logic tab under its Field Options.
In the Smart Logic menu, for all form fields appearing below the Checkboxes field we created earlier, check the Enable Conditional Logic option.
Next, use conditional logic to Show the field only if the Checkboxes field is not empty. Repeat this for all other fields below the checkboxes field.
Using the Sign Up form example, we’ll apply this conditional logic across all fields below Personal Information, Create Your Account, and Terms and Conditions.
Once you do the same for your form’s intended purpose, you’ll successfully create an accordion-style form, like in the example below.
You can also add some transition effects with a little custom CSS to make your accordion form and its user interface stand out.
Before moving on, hit the Save button to avoid losing any changes.
6. Add a CSS Class to the Conditional Fields
A straightforward approach to adding custom CSS to your website is using a dedicated plugin made just for that purpose. We recommend using WPCode!
Once you’ve installed and activated the form plugin, navigate to Code Snippets from your WordPress dashboard and select + Add Snippet.
Next, click on Add Your Custom Code (New Snippet), then hit the blue Use Snippet button to create a new CSS snippet.
Now, add the below CSS code for applying an animation so there’s a smoother transition when the conditional logic is triggered.
#wpforms-form-2399 .wpforms-conditional-show {
display: block;
animation: fade-in 1s;
}
#wpforms-form-2399 .wpforms-conditional-hide {
display: block;
animation: fade-out 1s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
We’re using CSS to target the form ID 2399. This ID must be updated to reflect your own form’s ID. If you need assistance locating your form ID, read this helpful guide.
Once you’ve figured out your form ID, simply copy and paste the CSS code below Code Preview in the WPCode plugin.
Next, scroll down to the Insertion tab. Now, select Auto-Insert, and from the Location dropdown, choose the Site Wide Header option.
There you have it! You’ve added a transition effect to your accordion form. Now, all you have to do enable the form notifications and confirmations.
6. Enable Form Notifications and Confirmations
It is crucial to set up the messages and notifications that will appear after a user fills out and submits their form.
This is easy to do. From the Form Builder screen, navigate to the Settings tab and select Notifications.
Administrators will receive alerts automatically. However, the email’s title, body, and list of recipients can be modified if required.
Next, under the Settings tab, select Confirmations to modify the message your customers will receive upon completing the form.
You can also use the Confirmation Type setting in WPForms to display a message, link to another page, or redirect the user.
7. Publish Your Accordion Form
Create a new web page/post or update an existing one. After that, click on the Add Block button and select the WPForms icon.
Next, choose your accordion form design from the dropdown menu in the WPForms block to add it to your page or post.
If you want to customize the appearance of your form, now may be a good time to style it using the block editor.
If everything seems promising, you can make your form public by clicking the Update or Publish button.
After you’ve published the accordion form, all that’s left to do is ensure it works as planned by testing the embedded form.
Frequently Asked Questions (FAQs)
Creating accordion forms is a popular topic of usability among our readers. Here are some quick answers to a few of the most commonly asked questions:
What are the pros/cons of accordion forms vs multi-page forms?
An accordion form allows you to fit more content in a small space but can be overwhelming if not designed well.
What are the best practices for accordion form labels?
Use labels that are concise and clear. Make use of headings, and steer clear of designations like “Section 1.”
How to design accordion forms for desktop and mobile?
To design accordion forms that are responsive and work smoothly on both desktop and mobile, consider signing up with WPForms!
Next, Learn How to Require an Email Address for File Downloads
Wouldn’t it be great to require users to submit their email addresses before downloading a file from your WordPress site? Learn how to encourage users to share their email addresses for downloading a file from your WordPress site.
Create Your WordPress Accordion Form Now
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.
If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.
The post How to Design an Accordion Form in WordPress appeared first on WPForms.source https://wpforms.com/how-to-design-an-accordion-form-in-wordpress/
