External Site Embedding ( iframe / JavaScript )

Form Plant forms aren't limited to your WordPress site — you can also embed them on external sites using an iframe or a JavaScript snippet. This is handy when you want to serve a form on a landing page ( LP ) or a site on a different domain while keeping all the form settings managed in one place.

Which One to Use

Method	Characteristics	Recommended For
iframe	The simplest option. Displays the form in complete isolation.	Static HTML sites, quick drop-in embedding
JavaScript	Easier to blend in with the parent site's design.	Seamless integration into LPs / web apps

1. Enable Embedding

External embedding is disabled by default. You must explicitly enable it for each form you want to use.

1. Open "Form Plant" → the target form in the WordPress admin.
2. Open the "Form Settings" → "External Use" tab.
3. Check "Allow iframe embedding" or "Allow JavaScript embedding".
4. Enter the domains you want to allow embedding from in "Allowed Site URLs" ( one per line for multiple ).
5. Save.

For security, embeds from domains that aren't allowed are blocked.

2. Embed with an iframe

Paste the following tag into the HTML of the host page ( replace {form_id} with the actual form ID and {your-site} with your WordPress site's domain ).

<iframe
  src="https://{your-site}/wpfplant-embed/{form_id}/"
  width="100%"
  height="800"
  frameborder="0"
  style="border: none;"
></iframe>

iframe URL Format

https://{your-site}/wpfplant-embed/{form_id}/

• {form_id} is the ID shown in the form list in the WordPress admin.
• Don't forget the trailing slash.

Adjusting the iframe Height

The required height varies depending on the form's content. Because the content also changes throughout the submission flow, consider setting height generously large, or listening for a resize event in JavaScript.

3. Embed with JavaScript

Paste the following into the HTML of the host page.

<div id="fplant-form-container"></div>
<script
  src="https://{your-site}/wp-content/plugins/form-plant/public/embed.js"
  data-form-id="{form_id}"
  data-target="#fplant-form-container"
></script>

JavaScript embeds are easily affected by the parent page's CSS, so override conflicting styles in the form's custom CSS as needed.

How to Test

For local testing, you can use the external-site/ directory in the repository ( the external-site service in Docker Compose ).

• External test site: http://localhost:8083/
• iframe test: http://localhost:8083/iframe-test.php
• JavaScript embed test: http://localhost:8083/js-embed-test.php

Before testing from the external site, register http://localhost:8083 as an allowed site on the WordPress side.

Troubleshooting

Symptom	Cause / Solution
iframe is blank	"External Use" is disabled, or the URL isn't registered in the allowed sites.
JavaScript embed doesn't appear	Check the data-form-id value of the script and confirm that the element specified by data-target exists.
CORS error	Register the allowed site URL exactly ( watch out for http:// vs. https:// differences too ).
Layout is broken	The parent page's CSS is interfering. Override it in the form's custom CSS using !important, etc.