Prevent Netlify Form Redirect After Submit

Hello!

I was wondering if there’s a way to prevent a form redirect after a successful form submission. After completing the form, I would like for the user to stay on the same page and not be redirected to a success page. Can this be done by changing the action attribute? Please see my code below.

<form
    className='contact-form'
    id='contact-form'
    name='Contact Form'
    method='POST'
    data-netlify='true'
    action=''
    onSubmit={handleFormValidation}
  >
    <div className='name'>
      <label htmlFor='name'>Name</label>
      <input
        type='text'
        name='name'
        id='name'
        value={formValues.name}
        onChange={handleFormValues}
      />
      <div>{errorValues.name}</div>
    </div>
    <div className='email'>
      <label htmlFor='email'>Email</label>
      <input
        type='text'
        name='email'
        id='email'
        value={formValues.email}
        onChange={handleEmailValidation}
      />
      <div>{errorValues.email}</div>
    </div>
    <div className='subject'>
      <label htmlFor='subject'>Subject</label>
      <input
        type='text'
        name='subject'
        id='subject'
        value={formValues.subject}
        onChange={handleFormValues}
      />
      <div>{errorValues.subject}</div>
    </div>
    <div className='message'>
      <label htmlFor='message'>Message</label>
      <textarea
        style={{ resize: 'none' }}
        name='message'
        id='message'
        value={formValues.message}
        onChange={handleFormValues}
      ></textarea>
      <div>{errorValues.message}</div>
    </div>
    <button type='submit' name='submit' id='submit'>
      Submit
    </button>
  </form>

Based on your onSubmit handler - im assuming this is react.
You can 100 % dictate the behavior of submit handlers through react.

Netlify lets you use their default post submit page, you can also set your own custom page.
You have the action prop listed with no value - by default netlify will route you to their standard success page.

I would try removing action prop, and handling UX through your onSubmit handler

1 Like