 |
| Event Registration form with ReactStrap Components | IndianTechnoEra |
Aim:
Create an Event Registration form with React Strap components
Component 1: Main App Part
| RegForm.js |
|---|
import React from 'react' import './RegForm.css' import { Button, Form, FormGroup, Input, Label } from 'reactstrap'; function RegForm() { return ( <> <div id='container'> <div id='container-box'> <h1 className='register'>Registration Form</h1> <Form classNameName='form'>
{/* name */} <div className="row"> <div className="col-md-6 mb-4"> <FormGroup> <Input type="text" name='name' id='FirstName' placeholder='First Name'></Input> </FormGroup> </div> <div className="col-md-6 mb-4"> <FormGroup> <Input type="text" name='name' id='LastName' placeholder='Last Name'></Input> </FormGroup> </div> </div> {/* email and phone */} <div className="row"> <div className="col-md-6 mb-4"> <FormGroup> <Input type="email" name='email' id='email' placeholder='Email'></Input> </FormGroup> </div> <div className="col-md-6 mb-4"> <FormGroup> <Input type="phone" name='phone' id='phone' placeholder='Phone Number'></Input> </FormGroup> </div> </div> {/* username and password */} <div className="row"> <div className="col-md-6 mb-4"> <FormGroup> <Input type="username" name='username' id='username' placeholder='User Name'></Input> </FormGroup> </div> <div className="col-md-6 mb-4"> <FormGroup> <Input type="password" name='password' id='password' placeholder='Password'></Input> </FormGroup> </div> </div> {/* gender checkbox */} <div className="row"> <div className="col-md-6 mb-6 genderBox"> <FormGroup> <h6 className="mb-2 pb-1">Gender: </h6> <div className="form-check form-check-inline"> <Input className="form-check-input" type="radio" name="genderRadio" id="femaleGender" value="option1" checked /> <Label className="form-check-label" for="femaleGender"> <i class="fa fa-female" aria-hidden="true"></i> </Label> </div> <div className="form-check form-check-inline"> <Input className="form-check-input" type="radio" name="genderRadio" id="maleGender" value="option2" /> <Label className="form-check-label" for="maleGender"> <i class="fa fa-male" aria-hidden="true"></i> </Label> </div> <div className="form-check form-check-inline"> <Input className="form-check-input" type="radio" name="genderRadio" id="otherGender" value="option3" /> <Label className="form-check-label" for="otherGender"> <i class="fa fa-transgender" aria-hidden="true"></i> </Label> </div> </FormGroup> </div> </div> {/* role dropdown */} <div className="row"> <Label className="form-label select-label">Register as</Label> <select className="select form-control-lg"> <option value="1" disabled>Choose Role</option> <option value="2">Admin</option> <option value="3">Student</option> <option value="4">Teacher</option> </select> </div> <Button className="button ">Register</Button> </Form> </div> </div> </> ) } export default RegForm; |
Component 1: CSS Part
| RegForm.css |
|---|
* body{color:#fff;height:200px;background-image:url(./formbg2.jpg);background-repeat:no-repeat} #container{justify-content:center;align-items:center;text-align:center;height:100%;width:100%;display:flex;flex-direction:column;position:absolute} @media only screen and (min-width: 600px) { #container{display:flex;flex-direction:column;margin-top:150px} } #container-box{margin-top:-300px;background-color:transparent;padding:20px;display:block;border:2px solid #000;border-radius:20px;color:#fff;width:450px;background:rgba(255,255,255,0.2);border-radius:16px;box-shadow:0 4px 30px rgba(0,0,0,0.1);backdrop-filter:blur(0.1px);-webkit-backdrop-filter:blur(0.1px);border:1px solid rgba(255,255,255,0.87)} #container-box:hover{box-shadow:0 0 30px #7fffd4;transition:.2s} .register{text-align:center;padding:10px;background-color:#8804df;border-radius:5px} div{text-align:left} input{margin:10px;border-radius:20px;background-color:blue} input[type=text],input[type=email],input[type=phone],input[type=password],input[type=date],input[type=username],select{width:100%;padding:10px;margin:2px 0;display:inline-block;border:1px solid #ccc;border-radius:25px;box-sizing:border-box} input[type=text]:hover,input[type=email]:hover,input[type=phone]:hover,input[type=password]:hover,input[type=date]:hover,input[type=username]:hover,select{offset:unset;box-shadow:0 0 10px #454def} .button{cursor:pointer;background-color:#8a2be2;border:2px solid #8a2be2;justify-content:center;display:flex;transition:.3s;align-items:center;text-align:center;width:150px;height:50px;padding:10px;offset:unset;border-radius:50px;margin-left:35%;margin-top:15px} .button:hover{background-color:#2ce1a2;color:#fff;transition:.2s;border:2px solid #2ce1a2;box-shadow:0 0 10px #fff} .genderBox{display:flex;justify-content:left;align-items:center} |
Component 1: Index Part
| index.js |
|---|
import ReactDOM from 'react-dom/client' import EventForm from './P6/P6Form' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( <> <RegForm/> </> ) |
Background Image Lik: Click
Output:
 |
| Event Registration form with ReactStrap Components | IndianTechnoEra |