If you're encountering issues while embedding a form into your website, follow these detailed instructions to correct the problem. This method involves tweaking the embed code to prevent unwanted resizing and ensuring that the form integrates seamlessly with your website’s layout.
Step 1: Get the Embed Code
First, locate and copy the embed code provided by the CRM for the form you'd like to embed on your site.
Step 2: Select the Embedding Location
Decide where you'd like the form to appear on your website. This can be a specific post, page, or even a widget area depending on your site's layout.
Step 3: Add a Custom HTML Element
Next, open your website’s editor and insert a custom HTML block or element. For WordPress users, this is done through a ‘Custom HTML’ block.
Step 4: Adjust the Embed Code
Before embedding the code, you’ll need to make an essential modification:
Locate the section of the code that controls the form’s automatic height adjustment. This script is often the cause of embedding problems.
Either remove or comment out this script to stop it from auto-resizing the form.
Step 5: Manually Set the Form’s Height
Once the auto-adjusting script is removed, set the form's height manually. You can add this height directly to the embed code or use CSS. Start with a height around 200px, then adjust it accordingly.
Step 6: Test and Fine-Tune
After embedding the form with the updated code, preview the website to ensure the form is displayed correctly. If it still doesn't appear as desired, continue tweaking the height until the layout fits perfectly.
Troubleshooting and Tips
Form Not Displaying Correctly?
If the form still appears incorrectly, there might be a conflict with your website’s theme or any installed plugins. Disable conflicting elements to troubleshoot.Responsive Design:
Make sure the form adapts well to mobile devices by using CSS media queries to adjust its dimensions based on screen size.
Frequently Asked Questions
Can I Use This Method on Non-WordPress Platforms?
Yes! This technique applies to any website platform that allows custom HTML embedding.What if I’m Unfamiliar with HTML or CSS?
If you're uncomfortable editing code, use your platform’s built-in form elements for easy integration.
This method should help you resolve any embedding issues, allowing your form to display seamlessly across your website.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article