Building a form is one thing, but eventually you'll need to publish it and share it with respondents. Weavely provides you three different publish modes to do so. Here are the differences between these modes! In case you're more a watcher than a reader, we got you covered with a video version of this tutorial as well:
By default when you open the Weavely plugin and create a form the "Standalone Form" publish mode will be selected.
Once you've designed your form, (potentially) configured its conditional logic, you can head over to the share tab in the plugin. Standalone forms are web pages in their own right, and are meant to be shared as such. In other words, you can share a standalone form simply using the URL provided in the share tab of the plugin.
For example, if this is the (rather basic) design of our form:
Then sharing this standalone form's URL will result in respondents loading the following form in their browsers:
You use the embedded publish mode when you want to incorporate your form as part of an existing website's design.
Done designing and building your form? Go to the share tab in the plugin. You'll see that it provides you with an HTML snippet. You can copy and paste this snippet into your website in order to embed your Weavely form.
For example, we designed the following embedded form in Figma (notice that the form's end screen is almost fully transparent to blend with our embedded website's design).
In our example we're using Elementor, a platform on top of WordPress, which provides us with an easy way to incorporate snippets of HTML into our landing pages. You do this using a so-called HTML Widget in which you can copy and paste arbitrary HTML code snippets. In our case we simply copied the HTML given to us by the Weavely plugin.
The result once we load our landing page looks as follows:
You use the popup publish mode when you want to add a pop-up form to your landing page. The difference with an embedded form is that popup forms will hover on top of your landing page (typically somewhere on the edge of the screen) instead of being embedded within the website's design.
Once you've designed your form go to the share tab in the plugin. You'll be able to specify where you want the popup to appear on your website (i.e. horizontal and vertical position). Moreover, the plugin will enable you to copy a code snippet which you need to add to your website's source code.
For example, we designed the following popup form in Figma:
We're reusing our example website in Elementor from the embedded form example. More specifically, we'll be pasting the popup snippet in an HTML widget as follows:
The result once we load our landing page looks as follows:
