Embedding FillFaster Form with iframe Integration
This guide will show you how to embed a FillFaster form into any website or web application using an iframe, including how to handle communication between the parent page and the iframe.
Events Sent from FillFaster FillFaster sends the following events to the parent page:
- form_loaded:
Sent when the form is fully loaded.
{action: 'form_loaded'}
- submitted_successfully:
Sent when the form is successfully submitted.
{status: 'submitted_successfully',submission_id: 'sdf23g...'}
Embedding with iframe
To embed a FillFaster form using an iframe, you can use the following example code:
<script type="text/javascript"> // Event listener for messages from iframe window.addEventListener('message', function(event) { // You might want to check event.origin for security // if (event.origin !== "https://fillfaster.com") return;
console.log("Received event:", event.data);
// Handle different types of messages if (event.data.action === 'form_loaded') { // Handle form loaded event console.log('Form loaded event received'); // Add your form_loaded logic here }
if (event.data.status === 'submitted_successfully') { // Handle successful submission console.log('Form submitted successfully'); console.log('Submission ID:', event.data.submission_id); // Add your submission success logic here, e.g., redirect or show a success message // window.location.href = '/thank-you-page'; }
}, false);</script>
<iframe src="https://fillfaster.com/fill/b8cqP.." width="100%"></iframe>
Step-by-Step Instructions
-
Add the Event Listener: Insert the <script> tag with the event listener into your HTML. This script listens for messages from the iframe and handles the events accordingly.
-
Embed the Form: Use the <iframe> tag to embed your FillFaster form. Ensure the src attribute points to your specific form URL on FillFaster.
-
Handle Events:
- form_loaded: This event confirms that the form has loaded. Use this to trigger any actions needed when the form is ready.
- submitted_successfully: This event confirms that the form has been successfully submitted. You can use this event to trigger a redirect, display a success message, or any other logic.