Click here to Skip to main content
15,867,991 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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 ...

HTML
<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
Posted
Updated 23-Sep-20 10:24am

1 solution

Have a look at these example and try:
Create Simple Modal Pop-up with React | WebOmnizz[^]
Create simple Popup in ReactJS - Clue Mediator[^]


Alternatively, you can popup component like:
Reactjs-popup[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900