Embed an Aesthetix CRM form on your WordPress site using an iframe, with builder-specific steps, responsive sizing, and troubleshooting.
Aesthetix CRM forms are embedded on your WordPress website through an iframe, an HTML element that loads a separate page inside your page. When a patient fills out the form, the data submits directly to Aesthetix CRM, creating or updating a contact and triggering any associated automations. This guide walks through getting your embed code, adding it in every major WordPress page builder, making it responsive, and fixing the most common display issues.
The form runs on Aesthetix CRM servers and loads into your page via an iframe, so it behaves consistently no matter which WordPress theme or plugin stack you use.
Why iframes:
No plugin dependencies: The form runs on Aesthetix 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.
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 manage for each page.
Before embedding on WordPress, you need the iframe snippet from Aesthetix CRM.
Log in to your Aesthetix CRM dashboard.
Navigate to Web Tools → Forms (or Web Tools → Surveys if you are using a survey).
Click the form you want to embed, then click the Integrate Form button (or the share/embed icon).
Select the Iframe/Embed option. You will see code that looks like this:
<iframe
src="https://link.aesthetixcrm.com/widget/form/XXXXXXX"
style="width:100%;height:600px;border:none;"
id="inline-XXXXXXX"
data-layout="inline"
data-trigger-type="alwaysShow"
data-trigger-value=""
data-activation-type="alwaysActivated"
data-activation-value=""
data-deactivation-type="neverDeactivate"
data-deactivation-value=""
data-form-name="Your Form Name"
data-height="600"
data-layout-iframe-id="inline-XXXXXXX"
data-form-id="XXXXXXX"
title="Your Form Name"></iframe>
<script src="https://link.aesthetixcrm.com/js/form_embed.js"></script>Copy the entire code snippet (both the <iframe> tag and the <script> tag). You will paste this into your WordPress page builder.
Form is tested and working in the 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)
Elementor is the most common page builder across practice sites. There are two approaches depending on what works best for your layout.
Open the page in Elementor and drag an HTML widget into the desired section.
Paste your full embed code (iframe + script) into the HTML code area.
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.
Publish or Update the page.
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.
Column width: If the form is inside a narrow column (for example, 50% or a 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 you are using the new container layout, set the container's Content Width to "Full Width" and alignment to stretch for the most predictable results.
WordPress's built-in Gutenberg editor works well for embedding iframe forms with minimal configuration.
Open the page in the WordPress editor.
Click the + icon to add a new block. Search for Custom HTML and select it.
Paste the full embed code (iframe + script) into the block.
Click the Preview tab within the block to verify it renders.
Update/Publish the page.
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.
Open the page in Beaver Builder.
Add a new row or select an existing one. Drag in the HTML module (under Basic Modules).
Paste the full embed code into the HTML editor.
Click Save, then preview the page.
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.
Open the page in WPBakery (Backend or Frontend editor).
Add a Raw HTML element (found under Content elements). Do NOT use the Text Block element, since it will strip out the iframe and script tags.
Paste the full embed code into the Raw HTML content area.
Save the element, then preview the page in a new tab to verify.
Note: 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.
The Backend Editor will not render a live preview of the iframe. This is normal. You must preview the published page.
If you are using the Frontend Editor, the iframe may render but may not display at the correct height until you view the live page.
Divi is another popular builder you may encounter. The approach is similar to the others.
Open the page in Divi Builder (Visual or Backend).
Add a new module. Search for and select the Code module (not the Text module).
Paste the full embed code into the Code module's content area.
Save and preview. In Visual Builder, the form may appear as a gray placeholder. This is expected. Check the live page.
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.
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.
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 (for example, 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.
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.
/* Desktop - default height */
iframe[data-form-id] {
width: 100%;
height: 600px;
border: none;
}
/* Tablet */
@media (max-width: 1024px) {
iframe[data-form-id] {
height: 700px;
}
}
/* Mobile */
@media (max-width: 767px) {
iframe[data-form-id] {
height: 800px;
}
}Builder | Responsive Configuration |
|---|---|
Elementor | Use the responsive mode toggle (desktop/tablet/mobile icons) to set different section padding per breakpoint. The HTML widget itself does not have responsive controls, so use the CSS method above for height. |
Gutenberg | The Custom HTML block does not have per-device settings. Use the CSS media query approach or wrap in a Group block and adjust spacing per breakpoint via the editor's responsive controls. |
Beaver Builder | Row and module settings include separate fields for desktop, tablet, and mobile margins/padding. Adjust the row padding for each breakpoint. For iframe height, use CSS. |
WPBakery | WPBakery has limited native responsive controls. Rely on the CSS media query method for height adjustments. Check that the row's "Responsive Options" are not hiding the column on mobile. |
Divi | Divi offers per-device spacing controls on almost every element. Adjust the Code module's section/row padding for tablet and phone under Design → Spacing. For height, use CSS. |
Issue | Likely Cause | Solution |
|---|---|---|
Form is cut off / shows scrollbar | Iframe height is shorter than form content | Increase the height value in the iframe style attribute. Mobile may need 800–1000px. Test after changes. |
Large blank space below the form | Iframe height is much taller than form content | Decrease the height value. Use browser DevTools (right-click → Inspect) to find the actual form height. |
Form doesn't appear at all | Script tag was stripped by the builder or theme | Switch to a Raw HTML or Code module. Check for security plugins (Wordfence, Sucuri) that may block external scripts. |
Form appears but submissions don't reach CRM | Missing script tag or form is in preview/draft mode | Ensure the |
Form looks fine on desktop, broken on mobile | Fixed height doesn't account for stacked fields | Add responsive CSS media queries to increase height on smaller screens (see Section 8). |
Double scrollbar (page + iframe) | Iframe has overflow:scroll and page is also scrollable | Add overflow:hidden to the iframe style, and ensure the iframe height is tall enough to contain the form. |
Form loads slowly | Multiple iframes on the same page or a heavy theme | Limit to one form per page if possible. Use lazy loading: add loading="lazy" to the iframe tag. |
Form width doesn't fill container | Missing width:100% or container has a restrictive max-width | Ensure width:100% is in the iframe style. Check the parent container/column width in the builder. |
If you need to determine the exact height of the form content inside the iframe, follow these steps:
Open the live page in Chrome or Edge.
Right-click the form area and select Inspect.
In the Elements panel, find and click the <iframe> tag. You will see its current height in the Styles panel.
To see the content height, open the Console panel and type:
document.querySelector("iframe[data-form-id]").scrollHeightThis gives you the pixel height the iframe content actually needs. Use this value (plus a 20–40px buffer) as your height.
Builder | Widget to Use | Key Gotcha |
|---|---|---|
Elementor | HTML widget | Check Flexbox container width; reduce section padding |
Gutenberg | Custom HTML block | Do NOT use the Embed block; use Group block for spacing |
Beaver Builder | HTML module | Check row max-width setting; adjust mobile padding |
WPBakery | Raw HTML element | Do NOT use Text Block, since it strips iframes |
Divi | Code module | Do NOT use Text module; reduce default section padding |
Why does my form load in an iframe instead of directly on the page? Aesthetix CRM forms are hosted on the CRM's own servers and loaded into your page through an iframe. This keeps submissions flowing directly to your account with proper tracking and automation triggers, and it means any change you make in the form builder appears live on your site without editing code.
Do I need to paste both the iframe tag and the script tag?
Yes. The <iframe> tag displays the form, and the <script> tag handles proper loading and submission behavior. If the script tag is missing or stripped by your builder, the form may still appear but submissions may not reach the CRM.
My form is cut off or shows a scrollbar. How do I fix it? The iframe height is shorter than the form content. Increase the height value in the iframe's style attribute, or add responsive CSS media queries so the height grows on smaller screens. Mobile layouts often need 800–1000px because fields stack vertically.
There is a large blank space below my form. What causes that?
The iframe height is taller than the form content needs. Decrease the height value. To find the exact height required, use browser DevTools and run document.querySelector("iframe[data-form-id]").scrollHeight in the Console, then add a small buffer.
My form disappears or will not display. What should I check? The script tag was likely stripped by your builder or theme. Switch to a Raw HTML or Code module rather than a text element, and check whether a security plugin such as Wordfence or Sucuri is blocking external scripts.
Which builder element should I use to avoid the iframe being stripped? Use the element designed for raw code in each builder: the HTML widget in Elementor, the Custom HTML block in Gutenberg, the HTML module in Beaver Builder, the Raw HTML element in WPBakery, and the Code module in Divi. Avoid text blocks and the Gutenberg Embed block, which sanitize or misrender iframes.
Why does the form show as a gray box or placeholder in my builder's editor? Some builders, including Divi's Visual Builder and WPBakery's Backend Editor, do not render live iframes inside the editing view. This is expected. Preview or view the published page to confirm the form displays correctly.
How do I make the form responsive on mobile? Optimize the form in the Aesthetix CRM builder using the mobile preview toggle so fields stack cleanly, then add CSS media queries in your WordPress builder to increase the iframe height at tablet and phone breakpoints. Keeping forms short or using multi-step forms also helps on small screens.