Kadence - How to Setup the Newsletter Block with Flodesk
This tutorial will guide you through adding your Flodesk signup form to any Kadence theme.
1. Log in to your Flodesk account. Go to “Forms” at the top of the page, then click "+ New Form"
2. Under "Choose a Form Type", select one of the INLINE forms to customize it. I recommend one of the simple ribbon banners.
3. Choose or create the Segment that these entries will be added to (E.g. "Newsletter subscribers"). Click "Save" to begin customizing.
4. I recommend DELETING the heading and the sub-heading fields by highlighting the text and deleting it. You can add your own headings later with the text blocks when editing your page and this way, they will match the fonts of your theme.
5. If you want to remove the Last Name field, click on the "last name" field > click the 3 dots icon > click "delete"
6. Now you can begin personalizing the signup fields with your brand colors!
Click on a field > then select the "Style" tab to adjust the field styles such as style, borders, padding, etc
Click on the "Subscribe" button to edit button colors and styles
TIP: remove BOTH the Canvas Color and Background Color so that the entire form background is transparent. This is useful in situations where the background of the section where you want to place the form isn't white. It will look a lot nicer this way!
6. Once you're finished designing your form, click the Next button at the top right and go through all of the steps:
- Choose to be notified when someone subscribes (I usually keep this turned off)
- Choose to double opt-in or not (double opt-in is better for conversion)
- Choose the action after the form is submitted (you can display a simple success message or have it redirect to another page, like a Thank You page for example)
7. Now you should be in the Embed tab where it says "Publish your form". COPY this header code and place it into the head of your website by following this tutorial.
9. Now copy the Inline code and paste it into the HTML block on your page.
10. Save the page and view your website - you should now see the form displayed on your website! Make sure to test it out to ensure that it's working correctly!
11. If you need to make any changes to the form, just go back to Flodesk and make your changes to the form. The form will update itself you will see the changes you made reflected on your website automatically.