Hidden element (Forms) - UTM param example

by support_tint

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- Asynchronously load the Tint script -->
    <script async src="https://www.tintup.com/app/dist/tint.js"></script>

    <script>
        // Function to get specific UTM parameters from the current URL
        function getUTMParameters() {
            const urlParams = new URLSearchParams(window.location.search);
            const utmParams = {};
            ['utm_source', 'utm_medium', 'utm_campaign'].forEach(param => {
                if (urlParams.has(param)) {
                    utmParams[param] = urlParams.get(param);
                }
            });
            return utmParams;
        }

        // Create a new div element to hold the Tint form
        const tintForm = document.createElement('div');

        // Set the teamId attribute to your team's ID
        tintForm.dataset.teamId = 374768; // Paste your teamID here

        // Set the formId attribute to your form's ID
        tintForm.dataset.formId = 1765; // Paste your form ID here

        // Get UTM parameters and set them as form values
        const utmParams = getUTMParameters();
        tintForm.dataset.formValues = (new URLSearchParams(utmParams)).toString();

        // Append the newly created div after the current script
        document.currentScript.after(tintForm);
    </script>
</body>
</html>