Studio Forms (technical) main purpose is to generate beautifully animated slide transitions, for the indivual slides of your form - without you having to think too hard about what's going on underneath the hood.

For this purpose, we have to tell Studio Form what our slide(s) should be.

‍
‍

Let's beginn with creating our first Slide

‍

1. Add a Div Block

‍

At the beginning, our Webflow form will probably look something like this: ☝️

Now we add a div and move all the elements into it.

‍

2. Style it

‍

Now give your slide a *class of your choice* and design it as you like. Feel free to just follow ☝️

‍

Congratulations - now publish!

‍

And that's it - you have successfully created your first fully functional studio form - check it out on the live page.

‍

Do you want to create multiple slides?

‍

1. Swap your buttons

‍

Then first swap the submit buttons for continue buttons. ☝️

And then change the text as you wish. For example, "Continue".

‍

2. Duplicate slides

‍

‍

3. Customize it

‍

Feel free to swap field types, add classes, change names, add animations.... - in short: make it yours! ☝️

‍

4. Pro tip when using buttons

‍

(Note: A "Form Button" does this automatically)

‍

Select the "Next" / "Submit" button on the last slide ☝️

Go to the Settings tab on the right (click the gear icon), scroll down to Custom Attributes and open it.

‍

Name   data-wait
Value   Please wait...

‍

Add the data-wait attribute and give it a value of your choice.

‍

Congratulations - now publish!

‍

And that's it - you have successfully created your first fully functional studio form - with multiple slides - check it out on the live page.

‍

Perfect. What comes next?

‍

Continue with -> Styling of sf-required, sf-selected, and sf-suggested classes ( a.k.a. styling of the logical events that occur in your form) <-

‍

1. Bonus: Slide Direction

‍

Name   data-slide-direction
Value   45

‍

[data-slide-direction] is an attribute that you can use either holistically on your Studio Form wrapper or specifically on your individual slides. It takes a range of values from 0 to 360 degrees. This allows you to be very specific about how you want your slides to animate. The default value is 90 degrees.

‍

2. Bonus: Visual Dividers

‍

Visual dividers are a way to keep order within your Webflow Designer.

‍

Just insert a div block with e.g. a text block child element in between your steps and open the settings panel on the right side ☝️

‍

Name   studio-form
Value   divider

‍