In order to install Google Tag Manager, I need the ID of the form submit button. I watched some video’s from other community posts and there is always an ID visible in the Elements code (when you click Inspect) in the browser.
unfortunately, i can’t find the ID of my form when doing that. I attached the link to the form below and the only thing I need is the id from the submit button.
For this purpose, I removed all the fields and just let the form show the submit button.
My question is : what is the id from the submit button and how did you find it??
I don’t know how Google tag manager works, so I am not sure if this is feasable. You might give the button a custom CSS-class name. That could give you the identification of the element.
But I asked chatgpt about this and you can use a class instead of an ID to target a submit button in Google Tag Manager (GTM).
Here’s what it said:
In fact, GTM triggers and variables are quite flexible when it comes to selecting elements on a page. Here are some points to consider:
Using a CSS Selector:
GTM’s built-in Click and Form triggers allow you to specify a CSS selector. Instead of using something like #submit-button for an ID, you can use .your-button-class for a class. For instance, if your button looks like this:
html
Copy code
<button class="submit-button">Submit</button>
You can set your GTM trigger to fire when the clicked element matches the CSS selector .submit-button.
2. Uniqueness of the Class:
Ensure that the class you’re using is unique to that particular button or a specific set of elements you want to track. If multiple buttons share the same class, the trigger will fire for all of them, which may or may not be what you want.
3. Trigger Configuration:
In GTM:
Go to Triggers and create a new Click or Form Submission trigger.
Choose Just Links or All Elements, or in case of form, a Form Submission trigger.
Under This trigger fires on, select Some Clicks (or Some Form Submissions).
Use a condition like Click Element matches CSS selector .submit-button.
Verifying the Setup:
Once you’ve set this up, preview your GTM container and test the interaction on your site. Make sure that when you click the button, the correct trigger fires and the associated tags (e.g., event tags sending data to Google Analytics) are activated.
In summary, while using an ID is often the simplest approach due to its uniqueness, classes are perfectly acceptable as long as the trigger conditions are set carefully and the class uniquely identifies the element(s) you want to track.
Wow, thank you @Kristen, I think I can handle it now, but just one question. After inspecting the element/ class it appears to be that this is the (default) class of the submit button
" button class=“btn btn-success af-form-submit btn-warning” type=“button” ng-click=“saveRecord()” ng-disabled=“options.settings.submitBtnStatus == ‘Disable’ || options.submitBtnStyleStatus || isSaving || recordSave == ‘saving’” ng-style1=“submitBtnStyle(record)” data-default=“What is the id from this submit button?”> What is the id from this submit button?"
My question is: how do I rename this class to e.g. “button-landingpage1” or something which makes it easier for me to understand? I can only rename the CSS class, but when I do this the shaping and colouring (e.g. btn-warning or btn-succes) is not working anymore.
When I copy the page (say, for landingpage 2), the class of the element stays the same. So I need to rename it to make sure no double tracking is done.
I added this code (from Chatgpt), but it doesn’t work:
// Selecteer alle elementen met de class “button.btn.btn-success.af-form-submit.btn-warning”
const elements = document.querySelectorAll(‘button.btn.btn-success.af-form-submit.btn-warning’);
// Loop door elk element en vervang de class
elements.forEach(element => {
element.classList.remove(‘button.btn.btn-success.af-form-submit.btn-warning’); // Verwijder de oude class
element.classList.add(‘btn-landingpage-1’); // Voeg de nieuwe class toe
});
You can go in the page builder.
Click on the form and go to options and give the submit button a css class - in this case I used a existing class “btn-success” - you can give it any name.
thank you, but this also changes the colour of the button… So I prefer to have the class have the same specifications as btn-succes (which is a green colour), but rename the class to “submit-page-1”
The issue is solved with some external help.
It’s possible to do a trigger on Click Elements, based on 2 criteria (Text of Submit Button) and ( Page Url)
