Table of Contents

1. Overview & How Iframe Forms Work

2. Getting Your Form Embed Code

3. Embedding in Elementor

4. Embedding in Gutenberg (Block Editor)

5. Embedding in Beaver Builder

6. Embedding in WPBakery Page Builder

7. Embedding in Divi Builder

8. Responsive & Mobile Optimization

9. Common Issues & Troubleshooting

10. Quick Reference Cheat Sheet

1. Overview & How Iframe Forms Work

Aesthetix CRM uses Lead Connector forms that are embedded on your website via an iframe — an HTML element that loads a separate web page inside your page. When a visitor fills out the form, the data is submitted directly to Aesthetix CRM, creating or updating a contact and triggering any associated automations.

Why Iframes?

•       No plugin dependencies: The form runs on CRM servers, so it works regardless of your WordPress theme or plugin stack.

•       Always current: Changes made in the Aesthetix CRM form builder are reflected live on your site with no need to update code.

•       Data integrity: Submissions go directly to the CRM with proper tracking, attribution, and automation triggers.

Key Concept: The Iframe Sizing Challenge

The most common issue with iframe forms is that the iframe has a fixed height while the form content inside it may be taller or shorter. This leads to either extra whitespace below the form or the form being cut off with a scrollbar. Because the iframe loads content from a different domain, your WordPress site cannot automatically detect the height of the form content. This is the core challenge you will need to manage for each page.

KEY TAKEAWAY: Plan to adjust iframe height in TWO places: (1) inside Aesthetix CRM’s form builder under the form’s embed settings, and (2) in your WordPress page builder’s HTML/embed widget. Getting the right height often requires previewing on both desktop and mobile and fine-tuning.

2. Getting Your Form Embed Code

Before embedding on WordPress, you need the iframe snippet from Aesthetix CRM.

1.     Log in to your Aesthetix CRM dashboard.

2.     Navigate to Sites → Forms (or Sites → Surveys if using a survey).

3.     Click the form you want to embed, then click the Integrate Form button (or the share/embed icon).

4.     Select the Iframe/Embed option. You will see code that looks like this:

5.     Copy the entire code snippet (both the <iframe> tag and the <script> tag). You will paste this into your WordPress page builder.

IMPORTANT: Always include the <script> tag that comes after the iframe. This JavaScript file helps the form auto-resize on some themes and handles event tracking. Without it, form submissions may not track properly in the CRM.

Pre-Embed Checklist

•       Form is tested and working in Aesthetix CRM preview

•       Thank-you/confirmation action is configured (redirect URL or message)

•       Any associated workflow automations are turned on

•       You have the full embed code copied (iframe + script tag)

3. Embedding in Elementor

Elementor is the most common page builder we see across client sites. There are two approaches depending on what works best for your layout.

Method A: HTML Widget (Recommended)

1.     Open the page in Elementor and drag an HTML widget into the desired section.

2.     Paste your full embed code (iframe + script) into the HTML code area.

3.     Click Preview to check the form’s appearance. If the form is cut off or has excess space, adjust the height value in the iframe code.

4.     Publish or Update the page.

Method B: Shortcode Widget

If the HTML widget causes rendering issues in your theme, use the Shortcode widget as an alternative. Paste the same embed code into the Shortcode widget’s text field. This can sometimes render more reliably depending on the Elementor version.

Elementor Container Considerations

•Column width: If the form is inside a narrow column (e.g., 50% or sidebar), the form may feel cramped. Consider placing the form in a full-width or at least 60%+ width column.

•Section padding: Elementor sections have default padding that can push the form inward. Check the section’s Advanced → Padding settings and reduce if needed.

•Overflow hidden: Some Elementor sections have overflow set to hidden, which can clip the form. If the form appears cut off, check the section’s Advanced → Custom CSS or layout settings.

•Flexbox vs. legacy: Newer Elementor versions use Flexbox Containers. If using the new container layout, set the container’s Content Width to “Full Width” and alignment to stretch for the most predictable results.

4. Embedding in Gutenberg (Block Editor)

WordPress’s built-in Gutenberg editor works well for embedding iframe forms with minimal configuration.

Steps

1.     Open the page in the WordPress editor.

2.     Click the + icon to add a new block. Search for Custom HTML and select it.

3.     Paste the full embed code (iframe + script) into the block.

