IT Design Forms - Event Listener Example

This page demonstrates how to listen for events from embedded IT Design forms. The form below will send events to this parent window when various actions occur.

Embedded Form

Event Log

Available Events

• formLoaded - When the form is loaded and ready
• submitSuccess - When form submission is successful
• submitError - When form submission fails
• validationError - When form validation fails
• networkError - When network error occurs
• novaaiFormHeight - When iframe height changes (for responsive sizing)

JavaScript Code Example

// Listen for messages from the iframe
window.addEventListener('message', function(event) {
    // Check if this is a NovaAI form event
    if (event.data && event.data.novaaiFormEvent) {
        const eventType = event.data.novaaiFormEvent;
        const formId = event.data.formId;
        
        switch (eventType) {
            case 'formLoaded':
                console.log('Form loaded:', formId);
                break;
                
            case 'submitSuccess':
                console.log('Form submitted successfully:', formId);
                // Handle successful submission (e.g., show thank you message, redirect)
                break;
                
            case 'submitError':
                console.log('Form submission error:', event.data.error);
                // Handle submission error
                break;
                
            case 'validationError':
                console.log('Form validation failed:', event.data.message);
                // Handle validation error
                break;
                
            case 'networkError':
                console.log('Network error:', event.data.error);
                // Handle network error
                break;
        }
    }
    
    // Handle iframe height changes for responsive sizing
    if (event.data && event.data.novaaiFormHeight) {
        const iframe = document.getElementById('novaai-form');
        if (iframe) {
            iframe.style.height = event.data.novaaiFormHeight + 'px';
        }
    }
});