# Form Layouts

This section of the documentation will guide you how to apply different form styles for your need, We are using react-form-validator-core plugin for that.

# Importing

import { ValidatorForm } from "react-form-validator-core";
import TextValidator from "./FormValidation";
import WithoutMsgValidation from "./WithoutMsgValidation";

# How to use

<ValidatorForm
    instantValidate={true}
    onSubmit={handleFormSubmit}
>
    <div className="row clearfix">
        <div className="col-xl-6">
            <TextValidator
                onChange={(e) => changeFirstName(e.target.value)}
                name="firstName"
                value={firstName}
                validators={["required"]}
                errorMessages={["This field is required"]}
                className={"form-control"}
                label={"First name"}
                require="true"
            />
        </div>
        <div className="col-xl-6">
            <TextValidator
                onChange={(e) => changeLastName(e.target.value)}
                name="lastName"
                value={lastName}
                validators={["required"]}
                errorMessages={["This field is required"]}
                className={"form-control"}
                label={"Last name"}
            />
        </div>
    </div>
    <div className="row">
        <div className="col-md-10 ">
                <TextValidator
                    onChange={(e) => changeUserName(e.target.value)}
                    name="website"
                    value={userName}
                    type="text"
                    validators={["required"]}
                    errorMessages={["This field is required"]}
                    className={"form-control error"}
                    label={"Pages username"}
                    placeholder="http://pages-ui.com/projectname"
                />
        </div>
        <div className="input-pages-text col-md-2">
            <span className="">@pages.com</span>
        </div>
    </div>
    <div className="row">
        <div className="col-md-12">
            <TextValidator
                onChange={(e) => changePassword(e.target.value)}
                name="password"
                value={password}
                type="password"
                validators={["required"]}
                errorMessages={["This field is required"]}
                className={"form-control"}
                label={"Password"}
                placeholder="Minimum of 4 characters."
            />
        </div>
    </div>
    <div className="row">
        <div className="col-md-12">
            <TextValidator
                onChange={(e) => changeEmail(e.target.value)}
                name="email"
                value={email}
                type="email"
                validators={["required"]}
                errorMessages={["This field is required"]}
                className={"form-control"}
                label={"Email"}
                placeholder="[email protected]"
            />
        </div>
    </div>
    <div className="clearfix"></div>
    <div className="row m-t-25">
        <div className="col-xl-6 p-b-10">
            <p className="small-text hint-text">
                By clicking the "Get Started!" button, you are
                creating a Pages account, and you agree to Pages's
                <a href="#">Terms of Use</a> and{" "}
                <a href="#">Privacy Policy</a>.
            </p>
        </div>
        <div className="col-xl-6">
            <button
                aria-label=""
                className="btn btn-primary pull-right btn-lg btn-block"
                type="submit"
            >
                Get Started
            </button>
        </div>
    </div>
</ValidatorForm>