4.     Click the Preview tab within the block to verify it renders.

5.     Update/Publish the page.

Gutenberg Tips

•Do NOT use the “Embed” block — the Embed block tries to render an oEmbed preview and will not properly display a raw iframe. Always use Custom HTML.

•Full-width alignment: If your theme supports it, set the Custom HTML block to “Wide Width” or “Full Width” in the block toolbar to give the form more horizontal space.

•Group block: Wrap the Custom HTML block inside a Group block if you need to control background color, max-width, or padding around the form.

5. Embedding in Beaver Builder

1.     Open the page in Beaver Builder.

2.     Add a new row or select an existing one. Drag in the HTML module (under Basic Modules).

3.     Paste the full embed code into the HTML editor.

4.     Click Save, then preview the page.

Beaver Builder Container Notes

•Row max-width: By default, Beaver Builder rows have a max-width (usually around 1100px). If your form looks too narrow, check the row settings and increase the max-width or set it to full width.

•Column margins: The column module has default margins. Reduce them under Advanced → Margins if the form needs more room.

6. Embedding in WPBakery Page Builder

1.     Open the page in WPBakery (Backend or Frontend editor).

2.     Add a Raw HTML element (found under Content elements). Do NOT use the Text Block element — it will strip out the iframe and script tags.

3.     Paste the full embed code into the Raw HTML content area.

4.     Save the element, then preview the page in a new tab to verify.

WARNING

WPBakery’s Text Block and some shortcode elements will strip or sanitize HTML tags including iframes. Always use the Raw HTML element to ensure your embed code remains intact.

WPBakery Notes

•The Backend Editor won’t render a live preview of the iframe — this is normal. You must preview the published page.

•If using the Frontend Editor, the iframe may render but may not display at the correct height until you view the live page.

7. Embedding in Divi Builder

Divi is another popular builder we see frequently. The approach is similar to the others.

1.     Open the page in Divi Builder (Visual or Backend).

2.     Add a new module. Search for and select the Code module (not the Text module).

3.     Paste the full embed code into the Code module’s content area.

4.     Save and preview. In Visual Builder, the form may appear as a gray placeholder — this is expected. Check the live page.

Divi Container Tips

•Section and row padding in Divi can be aggressive (70px+ by default). Navigate to the Section → Design → Spacing settings and reduce padding to 20–40px if the form area feels oversized.

•Divi’s column structure uses percentage widths. Placing a form in a 1/3 column will compress it significantly. Prefer full-width or 2/3 column layouts for forms.

8. Responsive & Mobile Optimization

Getting your forms to display well on both desktop and mobile requires attention in two places: the Aesthetix CRM form builder and your WordPress builder.

In the Aesthetix CRM Form Builder

•       Use the mobile preview toggle: When editing your form in the CRM, use the mobile preview button to see how fields stack on small screens.

•       Stack fields vertically on mobile: If you have side-by-side fields (e.g., First Name / Last Name on the same row), verify they stack to full-width on mobile. This is usually automatic, but check.

•       Keep field count reasonable: Long forms with many fields will need a taller iframe on mobile, since fields stack vertically. Consider using multi-step forms to break things up if you have more than 5–6 fields.

•       Button sizing: Set the submit button to full-width on mobile for easier tap targets.

In Your WordPress Builder

Setting Responsive Height with CSS

The most reliable way to make the iframe height respond to different screen sizes is to add a small CSS snippet to your page or theme. You can add this via the builder’s custom CSS field, a child theme’s stylesheet, or a plugin like Simple Custom CSS.

TIP: Mobile forms typically need MORE height than desktop forms because fields stack vertically. It’s common for a 600px desktop form to need 800–900px on mobile. Test on a real phone (not just browser resize) because toolbars and address bars affect visible area.

Builder-Specific Responsive Settings

9. Common Issues & Troubleshooting

Advanced Troubleshooting: Using Browser DevTools

If you need to determine the exact height of the form content inside the iframe, follow these steps:

1.     Open the live page in Chrome or Edge.

2.     Right-click the form area and select Inspect.

3.     In the Elements panel, find and click the <iframe> tag. You’ll see its current height in the Styles panel.

4.     To see the content height: in the Console panel, type:

This gives you the pixel height the iframe content actually needs. Use this value (plus 20–40px buffer) as your height.

10. Quick Reference Cheat Sheet