Redirect error to url instead of error message

  • When people miss to fill in a required field in a form, and submit the form, the page jumps back to the top of the page.

    However, on the page where my form is there is a lot of text before the form, so it is easy for people to miss the error message that by default is placed on top of the form – since on my page the large chunk of text comes first, then the form.

    Here is my page: https://www.bobstterapi.se/kurser/sjalvmedkansla-helgkurs/

    I would like instead that the people get redirected to a new page, like the redirect after a successfully completed form. That way the see easily that something went wrong, and then can go back to the page – ideally with the red error text where the problem fields were.

    Does anyone know how to do this?

    Thanks!
    Castalina

    https://www.ads-software.com/plugins/ninja-forms/

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hello! Thank you for using Ninja Forms! I understand the problem you have. You can do either of the two suggestions I am about to give.

    1) Go to the Email and Actions tab (in the backend) and set an action of the type of “Success Message” to show a success message upon submission of the form.

    OR

    2) Go to the Email and Actions tab (again, in the backend) and set an action of the type of “Redirect” and there you can configure what page the user should be sent to upon submission of the form.

    Thread Starter castalina

    (@castalina)

    Thanks,

    I have set up a redirect page when a form is succesfully completed,

    What I want to do is to make a similar redirect when there are errors in the form, a url page “Oops, something went wrong…” type of thing.

    Instead of the default error message displaying on the page, that is easy to miss for people. They may think they have sent the form when actually it has gotten stuck.

    Do you know how to do this?

    There’s no option to set a redirect page for form error messages. What you can do is you can change what the error message(s) says by going to the backend -> Forms -> Settings -> Labels.

    Based on the info here:
    https://docs.ninjaforms.com/customer/portal/articles/2045697-faq#faq_ajax

    You might try the following. Create a file called ninja-form-error.js and put this code in it:

    jQuery(document).on('submitResponse.example', function( e, response ){
    if ( response.errors == true ) {
        // Code to be fired upon a submission here
	window.location.replace("https://new-location-here.com");
    }
    return true;
});

    Put the ninja-form-error.js file in your js directory in WP. Hope this helps.

    Actually you may want to replace

    window.location.replace("https://new-location-here.com");

    with

    window.location.assign("https://new-location-here.com");

    so you can use the back button to go back to the form.

    Thread Starter castalina

    (@castalina)

    Thanks jazzmot, I really want to try that.

    I am a newbie at this – where do I find the js directory and how do I create the ninja-form-error.js file?

    The js directory may or may not already be in your theme directory depending on the theme you’re working with. I’m using a sub-theme of Genesis so I have created a sub-theme located in:

    wp-content/themes/my-sub-theme

    My js directory is inside my sub-theme directory:

    wp-content/themes/my-sub-theme/js

    IMPORTANT NOTE: You should always create a sub-theme if you are doing any theme edits. If you don’t create a sub-theme, when your theme gets updated, your edits will be overwritten (i.e., deleted).

    If the js directory doesn’t exist you can create it. I’m assuming that you have at least FTP access to your web root on a remote server. You can create the ninja-form-error.js file with a text editor. Once you have created the js file, upload it to the wp-content/themes/my-sub-theme/js directory on the server.

    It sounds like you are developing on a remote server. Is this the case?

    Just for the record, it is not called a sub-theme. It is called a child theme.

    @castalina, you can create a child theme by following the instructions: create a child theme.

    @respectyoda Sorry was thinking in Drupal!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Redirect error to url instead of error message’ is closed to new replies.