To address and resolve these embedding issues, follow the detailed steps below. This process involves adjusting the embed code to prevent automatic resizing and ensure the form fits perfectly within your site's design.
Obtain the Embed Code: Start by copying the embed code provided by the CRM for the form you wish to embed.
Choose the Right Place for Embedding: Decide where on your website you want the form to appear. This could be a specific page, post, or widget area.
Add a Custom Element: In your website's editor, add a custom element where you can paste the embed code. For WordPress, this might involve using a 'Custom HTML' block.
Modify the Embed Code: Before pasting the embed code, make a crucial adjustment:
Locate the script within the embed code responsible for auto-adjusting the form's height. This script is often the culprit behind the embedding issues.
Remove or comment out this script to disable the automatic height adjustment feature.
Manually Set the Height: With the auto-adjust script removed, you'll need to manually set the height of the form. Do this by adding a height attribute directly in the embed code or through CSS styling. Start with a reasonable height, such as 200px, and adjust as necessary.
Test and Adjust: After embedding the form with the modified code, preview your website to see how the form appears. If the form is still not displaying correctly, incrementally adjust the height until you achieve the desired result.
Form Still Not Displaying Correctly? If issues persist, check for conflicts with your website's theme or other plugins that might affect the form's appearance.
Responsive Design: To ensure the form looks good on mobile devices, consider adding responsive CSS rules or using media queries to adjust the form's dimensions based on screen size.
Can I apply this solution to platforms other than WordPress? Yes, this approach is not limited to WordPress. It can be applied to any website platform that allows custom HTML embedding.
What if I'm not comfortable editing HTML or CSS? Integrate forms built on the platform using the “Form” element instead.
