contact-form-hexipi

Contact Form React.JS Component by #HexiPi

Example of Usage:

//As a Class Component
import React from 'react';
import ContactForm, { FormRes } from './components/ContactForm';
import './App.css';

class App extends React.Component {
    state = {
        formSubmitResult: FormRes.NONE,
    };

    onSubmit = formData => {
        //Use to call your backend/API functions (or anything else you need)
        //to send your form data.

        alert(`Form Data: ${JSON.stringify(formData)}`);
        this.setState({
            formSubmitResult: FormRes.OK,
        })
    };

    //Set the state of the 'formSubmitResult' to the default so that
    //the form could be displayed again
    formSubmitResultReset = () => this.setState({ formSubmitResult: FormRes.NONE });

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <ContactForm
                        submitMethod="post"
                        email="[e-mail]"
                        tel="[phone]"
                        socialMediaLinks={[
                            //Facebook link
                            "https://www.facebook.com/HexiPi.Web.Dev",

                            //Instagram Link
                            "https://instagram.com/hexipi",

                            //YouTube link
                            "https://www.youtube.com/channel/UCxJUbbqJ_3hpaL53vn2EFVA",

                            //Website Link
                            "https://hexipi.com/"

                            //...Or anything you can think of!
                        ]}
                        onSubmitCallback={this.onSubmit}
                        formSubmitResult={this.state.formSubmitResult}
                        formSubmitResultReset={this.formSubmitResultReset} 
                    />
                </header>
            </div>
        );
    }
}

export default App;

//As a Funcational Component Using Hooks
import React, { useState } from 'react';
import ContactForm, { FormRes } from './components/ContactForm';
import './App.css';

const App = () => {
    const [formSubmitResult, setFormSubmitResult] = useState(FormRes.NONE);

    const onSubmit = formData => {
        //Use to call your backend/API functions (or anything else you need)
        //to send your form data.

        alert(`Form Data: ${JSON.stringify(formData)}`);
        setFormSubmitResult(FormRes.OK);
    };

    //Sets the state of the 'formSubmitResult' to the default so that
    //the form could be displayed again
    const formSubmitResultReset = () => setFormSubmitResult(FormRes.NONE);

    return (
            <div className="App">
                <header className="App-header">
                    <ContactForm
                        submitMethod="post"
                        email="[e-mail]"
                        tel="[phone]"
                        socialMediaLinks={[
                            //Facebook link
                            "https://www.facebook.com/HexiPi.Web.Dev",

                            //Instagram Link
                            "https://instagram.com/hexipi",

                            //YouTube link
                            "https://www.youtube.com/channel/UCxJUbbqJ_3hpaL53vn2EFVA",

                            //Website Link
                            "https://hexipi.com/"

                            //...Or anything you can think of!
                        ]}
                        onSubmitCallback={this.onSubmit}
                        formSubmitResult={this.state.formSubmitResult}
                        formSubmitResultReset={this.formSubmitResultReset} 
                    />
                </header>
            </div>
        );
}

export default App;

Attributes & Data Types:

Below is a list of all the available attributes:

interface ContactFormProps {
    //The form submission method (either 'get' or 'post')
    submitMethod: 'get' | 'post',

    //The email address that would be displayed
    email: string,

    //The phone number that would be displayed
    tel: string,

    //The optional fax number that would be displayed
    fax?: string,

    //The array of social media links/web links that would be displayed
    socialMediaLinks: string[],

    //The optional custom main heading that would be displayed
    mainHeading?: string,

    //The optional custom subheading that would be displayed
    subHeading?: string,

    //The result of the form submission (one of the options of the FormRes enum)
    formSubmitResult: FormRes,

    //The callback that is executed after the form is submitted
    //The 'formData' parameter holds the data that was submitted on the form
    //of the type 'ContactFormSubmissionData'
    onSubmitCallback: (formData: ContactFormSubmissionData) => void,

    //The callback that is executed after the form is reset
    formSubmitResultReset: () => void
};

Note: Most attributes are technically optional since they already have default values assigned to them. However the ones that are actually optional (marked with a '?') will not be shown or used by default (with the exception of the default headings). All callback functions are required if you actually want the form to work properly.

Below are the default values:

static defaultProps = {
    submitMethod: "get",
    email: "[e-mail]",
    tel: "[phone]",
    fax: undefined,
    socialMediaLinks: [
        "https://www.facebook.com/HexiPi.Web.Dev", 
        "https://instagram.com/hexipi", 
        "https://www.youtube.com/channel/UCxJUbbqJ_3hpaL53vn2EFVA", 
        "https://hexipi.com/"
    ],
    onSubmitCallback: 
        (formData: ContactFormSubmissionData) => alert(JSON.stringify(formData)),
    mainHeading: "Need More Information?",
    subHeading: "Send Us a Message!",
    formSubmitResult: FormRes.NONE,
};

Below are all the available values of the FormRes Enumerator:

enum FormRes {
    //The form submitted successfully; a success message is displayed
    OK,

    //An error occurred during form submission; an error message is displayed
    ERROR,

    //The form is displayed and is ready to be filled out
    NONE
}

Below are all the available values of the ContactFormSubmissionData:

interface ContactFormSubmissionData {
    name: string,
    email: string,
    phone_number?: string, //Optional and may have a value of 'undefined'
    message: string
}