How to Embed Your Form In Elementor

1.) Copy the code to your clipboard: If you haven't already, grab the standard HTML code from the "share form" page on Growform, as you'll need to paste this into Wordpress.

2.) Log in to WordPress and edit the page with Elementor - You'll usually log in at /wp-admin or /wp-login on your main website. Navigate to the page you wish to edit, and hit "Edit with elementor":

3.) Find the HTML widget - In the widget panel, search "HTML" and drag the HTML widget onto the screen:

4.) Paste the HTML:

Use ctrl+v to paste the Growform code into the "HTML code" box:

Hit the "eye" button to preview the changes:

You should see a form similar to this embedded into your page:

5.) Tweak theme settings for the perfect embed

To get your form looking perfect in Elementor, there are some settings you may wish to adjust. To access theme settings, go to "Edit form settings" in Growform's blue nav bar, and then hit the "Theme" button at the top of the builder.

In Growform's "Theme" settings, choose Minimal under canvas setup - this option removes the header and surrounding padding.
Once you've chosen canvas setup, set the canvas background color to match the background color in Elementor, or choose "None" to make it transparent.
Remove any headers, instructions or logos at the top of your Growform form - you can always have these in Elementor.
Adjust your form's primary color (which affects progress bars and accents), as well as the range of other colour settings.

With just a few adjustments, we can get a perfect Elementor embed:

Final notes

Form too narrow? Growform takes up 100% of the width available to it, so if your form is too narrow, you likely need to increase the size available to it in Elementor.
Form not loading properly? We often get reports of caching / speed plugins like Jetpack and WP-Rocket interfering with our script. If you experience problems, you should exclude Growform from your caching plugin. You can usually do this by adding “growform” or “growform.co” to their exclusions list. Our script is designed to load fast, even without caching plugins.

FAQs

Q: The Growform form isn't as wide as I expected - how do I get it to take up more space?

A: Growform will always try to take up as much space as is given to it, so it is most likely that you need to increase the size of the surrounding element in the landing page builder. Failing that, you may need to increase the "Form width" under "Theme settings" in the Growform builder.

Q: How do I remove the space around my form to make it more compact for embedding?

A: In theme settings, you should choose minimal canvas set-up, which removes the header/footer and unnecessary spacing around your form. Under "form presentation" in theme settings, you can also reduce the padding on the top, bottom or sides as you wish.