Preventing Duplicate Form Submissions in Tilda: Complete Guide

To implement a ban on refilling a form in Tilda, use localStorage to track submitted forms. When filling out for the first time, save a unique form identifier in localStorage, and on subsequent clicks on the button, check for the presence of this identifier, displaying a success message instead of the form.

Table of Contents

• How the Solution Works
• Implementation through localStorage
• Integration with Tilda
• Handling Popup Windows
• Alternative Methods
• Testing and Debugging

How the Solution Works

The main idea is to use the browser’s localStorage to store information about whether a form has already been submitted by a specific user. When a user first fills out and submits a form, we save a special marker in localStorage. When the user subsequently tries to open the same form, the system checks for the presence of this marker and shows a success message instead of the form.

Advantages of this approach:

• Works without page reload
• Persists even when closing the tab
• Doesn’t require a backend
• Simple implementation

However, there’s an important limitation: localStorage is tied to a specific domain and subdomain, so if you have multiple subdomains, you may need to use cookies instead of localStorage.

Implementation through localStorage

To implement this, you’ll need to add JavaScript code to manage the process. Here’s the basic algorithm:

1. Create a unique form identifier - use a unique ID for each form on your website

2. Check when opening the form - before displaying the form, check if it has already been submitted

3. Save after submission - after successful submission, save the information to localStorage

Example code for checking:

// Function to check if a form has already been submitted
function isFormSubmitted(formId) {
    const submittedForms = JSON.parse(localStorage.getItem('submittedForms') || '[]');
    return submittedForms.includes(formId);
}

// Function to mark a form as submitted
function markFormAsSubmitted(formId) {
    const submittedForms = JSON.parse(localStorage.getItem('submittedForms') || '[]');
    if (!submittedForms.includes(formId)) {
        submittedForms.push(formId);
        localStorage.setItem('submittedForms', JSON.stringify(submittedForms));
    }
}

Integration with Tilda

There are several ways to add this functionality in Tilda:

Through Zero Block

1. Open the Zero Block editor
2. Add an HTML block
3. Insert the JavaScript code
4. Set up triggers for the button and form

Through GTM integration

As mentioned in Analytics Mania, you can set up Google Tag Manager to track submitted forms through local storage:

1. Create a custom JavaScript variable
2. Set up a trigger on the submit button click
3. Add a tag to save the form ID to localStorage
4. Create separate logic for checking before opening the form

Through HTML integration

Add the following code to your Tilda page settings:

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Your form ID
    const formId = 'your-form-id';
    
    // Check if the form has already been submitted
    if (isFormSubmitted(formId)) {
        // Show success message instead of form
        showSuccessMessage();
        return;
    }
    
    // Form submission function
    function submitForm() {
        // Form submission logic
        markFormAsSubmitted(formId);
        showSuccessMessage();
    }
    
    // Bind to submit button
    const submitButton = document.querySelector('#submit-button');
    if (submitButton) {
        submitButton.addEventListener('click', submitForm);
    }
});
</script>

Handling Popup Windows

Popup forms in Tilda require additional logic:

1. Modify the open trigger - before opening the popup, check the form status

2. Manage popup content - depending on the status, show either the form or the message

3. Handle automatic closing - consider that Tilda automatically closes the form after submission

Example for popup form:

// Function to open popup with check
function openPopupWithCheck(popupId) {
    if (isFormSubmitted(popupId)) {
        // Create element with success message
        const successMessage = createSuccessMessage();
        // Show it instead of popup
        showSuccessElement(successMessage);
    } else {
        // Open regular popup
        Tilda.Forms.openPopup(popupId);
    }
}

// Replace standard popup opening
const originalOpen = Tilda.Forms.openPopup;
Tilda.Forms.openPopup = function(popupId) {
    openPopupWithCheck(popupId);
};

Alternative Methods

Using cookies

If you’re working with multiple subdomains, use cookies instead of localStorage:

// Cookie functions
function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function getCookie(name) {
    const cname = name + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(cname) == 0) {
            return c.substring(cname.length, c.length);
        }
    }
    return "";
}

Integration with external services

Services like Tally.so offer built-in mechanisms for preventing duplicates:

1. Set up a webhook to receive data
2. Use their API to check for duplicates
3. Implement logic for displaying messages

Server-side verification

If a more reliable solution is needed, implement server-side verification:

1. Send a unique ID along with the form data
2. On the server, check if a form with this ID has already been submitted
3. Return the appropriate status

Testing and Debugging

When implementing, it’s important to test various scenarios:

1. First opening - the form should open normally
2. Reopening - a success message should be shown
3. Clearing localStorage - after clearing, the form should open again
4. Different browsers - check operation in different browsers
5. Incognito mode - ensure it works correctly

For debugging, use the browser console:

// Enable logging
console.log('Checking form:', formId);
console.log('Submitted forms:', localStorage.getItem('submittedForms'));
console.log('Form already submitted:', isFormSubmitted(formId));

Sources

1. Prevent Duplicate Form Submissions with Google Tag Manager - Analytics Mania
2. Prevent duplicate submissions - Tally.so Help
3. How to Set Up Forms on Tilda - Official Documentation
4. Multiple Form Submission Prevention - Will Master
5. How do I create a pop-up window? - Tilda FAQ

Conclusion

To implement a ban on refilling forms in Tilda, it’s recommended to use localStorage while considering the following points:

• Create a unique identifier for each form on the site
• Implement checking before opening the form via JavaScript
• Save submission status in localStorage after successful submission
• Consider Tilda features - automatic form closing and popup behavior
• Test the solution in different usage scenarios

If standard methods don’t work, consider alternatives with cookies or external services. For more reliable protection, you can combine multiple approaches simultaneously.