Send Mail and sign up form Project

 

Send Mail in React

Contact.js

import React from "react";

import './index.css';

class Contact extends React.Component{

    constructor(){

        super();

        this.state={subject:"",body:""};

    }

    validateForm=event=>{

        var subject=document.getElementById("subject").value;

        var body=document.getElementById("body").value;

        window.location.href="mailto:abcxyz@gmil.com?subject="+subject+"&body="+body;

        event.preventDefault();

        return false;

    }

    render(){

        return(

            <div class="heading">

                <h1>Mail Form</h1>

                <div class="container" id="mailer">

                    <div class="row">

                    <div class="col sm-8 offset md-2">

                    <form class="justify-content-center" onSubmit={this.validateForm} target="_blank" method="GET" >

                    <div class="form-group form-group-lg">

                    <label class="skills" for="subject">

                    <strong>Name</strong>

                        </label>

                        <input type="text" id="subject" class="form-control" required/>

                     </div>  

                     <div class="form-group form-group-lg">

                        <label class="skills" for="body">

                            <strong>Feedback</strong>

                         </label>  

                         <textarea id="body" id="body" class="form-control" row="5" required/>

                         </div>  

                         <input type="submit" value="Send" id="navigation" class="btn btn-primary" />

                    </form>    

                    </div>

                    </div>

                </div>

 

            </div>

        )

    }

}

export default Contact;

 

 

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import Contact from "./Contact";

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class MainPage extends React.Component{

render()

{

return(

<div>

  <Contact/>

</div>

);

 

}

 

}

 

const element =<MainPage/>

root.render(element);

 

 

index.css

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

    sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

 

code {

  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

    monospace;

}

 

h1{

  text-align:center;

background-color: yellow;

color: black;

border-style: solid;

border-color:red;

 

}

input{

text-align:center;

}

label{

 

}

App{

  background-color: violet;

  color: blue;

}

Output

SignUpForm.js

Create new js file in src name it as SignUpForm.js

 

import React from 'react';

import ReactDOM from 'react-dom/client';

class SignUpForm extends React.Component{

    constructor(){

        super();

        this.state={

            username:" ",

            pno:null,

            errmsg:" "

        };

    }

    uservalue=(event)=>{

        let n=event.target.name;

        let v=event.target.value;

        let err=" ";

        if(n==="pno"){

            if(v!=" "&&!Number(v)){

                err=<strong>Invalid value , Enter the Strong</strong>

            }

        }

        this.setState({errmsg:err});

        this.setState({[n]:v});

    }

    render(){

        return(

            <form class="was validated container container-sm border">

            <div class="form-group">

            <h1 style={{textAlign:"center",color:"blue"}}>Welcome {this.state.username}</h1>

            <label for="uname">User name</label>

            <input type="text" class="form-control" id="uname" onChange={this.uservalue} placeholder="Enter user name" name="username" required/>

          <div class="form-group">

            <label for="uname">Phone Number</label>

            <input type="text" class="form-control" id="pno" onChange={this.uservalue} placeholder="Enter Phone Number" name="pno" required/>{this.state.errmsg}

            </div>

            <div class="form-group" >

                <label for="pwd">Password</label>

            <input type="password" class="form-control" id="pwd" placeholder='Enter Password' name="pwd" required/>

            </div>

            <div class="form-group form-check">

                <label class="form-check-label">

                    <input class="form-check-input" type="checkbox" name="remember"  required/>I agree the Terms and Condition

                </label>

                </div>

                <button type="submit" class="btn btn-primary">Sign up</button>

            </div>

            </form>

        );

    }

}

export default SignUpForm;

 

Output