Embedding Your Forms

Once your form is designed and ready, FluidForms makes it easy to share it or embed it directly into your website, including your Canva designs. Choosing the right embedding method ensures your form is accessible and integrates well with your online presence.

Finding Your Embed Code

To get the necessary code or link for embedding:

1. Navigate to "Forms": In your FluidForms dashboard, go to the main "Forms" section where all your forms are listed.

2. Select Your Form: Click on the specific form you wish to embed or share.

3. Locate Embed/Share Options: Within the form's management area, look for the "Share" button in the top navigation bar.

4. Choose your embed option (outlined in detail below).

Common Embedding Methods

FluidForms provides a few ways to get your form onto your website:

1. iFrame Embedding

• What it is: An iFrame (Inline Frame) is an HTML element that loads another HTML page within a "frame" on your current webpage. It's a straightforward and widely supported method for embedding external content.

• How to use:

  1. FluidForms will provide you with an iFrame code snippet.

  2. Copy this entire snippet. It will look something like this:

     <iframe
       src="https://fluidforms.co/embed/form?id=your-unique-form-id"
       width="100%"
       height="600px"
       frameborder="0"
       marginheight="0"
       marginwidth="0"
       title="Your Form Title">
       Loading…
     </iframe>

     (Note: The src URL, width, height, and other attributes will be specific to your form and FluidForms' implementation.)

  3. Paste this code into the HTML of your webpage where you want the form to appear. Most website builders offer an "HTML block," "Code block," or "Embed" widget for this.

2. Direct Link (URL)

• What it is: A unique web address (URL) that hosts your form directly on the FluidForms platform.

• How to use:

  1. FluidForms will provide a shareable URL for your form.

  2. Copy this URL. It might look like: https://www.fluidforms.co/embed/form?id=your-unique-form-id

  3. Share this link directly via email, social media, or create a hyperlink from your website text or buttons.

• Pros:

  • Easiest to Share: No coding or embedding knowledge required. Just share the link.

  • Full-Page Experience: Users see the form in a dedicated, full-page view which can be less distracting.

• Cons:

  • Users Navigate Away: Users will leave your website to fill out the form, which might not be ideal for all scenarios.

Embedding in Canva

FluidForms offers a dedicated Canva integration:

• FluidForms App in Canva: The best way to use FluidForms with Canva is by searching for and adding the "FluidForms" app from the Canva app marketplace directly within your Canva editor.

• Seamless Integration: This allows you to select your forms and embed them as elements within your Canva designs (websites, presentations, etc.) without needing to copy-paste external code.

• For Detailed Instructions: Please refer to our comprehensive guide: Using FluidForms with Canva.

Embedding on Other Website Platforms

The general process for embedding using iFrame or JavaScript code on most website builders is similar:

• WordPress:

  • For iFrame or simple HTML: Use the "Custom HTML" block in the Gutenberg editor.

  • For JavaScript: You can also use the "Custom HTML" block. Some themes or plugins might offer specific sections for adding scripts to the header or footer.

• Squarespace: Use the "Code Block" element. You can choose to embed HTML or display iFrames.

• Wix: Use the "Embed HTML" element or "Embed a Widget" option.

• Shopify: You can edit the HTML of your theme's Liquid files (for advanced users) or add HTML sections to pages/posts through the theme customizer if available. Many page builder apps also support HTML embedding.

• General Tip: Most platforms that allow content creation have a way to add custom HTML, iFrames, or JavaScript. Look for options like "Embed," "Code," "HTML," "Source," or "+" (Add Block) in your editor. Consult your specific platform's help documentation for the most accurate steps.

Troubleshooting Embedding Issues

If you encounter problems with your embedded form:

• Form Not Displaying:

  • Ensure you've copied the entire embed code snippet correctly.

  • Clear your website's cache and your browser's cache.

  • If using JavaScript, check your browser's developer console for any error messages.

• Form Cut Off:

  • If using an iFrame, try increasing the height value in the iFrame code (e.g., height="800px").

  • Ensure the container element on your page where you're placing the form has enough space.

• Styling Conflicts:

  • Your website's CSS might override some of the form's styles. This is less common with iFrames but can happen with JavaScript embeds. You might need to use more specific CSS selectors or adjust your site's styles.

• Functionality Issues (e.g., submit button not working):

  • This could be due to JavaScript conflicts on your page or issues with the form configuration itself.

• For more detailed solutions and specific error messages, please refer to our comprehensive Troubleshooting Guide.

By following these guidelines, you should be able to effectively embed your FluidForms on various platforms and provide a seamless experience for your users.