Aleš Sýkora / June 15, 2021 / 4 comments

Use custom Javascript on form submission with Fluent Forms

Post summary: If you need to use your custom script on form submission and using Fluent Forms, use this code in your form’s custom JS settings.

If you need to use your custom script on form submission and using Fluent Forms, use this code in your form’s custom JS settings.

$form.submit(function(e) {
    var email = $form.find("[name='email']").val(); // variable from form
    console.log(email); //Check if it works
    // Your custom JS event code here
    alert(1); //check if script runs well
});

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

4 comments

  • Michael Storm
    2 years ago Reply

    Awesome! How can I then add an onclick to the button to trigger the event?

  • ck
    3 years ago Reply

    Very cool. Do you know how can we check if the required fields are empty. Or can we use the fluent form validation first before triggering the custom JS code?

  • A
    Aleš Sýkora
    2 years ago Reply

    If you need to add on click event, use jQuery for that. This tutorial is for using JS AFTER the click.

    Something like this should be helpful

    
$( "#fluent_button" ).on( "click", function() {
  console.log( $( this ).text() );
});
  • A
    Aleš Sýkora
    3 years ago Reply

    Hi Kevin, I am not sure right now. I suggest to ask fluent form support and let us know here in the comments. Have a nice day!

Share Your Thoughts