JIT
Create a javascript widget to embed a form with auto-adjusting height
Log in
@emakoonline
write javascript widget code that can call the form content from this url = https://radiance.al/forms/contatti/index.php and it can be embed easily on any html element in a page. The height must be auto adjusted according to the content of the form
DeepSeek V3

Here's a JavaScript widget that embeds the form from the provided URL and auto-adjusts its height:

To use this widget, add this to your HTML:

<div id="form-container" data-form-widget></div>
<script src="form-widget.js"></script>
Updated files
v1
@emakoonline
it is not working
DeepSeek V3

I'll provide a simpler and more reliable solution using an iframe with JavaScript to auto-resize the height. Here's the working implementation:

<!DOCTYPE html>
<html>
<head>
    <title>Embedded Form</title>
    <style>
        #form-container {
            width: 100%;
            border: none;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="form-container">
        <iframe id="form-iframe" src="https://radiance.al/form/contatti/index.php" width="100%" frameborder="0" scrolling="no"></iframe>
    </div>

    <script>
        // Function to adjust iframe height based on content
        function resizeIframe() {
            const iframe = document.getElementById('form-iframe');
            try {
                const doc = iframe.contentDocument || iframe.contentWindow.document;
                iframe.style.height = doc.body.scrollHeight + 'px';
            } catch (e) {
                console.log('Error resizing iframe:', e);
            }
        }

        // Resize when iframe loads and periodically to catch dynamic content changes
        document.getElementById('form-iframe').onload = function() {
            resizeIframe();
            // Check for height changes every 500ms
            setInterval(resizeIframe, 500);
        };
    </script>
</body>
</html>

To use this:

  1. Copy the entire code above
  2. Save it as an HTML file (e.g., form-embed.html)
  3. Open the file in a browser

Note: For this to work properly, the form page must be on the same domain as your page (due to same-origin policy). If you're embedding a form from a different domain, you'll need to:

  1. Ask the form provider to add a JavaScript snippet to their page that posts the height to your parent page using window.postMessage()
  2. Or use a server-side proxy to fetch the form content

If you need a cross-domain solution, please let me know and I can provide an alternative approach.

@emakoonline
I do have control on both contents. Generate a solid solution
DeepSeek V3

Got it! Since you have control over both the parent page and the form page, we can implement a robust solution using postMessage for cross-origin communication. Here's the complete solution:

1. On the Parent Page (where you want to embed the form):

<!DOCTYPE html>
<html>
<head>
    <title>Embedded Form</title>
    <style>
        #form-container {
            width: 100%;
            border: none;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="form-container">
        <iframe id="form-iframe" src="https://radiance.al/form/contatti/index.php" width="100%" frameborder="0" scrolling="no"></iframe>
    </div>

    <script>
        // Function to handle messages from the iframe
        function handleMessage(event) {
            if (event.origin !== "https://radiance.al") return; // Security check
            
            if (event.data.type === 'resize') {
                document.getElementById('form-iframe').style.height = event.data.height + 'px';
            }
        }

        // Listen for messages from the iframe
        window.addEventListener('message', handleMessage, false);
    </script>
</body>
</html>

2. On the Form Page (https://radiance.al/form/contatti/index.php):

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
    <style>
        /* Your existing form styles here */
    </style>
</head>
<body>
    <!-- Your existing form content here -->
    
    <script>
        // Function to calculate and send height to parent
        function sendHeight() {
            const height = document.body.scrollHeight;
            window.parent.postMessage({
                type: 'resize',
                height: height
            }, 'https://your-parent-domain.com'); // Replace with your parent domain
        }

        // Send height on load and when content changes
        window.addEventListener('load', sendHeight);
        window.addEventListener('resize', sendHeight);
        
        // If your form has dynamic content, observe mutations
        const observer = new MutationObserver(sendHeight);
        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true
        });
    </script>
</body>
</html>

Key Features of This Solution:

  1. Secure Communication: Uses postMessage with origin checking to prevent security issues
  2. Real-time Resizing: Automatically adjusts when:
    • Page loads
    • Window resizes
    • Content changes (via MutationObserver)
  3. Cross-browser Compatible: Works in all modern browsers
  4. No Dependencies: Pure JavaScript solution

Implementation Steps:

  1. Add the parent page code to your website where you want the form embedded
  2. Update the form page with the provided JavaScript
  3. Replace https://your-parent-domain.com with your actual domain
  4. Test the implementation

This solution will ensure the iframe always matches