Flodesk forms are your website’s best friend. They capture your visitors’ email addresses so you can build your list and start regularly sharing your brand message. And adding them to your Showit website couldn’t be easier.
In this tutorial, you will be creating an Inline form in Flodesk and adding it to your Showit website so that it pops up when a visitor clicks on a button.
How do you embed a Flodesk inline form to your website?
Just add two code snippets.
How to add an inline form to your Showit website
Step 1. Start by creating and customizing your Inline form.
At the end of the form customization steps, you’ll get two code snippets similar to the image below.
Note: Both the Header code and the Inline code have to be added to your website.
If you only add one of the two codes, it will impact how your form appears on your website.
Step 2: In Showit, choose the page you want the popup on click feature to appear.
Make sure all the canvases for that page are minimized.
Then click the 3 dots next to the page.
Select “Add Blank Canvas”.
Step 3: Click on the "New Canvas". This will open the Canvas settings.
Step 4: Customize the Canvas with the following settings:
Name the Canvas.
In this example, we named it “Popup on click”.
Set the “Stacking Order” to a high number.
For this example, we’re using 99. This will make sure that the popup stacks on top of the rest of your page elements.
Set “Canvas Type” to Window Height.
This will make sure that the popup displays over the rest of the site.
Set “Sticky” to Top, which will display the popup over the rest of the page.
Check the box next to “Hidden to start”.
This will keep the popup from showing up on the page before the button or image is clicked.
Step 5: Add an “Embed Code” block, or iframe, so that you can embed your Flodesk Inline form.
Step 6: Click in the embed block to view the code field and paste the Flodesk Inline form codes from Flodesk.
In Flodesk, copy the Header code and Inline code from the Inline form you created in step 1.
Paste them into the code field as shown below. Then click save.
Resize and position the code block in your Canvas to your liking.
Step 7: Add an Icon and label to the Canvas so that website visitors know how to close the popup box.
We recommend including a label for the icon. Add a “Paragraph” block in addition to the Icon. In this example, we used an X icon and labeled it “Close.”
Step 8: Once the icon is positioned where you like it, add an Action.
In the settings, select the “Click Actions” tab then change the “Type” to Hide Canvas, then select the Canvas you’d like to hide which should be the one you’ve been working on. In our example, this is called "Popup on click".
Step 9: If you haven’t already created the button or image that you want to trigger this popup, do that now.
Step 10: Click on the intended trigger for the popup that you created in step 9 to open the settings for the button or image.
Select the ‘Click Actions’ tab. Here, you can add another Action.
Set the “Type” to Show Canvas, and set the Canvas to the hidden canvas you just created.
Step 11: Preview your page and test the form.
Remember to make any necessary modifications to the Mobile view so that it displays correctly on smaller screens.
Now you have a popup-on-click using a Flodesk form! 🙌🏻
Let’s sum it up!
Having an opt-in form that opens in a separate popup is a great design element that can increase subscriber conversions. Even though Flodesk forms don’t currently support a popup-on-click feature, you can accomplish this in Showit.
To set this up, you will use Showit’s framework to create the popup Canvas, then paste the Flodesk Inline form code into the Embed block.
More to learn:
We'd love to hear about your recent experience when searching for solutions to issues in the Flodesk Help Center (Knowledge Base). With your feedback, we can improve our knowledge base with new and better ways to help you succeed!
Please do not submit support tickets and feature requests via this feedback form.
If you need technical assistance, please submit a support ticket via email at support[at]flodesk.com mentioning your Flodesk account login email with a detailed description of your problem.
Do you have an idea for a feature that will help improve Flodesk for you and other members? Our Product team would love to hear from you.