How to Create an Animated Form in your Landing Page

Woorise makes it easy to build high-converting landing pages with customizable layouts and interactive elements. In this guide, you’ll learn how to create a landing page that features a call-to-action (CTA) button which, when clicked, smoothly reveals a form while hiding the initial content. This simple animation can help boost engagement and keep your visitors focused on taking action.

1. In this Animated Form example we will use the Cover block to create a full screen background.
2. Inside the Cover block we will use the following blocks: a heading block, a paragraph block, a button block as our call to action and the form block.

3. An important step is to assign the class cta-form to your button. To do this, go to the Advanced tab of the button settings and add cta-form under Additional CSS class(es). This class is responsible for hiding the form by default and revealing it with a smooth animation when the button is clicked.

4. Most of the content it will be hidden automatically. Some blocks such as the Group or the Columns will not hidden automatically. In that case you could use the class hide in the Advanced tab > Additional CSS class(es). In our example we use the class hide in the Group block that contains the form block.

Please note that this layout may work better with a small amount of blocks and form fields.