Skip to content
FillFaster

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:

  1. form_loaded: Sent when the form is fully loaded.
    {
    action: 'form_loaded'
    }
  2. 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

  1. 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.

  2. Embed the Form: Use the <iframe> tag to embed your FillFaster form. Ensure the src attribute points to your specific form URL on FillFaster.

  3. 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.