How to Design an Accordion Form in WordPress

Are you looking for a simple way to add an accordion 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.

The WPForms homepage

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.

Add new form WPForms

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.

Create a blank form in WPForms

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.

WPForms Fields

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.

Add fields to your form

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.

Checkboxes field

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.

Field Options for Checkboxes

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.

Remove checkbox choice

Next, set the remaining choice name to something that describes the fields appearing below it. After that, check the Use icon choices option.

Enable Use icon choices

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.

Select 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.

Icon settings

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.

Change Choice Layout

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.

Hide Label for Checkboxes

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.

Example fields for a sign up form

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.

Create your account form fields

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.

Terms and conditions form fields

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.

Smart Logic tab in 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.

Enable Conditional Logic

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.

Conditional Logic not empty

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.

Sign up form with accordion preview

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.

Save the form

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.

Add your custom code 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.

Code preview in WPCode

Next, scroll down to the Insertion tab.  Now, select Auto-Insert, and from the Location dropdown, choose the Site Wide Header option.

Insert code in Site Wide Header

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.

7. 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.

Form notification settings

Administrators will receive alerts automatically. However, the email’s title, body, and list of recipients can be modified if required.

Enable form notifications

Next, under the Settings tab, select Confirmations to modify the message your customers will receive upon completing the form.

Form confirmation

You can also use the Confirmation Type setting in WPForms to display a message, link to another page, or redirect the user.

Default confirmation message

8. 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.

Add form widget WPForms

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.

Selecting your accordion form

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.

Accordion design 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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.


  1. It appears that if an accordion is closed again after data are entered, the data are lost and must be re-entered. Am I missing something?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.