Want to have a custom form pop up on your website? This tutorial tackles exactly that use case!
Would you rather have a Weavely team member explain this to you in a video? Check out this video tutorial:
When you open the Weavely plugin in Figma you'll get to chose from various publish modes for your form. You'll need to select the "Popup form" publish mode if you want to embed your form as a pop-up on your website.
As is the case for the other Weavely publish modes, you'll then get to either start building your pop-up form from scratch, use a template or generate one with AI.
Designing your pop-up form follows the same pattern as designing any other Weavely form. The plugin will generate a design kit with all your necessary form components. You can use these components by creating instances and adding them to your form pages as shown below.
You can always add new components to your kit using the component library menu, accessible at the bottom left of the plugin. Finally, you can determine the responsiveness of your pop-up using Figma's auto-layout settings. By default the pages generated by Weavely will be auto-layout enabled. For more information regarding the design of forms in Figma and Weavely we recommend the following tutorials:
The Weavely plugin will generate an HTML script that contains all the necessary code for your pop-up form to be added to your website. Navigate to the "Share->Form Sharing" menu. You'll be able to configure where your pop-up should appear (i.e. horizontal and vertical location) and copy the generated code snippet. This script should then be added to the pages on your website where you want the pop-up to appear.
In Elementor, a website builder on top of Wordpress, you can use the HTML widget to paste your Weavely pop-up code. This is shown in the image below.
The result for an example pop-up form design is shown in the gif below.
