Adding Flodesk Forms to Your WordPress Website Easily

So, you’ve created your signup form in Flodesk. Now, the only thing left to do is add it to your website. But if you’re not tech-savvy, the idea of dealing with HTML codes and scripts might make you a bit nervous. But fear not! It’s actually easier than you think, even if Flodesk doesn’t have a native WordPress plugin to do the heavy lifting for you. In this article, I’ll walk you through the step-by-step process of adding Flodesk opt-in forms to your website using two popular tools: Elementor page builder for core pages and Gutenberg blocks for blog posts. Let’s dive in!

Different Types of Signup Forms You Can Embed into Your Website

As a beginner, the best option for you is to embed an inline form. These forms seamlessly blend into the natural flow of your page, making them an integral part of your content. You can also add a popup form, but keep in mind that it won’t be visible at all times. It will only pop up when triggered. Additionally, Flodesk allows you to embed a full-page form to a web page, which has its own advantages and drawbacks that we’ll explore in another blog post. Just remember, using the full-page form requires some HTML coding skills!

Where to Find the Embed Codes in Flodesk

When creating a new form in Flodesk, the first step is to choose a template. This will determine whether you’ll be working with an inline form, a popup, or a full-page signup form. After selecting a template, you move on to the design phase. Here, you can update the copy text, add images, and play around with the fonts and colors. Once you finish designing the form, it’s time to customize it. Flodesk provides a few simple steps where you can enable or disable double opt-in, set up notifications for new subscribers, and decide whether to show a success message or redirect subscribers to a specific URL. Finally, Flodesk will provide you with the necessary embed codes that you need to copy-paste to your website. For inline forms, there will be two code snippets, while popup forms require just one code snippet. In the case of a full-page form, Flodesk will provide you with a shareable URL.

See also  Introducing the Kicker Wordpress Theme: A Premium Choice for Your Website

How to Find the Embed Code for an Existing Form

If you already have a form created in Flodesk, simply go to your Forms dashboard, hover over the form, and click on the three dots (…) that appear in the upper right corner. From there, select ‘Embed’ to access the necessary code.

Understanding the Difference Between Header Code and Inline Code

When working with an inline form, you’ll receive two separate code snippets. Both codes are essential and need to be added to your website. The header code is a JavaScript snippet that should be added once to your entire WordPress website. It allows your website to access the actual form data from Flodesk and display it. On the other hand, the inline code contains all the unique information of your signup form, such as fonts, colors, images, and copy text. You’ll need to add the inline code to each page where you want the form to appear. To make this process simpler, it’s recommended to install a plugin like Insert Headers and Footers or Header Footer Code Manager. These plugins make it easy to manage and implement the header code and allow you to add the inline code snippets wherever necessary.

Adding the Header Code to Your WordPress Website

To add the header code, I recommend using a plugin like Insert Headers and Footers. Simply install and activate the plugin from the Plugins menu in your WordPress dashboard. Once activated, go to the plugin’s settings and paste the header code provided by Flodesk into the designated section. Make sure to save your changes. By using a plugin, you can easily switch themes without losing your code.

See also  How to Install Divi on WordPress

Embedding the Flodesk Inline Code Snippet with Elementor

If you have Elementor page builder installed on your website, you can use it to add the Flodesk inline form to any page created with Elementor. Here’s how you do it:

  1. Open the web page you want to edit with Elementor.
  2. Drag and drop an HTML block to the desired location on the page.
  3. Copy the inline code snippet from Flodesk and paste it into the HTML code area.

Save and publish the changes, and voila! Your beautiful Flodesk signup form will appear on your website.

Adding the Inline Code with Gutenberg

Not everyone uses Elementor for their websites, and that’s totally fine. If you prefer using the Gutenberg editor, follow these steps:

  1. Add a custom HTML block to your blog post or page.
  2. Copy the inline code snippet from Flodesk and paste it into the HTML block.
  3. Please note that the form won’t be visible in the editor. Save the page as a draft and use the Preview button to see the live rendering.
  4. Once you’re satisfied with the preview, publish the page to make the Flodesk inline form visible to your readers.

Adding the Same Flodesk Signup Form Multiple Times to the Same Web Page

Let’s say you want to add the same inline form multiple times to a single web page. You may have noticed that the HTML code doesn’t work as expected in WordPress. The good news is that there’s a solution! You’ll need to tweak the code a bit. Flodesk has a helpful article in their help center that guides you through the process. Keep in mind that this applies only when you want to add the same inline form multiple times to a single page. Adding different inline forms to the same page follows the standard process.

See also  Migrating From Wordpress to Webflow

What is Raw HTML, and When Should You Use It?

Flodesk forms come with pre-defined CSS design styles that control the appearance of the form. However, if you have some knowledge of HTML and CSS, you can access advanced code options in Flodesk. These options allow you to get the raw HTML code, which disables the default CSS styles of the form. With the raw HTML code, you can add your own CSS styles and customize the form further. This is particularly useful if you want to tweak the mobile responsiveness of the form or make other design modifications. Alternatively, you can get the Genesis eNews snippets if you use the Genesis eNews widget on your website.

Recap

Adding Flodesk inline forms to your WordPress website doesn’t have to be complicated, even without a native WordPress plugin. By using plugins like Insert Headers and Footers or Header Footer Code Manager, you can easily add the necessary header code to your website. For adding the inline form code snippet, you can utilize an HTML block or widget in Elementor or Gutenberg. Remember to save and publish your changes to make the forms visible on your website.

If you want to learn more tricks and tips about Flodesk, check out my earlier post addressing frequently asked questions. And if you’re interested in trying out Flodesk, click on ProgramMatek to visit their website. If you’ve already signed up for a free trial but want to upgrade, use the code ‘ARRADESIGNSTUDIO’ to get 50% off your subscription!

If you have any questions about Flodesk, feel free to leave a comment below, and I’ll get back to you. And don’t forget to share this post with your friends and on social media. Happy form building!