https://i.stack.imgur.com/rJZMo.png
https://i.stack.imgur.com/X0pKF.png
I am trying to make a pop-up form in react ...
<div className="form-popup" id={"myForm"}>
<Modal open={handleClose} onclose={handleShow} id={'content'}>
<form react mailto='' className="form-container" >
<label for="email">Email</label>
<input type="text" placeholder={"Enter Email"} name={"email"} required />
<label for={"name"}>Name</label>
<input type={"text"} placeholder="Enter Name" name={"name"} required />
<label for={"message"}>Message</label>
<textarea type="textarea" name={"message"} placeholder={"Your Message Here"} maxlength={"6000"} rows={"7"} required></textarea>
<button type="submit" className={"btn"}>Submit</button>
<button type="submit" className={"btn cancel"} onclick={handleShow}>Close</button>
</form>
</Modal>
<button className="open-button" onclick={handleShow}>Contact Me</button>
</div>
#content {
top: 50%;
left: 50%;
right: auto;
bottom: auto;
margin-right: -50%;
transform:translate(-50%, -50%);
}
/* Contact Form */
#contactbtn {
border-radius: 25px;
background: green;
cursor: pointer;
border-color: red;
box-shadow: 0px 20px 20px -20px;
width: 90px;
height: 35px;
position: fixed;
color: white;
bottom: 0 !important;
right: 0 !important;
justify-content: right !important;
}
#btncancel {
cursor: pointer;
align-self: left;
background: black;
color: white;
padding: 5px;
margin: 10px;
margin-left: 98px;
display: inline block;
font: 'Bree Serif', Georgia, serif;
}
.open-button {
background-color: blue;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
margin-top: 95px;
border-radius: 5px 25px;
}
/* The popup form - hidden by default */
.form-popup {
display: true;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width input fields */
.form-container input[type=text],
.form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
opacity: 1;
}
handleShow = () => setState(setShow => {
return { setShow: true }
});
handleClose = () => setState(setShow => {
return { setShow: false }
});
What I have tried:
I tried just about everything to make the code work