Streaming live at 10am (PST)

onClick for Form Submit

Hey guys,

I have a form set up that connects to the CMS to create a div block (Zapier) upon form submit. When the user presses the native “Submit” button, I want the background color to fill the newly created div block using JS code (as is done in the codepen).

Does anyone know how to handle the onClick function of the button? I tried adding as data-attribute but it errors as reserved name.

Thanks,

https://codepen.io/moofawsaw/pen/owwaMO

Webflow reserves the onClick and other element attributes for security reasons.

You could delete the native submit button and introduce one using a custom embed like this;

<input type="submit" onclick="your attribute/function" value="Submit"/>

Alternatively you could add code to the footer section of your page to prevent the default submission on click and then run your function;

<script>
$('.submit-button-class').click( function() {
	event.preventDefault();
       
        //run your function here

  });

</script>
3 Likes

Hi @AlexManyeki , and anyone listening, I want to do this for tracking user actions using a Google tag for Ads tracking.
I want to keep the button working as-is, and simply add to it the on-click event for the tag to register that the button was clicked.

Do you know if that is possible using your alternate method? I imagine it would require the footer section code, eliminating the prevent default line so as to keep the original functionality of that button.

Thanks!

1 Like

You can listen for the success message that appears after the form is successfully submitted and then you can run your code.
First: Add an id to the success message div.

var successMessage = document.getElementById('success-message-div-id');
var observer = new MutationObserver(function(){
    if(successMessage.style.display == 'block'){
        //add your codes here
    }
});
observer.observe(successMessage, { attributes: true, childList: true });