Custom success page ignored on React (Formik) form

Support
,
1

Hiya,

I have a site that’s setup on https://engageelectronics.netlify.com/ that has the following formik form:

<form name="bookings" method="POST" action="/thank-you/">
        <input type="hidden" name="form-name" value="bookings" />
        <div className="multi-column">
          <label>
            Name
            <span>What's your name?</span>
            <input
              id="fullName"
              name="fullName"
              type="text"
              onChange={formik.handleChange}
              value={formik.values.fullName}
            />
          </label>
          <label>
            Phone number
            <span>What number can we contact you on?</span>
            <input
              id="phoneNumber"
              name="phoneNumber"
              type="tel"
              onChange={formik.handleChange}
              value={formik.values.phoneNumber}
            />
          </label>
        </div>
        <div className="multi-column">
          <label>
            Email address
            <span>And your email address?</span>
            <input
              id="emailAddress"
              name="emailAddress"
              type="email"
              onChange={formik.handleChange}
              value={formik.values.emailAddress}
            />
          </label>
          <label>
            Location
            <span>Where is the faulty appliance?</span>
            <select
              id="location"
              name="location"
              onChange={formik.handleChange}
              value={formik.values.location}
            >
              {locations.map(location => (
                <option key={location.label} value={location.value}>
                  {location.label}
                </option>
              ))}
            </select>
          </label>
        </div>
        <label>
          Description of your appliance
          <span>
            Tell us the name and model of your appliance, e.g. Samsung
            UA-46EH5300
          </span>
          <input
            id="applianceDescription"
            name="applianceDescription"
            type="text"
            onChange={formik.handleChange}
            value={formik.values.applianceDescription}
          />
        </label>
        <label>
          Problem with your appliance
          <span>Tell us what's wrong with your appliance</span>
          <textarea
            id="applianceProblem"
            name="applianceProblem"
            onChange={formik.handleChange}
            value={formik.values.applianceProblem}
            rows="6"
          ></textarea>
        </label>
        <div className="multi-column">
          <label>
            Preferred Date for Repair
            <span>When should our technician visit?</span>
            <SingleDatePicker
              numberOfMonths={1}
              date={date}
              onDateChange={date => setDate(date)} 
              focused={focused} 
              onFocusChange={({ focused }) => setFocused(focused)}
              id="preferredDateForRepair" 
              openDirection={OPEN_UP}
              noBorder={true}
              block={true}
              displayFormat="dddd, DD MMMM YYYY"
            />
          </label>
          <label>
            Preferred Time for Repair
            <span>What time is best for you?</span>
            <TimePicker id="preferredTimeForRepair" />
          </label>
        </div>
        <input type="submit" value="Submit booking" />
      </form>

Submission is being handled using a static HTML version of the form and I’m receiving the form submissions just fine. However, even after adding the action attribute as specified in the documentation, my form still displays the Netlify success page instead of the custom one. See screenshot below:

image
image1850×810 57.4 KB

I have tried using a different /thankyou URL, and switched from a submit button to submit input…

I have read through the other posts that mention the same issue but haven’t been to replicate their success in my particular case.

2

Hey, and welcome to the forum :slight_smile: at first glance, this looks good to me, and when I go to Engage Electronics | On-site Appliance Repairs. Johannesburg and Pretoria, this is what I see:

Screen Shot 2020-03-11 at 3.36.56 PM
Screen Shot 2020-03-11 at 3.36.56 PM1762×1482 231 KB

Are you still having this issue? If so, we’d be happy to dig in further but just wanted to confirm.

3

Hi @jen

I’m still having this issue. The idea is not to visit the page directly, but for it to be displayed after one completes and submits the form. So instead of displaying the generic Netlify “thank you” message I’d like to display the custom thank you page as described here: Forms setup | Netlify Docs

4

Got it, thanks for clarifying. I think you’ll need to add an onSubmit method inside your BookingForm component, something like what is described here. So:

  • import { withRouter } from 'react-router-dom';
  • add the onSubmit method:
	submitForm (e) {
		e.preventDefault()
		this.props.history.push('/thank-you');
	}
  • add onSubmit={this.submitForm.bind(this)} inside your <form> tag

Do you want to give that a shot and let us know how it goes?

5

Hi, Jen.

  1. You create method “submitForm(e)”, but you don’t seem to reference it anywhere?

  2. Any idea how to do the same using hooks instead of class component?

  3. Adding action=’/success-page-url’ changes the URL, but the netlify success message still appears. If you load the URL manually, like you did above, the correct customised success page appears.

I’ve attempted quite a few solutions, but can’t seem to get around preventDefault() not submitting my form.

7

You’re absolutely right! I’ve updated the suggestion above to actually use the submitForm method.

One way you could try implementing this with hooks is with useHistory, as shown here:
https://reacttraining.com/react-router/web/api/Hooks/usehistory

You’d want to use onSubmit instead of onClick that’s referenced in that example. The general concept is preventing the default form behavior and pushing the new route (‘/thank-you’) to history.

I hope that helps! But if those examples of dealing with pushstate in single-page apps don’t get your form working, you might try asking in Opentalk - Netlify Support Forums - many knowledgeable people in there who may know what we’re missing here.

8

Heya @idiot, not sure if you’re still working on this but wanted to share the solution that another community member came up with for their Formik form in case it’s helpful for you: