• Resolved tslater2000

    (@tslater2000)


    I have a form that submits to stripe.

    I’d like to be able to detect when a form is being submitted and if the response was success or fail.

    I’ve searched high and low for the answer and can’t find it.

    I’ve seen this but it’s not working for me:

    jQuery(‘#forminator-module-808’).on(‘forminator:form:submit:success’, function (e, formData) {
    // replace formID with the actual Forminator form id
    // formData is the JS object which holds the submitted values.
    });

    At the very least, I need to detect when it’s a fail because right now, I’ve coded it to show a “submitting…” text on the button when clicked and would like to change it back to “submit” on fail.

    Thanks
    Todd

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @tslater2000

    I hope you are doing well.

    The :success is only going to trigger if the form is submitted.

    Can you try the forminator:form:submit:failed

    add_action( 'wp_footer', function(){
    
        global $post;
    
        if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
            return;
        }
    
        ?>
        <script type="text/javascript">
    
            jQuery('form.forminator-custom-form').on('forminator:form:submit:forminator:form:submit:failed', function (e, formData) {
                console.log( 'Something went wrong' );
            });
    
        </script>
    
        <?php
    }, 999 );

    Let us know if this worked for you.
    Best Regards
    Patrick Freitas

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hey there

    Just a fix on the code, it duplicated the on(”)

    Correct one:

    add_action( 'wp_footer', function(){
    
        global $post;
    
        if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
            return;
        }
    
        ?>
        <script type="text/javascript">
    
            jQuery('form.forminator-custom-form').on('forminator:form:submit:failed', function (e, formData) {
                console.log( 'Something went wrong' );
            });
    
        </script>
    
        <?php
    }, 999 );

    Best Regards
    Patrick Freitas

    Thread Starter tslater2000

    (@tslater2000)

    Hi Patrick

    It does not like forminator:form:submit:failed at all. Nothing happens.

    I feel like it should be super easy to do considering the forminator plugin is obviously getting a response back since it’s showing fail/success text messages on the form. I just can’t find the answer anywhere.

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @tslater2000

    I double tested it and could confirm the success code trigged after the form submission using:

    <?php
    
    add_action( 'wp_footer', function(){
    
    	global $post;
    
    	if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
    			return;
    	}
    
    	?>
    	<script type="text/javascript">
    
    			jQuery('form.forminator-custom-form').on('forminator:form:submit:success', function (e, formData) {
    					console.log( 'Something went wrong' );
    			});
    
    	</script>
    
    	<?php
    }, 999 );

    https://monosnap.com/file/IWVJRIi1oQ8xFws5ACA85rqnbEVk5V

    The Form name is PayPal but it was Stripe module,

    The forminator:form:submit:failed is going to trigger if the Submission failed, not the Stripe validation like the refused card.

    I pinged the developers to verify if have any extra hook.

    We will keep you posted.
    Best Regards
    Patrick Freitas

    Thread Starter tslater2000

    (@tslater2000)

    Hi Patrick

    I’ve tried to make this code work on my end but am having no luck. I’ve uninstalled my child theme and even inserted my form shortcode into a unique empty page with no results.

    Is it possible it’s not working because I’m in test mode? Or does it need to be forminator-pro to work?

    Thread Starter tslater2000

    (@tslater2000)

    Okay, I was able to get the code to work but it’s still not working for what I want.

    If I add this code to a page and load the page, it will show the form and also do the success function properly:

    [forminator_form id=”808″]

    HOWEVER, and this is a big one, if I have the code inserted into a php page like this:

    <?php echo do_shortcode(‘[forminator_form id=”808″]’); ?>

    it will still send all the information to stripe but will not run the success function.

    I’ve tried to figure out why the php won’t work but I have no idea.

    Thread Starter tslater2000

    (@tslater2000)

    also, the fail option doesn’t work at all either way:
    forminator:form:submit:failed

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @tslater2000

    
    HOWEVER, and this is a big one, if I have the code inserted into a php page like this:
    
    <?php echo do_shortcode(‘[forminator_form id=”808″]’); ?>

    This is weird, it should have no difference on both embed and shortcode.

    Are the wp_footer and wp_header included on the PHP page?

    also, the fail option doesn’t work at all either way:
    forminator:form:submit:failed

    Yes, as I told in the previous reply, I could see the success work, the failed didn’t trigger the event, we pinged our developers already to verify if we have any different event for stripe.

    We will update once hearing back from the team.

    Best Regards
    Patrick Freitas

    Thread Starter tslater2000

    (@tslater2000)

    Both the wp_header and wp_footer are included. I have no idea why the form works perfectly both ways but will not do the success function on the embeded.

    Thread Starter tslater2000

    (@tslater2000)

    Hi Patrick

    I figured out why the embeded code wasn’t working. The jquery script wasn’t being loaded because the embeded code was on a page and not a post so the following code was causing it not to load the jquery script below it.

    global $post;
    
    	if( ! $post instanceof WP_Post || ! has_shortcode( $post->post_content, 'forminator_form' ) ) {
    			return;
    	}

    I am, however, still in need of detecting a fail.

    Should I start a new topic for that or should I just wait here in this topic for the developers to get back to you?

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @tslater2000

    Our developers suggested a different approach.

    Could you try to use after:forminator:form:submit:

    var _event_triggered = 0;
    $('body').on("forminator:form:submit:success", function(e, formData){
    	console.log('success');
    	_event_triggered = 1;
    }).on('forminator:form:submit:failed', function(e, formData){
    	console.log('falied');
    	_event_triggered = -1;
    }).on('after:forminator:form:submit', function(e, formData){
    	if( ! _event_triggered ){
    		console.log('always');
    		// add their custom code here.
    	}
    	// reset.
    	_event_triggered = 0;
    });

    Best Regards
    Patrick Freitas

    Thread Starter tslater2000

    (@tslater2000)

    Hi Patrick

    Thanks so much for taking the time to figure this out for me.

    This new code worked but I found I didn’t need this part of the code:

    }).on(‘forminator:form:submit:failed’, function(e, formData){
    console.log(‘falied’);
    _event_triggered = -1;

    as it doesn’t do anything on fail

    and the “always” console.log is actually “fail”

    so the final code looks like this:

    `var _event_triggered = 0;
    jQuery(‘body’).on(“forminator:form:submit:success”, function(e, formData)
    {
    console.log(‘success’);
    _event_triggered = 1;

    }).on(‘after:forminator:form:submit’, function(e, formData){

    if( ! _event_triggered ){
    console.log(‘fail’);
    // add their custom code here.
    }
    // reset.
    _event_triggered = 0;
    });`

    ONE FINAL QUESTION:
    I have jQuery code that detects when the form is submitted so it changes the text of the button from “pay” to “processing…”

    However, I need to be able to detect when validation fails before the form sends to stripe (ie. “your card number is incomplete”, “your card’s expiration date is invalid”) so I can switch the button text back to “pay”

    Again, thanks for all you help.

    Todd

    • This reply was modified 2 years, 10 months ago by tslater2000.
    Thread Starter tslater2000

    (@tslater2000)

    Also, how do I css get rid of this black border?

    https://snipboard.io/jMR2zg.jpg

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @tslater2000

    Card number is validated by Stripe, independently of Forminator:

    Note: Stripe field automatically validates the card as the user fills the card details regardless of the validation behaviour set on the Behaviours tab.

    This is because Stripe field is actually generated by Stripe API library. The validation messages there also come from Stripe and I don’t really see a way to “intercept” that, at least not without complex custom code that would most likely even include modification to plugin core.

    I’m afraid this goes outside the scope of support that we can provide.

    As for the border, I suppose it could be addressed with CSS but I would need to be able to inspect it. , is there any way I could see that “live” on your site (may be some test form)?

    Kind regards,
    Adam

    Thread Starter tslater2000

    (@tslater2000)

    Stripe validation happens in two places, right? It happens while the user is typing in the card number (before clicking the submit button) and then once the user submits the form.

    I’m looking for a listener for when the user presses the submit button and it comes back as an invalid entry.

    Is that also something that forminator doesn’t read?

    I know it’s possible as I’ve seen it on another company’s form demo – I just can’t figure it out.

    As for the border, it happens when there’s focus on it as I refresh the page. I don’t really have a live sample to look at without populating a cart and billing info etc but I’ll just look into the different css classes and see which one needs to be outline: 0

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Detecting Success or Fail or Form Submit with Stripe’ is closed to new replies.