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

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

  • 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

    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

    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