Form submission is showing blank in the netlify Forms page

I have a react app and I am trying to submit a form with contact info. I see records been created each time I submit the form, but there is no data going though. Here is my code:

import React, { Component } from 'react';
import styled from 'styled-components';

const encode = (data) => {
    return Object.keys(data)
        .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        .join("&");
    }

const StyledConatiner = styled.div`
    padding-top: 5rem;
    .padding-5 {
        padding: 5rem 2rem 1rem 2rem;
    }
`;

const StyledThankYouHeader = styled.div`    
    font-size: 4rem;    
    padding-top: 0;
    padding-bottom: 1rem;
    font-weight: 400;
`;

const StyledThankYouDescription = styled.div`
    font-size: 1.8rem;
    letter-spacing: 0.03px;
    padding-bottom: 2rem;
`;

class ContactForm extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            firstname: "",
            lastname: "",
            email: "",
            phone: "",
            message: "",
            setViewToThankYou: false 
        };
    }

    handleSubmit = e => {
        fetch("/", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: encode({ "form-name": "contact-us", ...this.state })
        })
        .then(() => {
            console.log('Submitted');
            console.log('state:', this.state);
            this.setState({ setViewToThankYou: true})
        }
        )
        .catch(error => alert(error));
        e.preventDefault();
    };

    handleChange = (e) => {        
        this.setState({ [e.target.name]: e.target.value });
        console.log('e.target.name', e.target.name);
        console.log('e.target.value', e.target.value);
    }



    render() {        
        const { firstname, lastname, email, phone, message } = this.state;
        
        return (
            <StyledConatiner className="container">
                {this.state.setViewToThankYou ? 
                
                <div className="row card padding center">
                    <StyledThankYouHeader>Thank you for contacting us!</StyledThankYouHeader>                    
                    <StyledThankYouDescription>We will get back to you within 24 business hours. <br />Until then, <a href="/">Keep learning!!</a></StyledThankYouDescription>
                </div>
                
                : 
                <div className="row card padding-5">
                    <form data-netlify="true" className="col s12" onSubmit={this.handleSubmit}>
                    <input type="hidden" name="form-name" value="contact-us" />
                        <div className="row">
                            <div className="input-field col s6">
                                <input name="firstname" value={firstname} type="text" className="validate" onChange={this.handleChange} />
                                <label for="firstname">First name</label>
                            </div>
                            <div className="input-field col s6">
                                <input name="lastname" value={lastname} type="text" className="validate" onChange={this.handleChange} />
                                <label for="lastname">Last name</label>
                            </div>
                        </div>

                        <div className="row">
                            <div className="input-field col s6">
                                <input name="email" value={email} type="email" className="validate" onChange={this.handleChange} />
                                <label for="email" data-error="wrong" data-success="right">Email</label>
                            </div>
                            <div className="input-field col s6">
                                <input name="phone" value={phone} type="tel" pattern="^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$" className="validate" onChange={this.handleChange} />
                                <label for="phone">Phone</label>
                            </div>
                        </div>

                        <div className="row">
                            <div className="input-field col s12">
                                <textarea name="message" value={message} className="materialize-textarea" onChange={this.handleChange} />
                                <label for="message">Message</label>
                            </div>                            
                        </div>

                        <div className="row">
                            <div className="input-field col s12 center">
                            <button type="sumbit" className="btn waves-effect waves-light">Submit
                                <i class="material-icons right">send</i>
                            </button>
                            </div>                            
                        </div>
                    </form>
                </div>   
    }            
            </StyledConatiner>
        );
    }
}

export default ContactForm;

The values are logging just fine, it’s displaying the Thank you section. I just don’t see the data on the forms. I see the record being created but not data.

I would really appreciate some help. Thank you.

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile:

@perry Thank you for responding. Here is the link to the form: https://educationalequitynow.com/contactUs
I have gone through every single support guide provided by netlify and have followed through various posts here. I am using gatsby site. Still no luck. I am running out of options. Any help would be greatly appreciated.

Hey @charupasternak25,
I checked out that link and created a test submission- it did go through, with all values, but to a form with a different name (magicformcontact instead of contact-us). Let us know if you’ve figured this out since writing in or are still looking for support!