Adding a Custom Attribute to a Form Button on Your Plate Website

Introduction

This guide will walk you through the steps to add a custom attribute to a form button on your Plate website. For this explanation, we'll be adding the attribute name="submit-button" to a submit button for a form we want to read out using the Mouse click action, followed by the Fetch input fields event in a Tracker.

Step 1: Log in to Your Plate Account

1. Open your web browser and go to the Plate login page.
2. Enter your username and password, then click the "Login" button.

Step 2: Navigate to the Site Settings

1. Once logged in, you will be on your Plate dashboard.
2. Find the site you want to edit and click on it to open the site management page.
3. Look for a menu item or section labeled "Settings" or "Site Settings" and click on it.

Step 3: Access Code Injection

1. In the site settings, find the section for "Codes".
2. This section is typically where you can add custom HTML, CSS, or JavaScript to your site.

Step 4: Add Custom JavaScript

1. In the "Codes" section, you will see an area where you can add custom scripts.

Copy the following JavaScript code:

document.addEventListener('DOMContentLoaded', function() {
.   const verzendenSpan = document.querySelector('.form-button .button-wrapper .button-wrapper-inner .button .fl-container .fl-container span');
    if (verzendenSpan && verzendenSpan.textContent.trim() === 'Verzenden') {
        const wrappingDiv = verzendenSpan.closest('.button-wrapper-inner.fl-container.fl-row');
        if (wrappingDiv) {
            wrappingDiv.setAttribute('name', 'submit-button');
        }
    }
});

Paste the copied code into the custom code section in Plate.

Step 5: Save and Publish

1. Save the changes you made in the settings.
2. Publish your site to ensure the JavaScript code is executed on the live site.

Conclusion

By following these steps, you have successfully added a custom attribute to the form button on your Plate website. This attribute can now be used to track button clicks in your application, using Sidetracker.

If you need further assistance, please refer to Plate’s support documentation or contact Sidetracker's support team for more detailed integration help.