Contact Form in html/css

Question

Hello I have the following contact form code:

 /* Contact Form */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #0563bb; color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { opacity: 0.9; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index: 2; display: block; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: 1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top: 0; } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

 <section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form. </p> </div> <div class="row"> <div class="column"> <form name="myform" action="thankyou.html" method="POST" novalidate> <label for="firstname">First Name</label> <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.:" required> <label for="email">Email.</label> <input type="email" id="email" name="email" placeholder="Your Email.." required> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate.:" style="height:170px" required></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> </div> </section>

I want to modify this form a little bit, and only change the input fields. Basically, I would like to add animation on the input fields.

Expected Output

https://watch.screencastify.com/v/5kecEAtHg4o2VXpDpEYU

As you can see, I would like the message to be displayed in the input field, but then when the user clicks the input field, the message should display at the top of the input field as shown in the video. Any suggestions on how I can accomplish this task?

Here is the code of the contact form in the video:

Contact.jsx :

/ dependancies
import React from 'react'
import { Grid, Typography, TextField, Button, Divider, useMediaQuery } from '@material-ui/core'
import emailjs from 'emailjs-com'

// icons
import { FaGithub, FaLinkedin, FaPhone } from 'react-icons/fa'
import { MdEmail } from 'react-icons/md'

// file imports
import { db } from "../../firebaseConfig";
import ContactStyles from './ContactStyles'

import{ init } from 'emailjs-com';
init(process.env.REACT_APP_USER_ID);

const Contact = () => {
    // classes and queries
    const classes = ContactStyles();
    const md = useMediaQuery('(max-width: 960px)');
    const lg = useMediaQuery('(min-width: 960px)');

    // state declaration
    const [name, setName] = React.useState("");
    const [email, setEmail] = React.useState("");
    const [message, setMessage] = React.useState("");
    const [errorName, setErrorName] = React.useState(false);
    const [errorEmail, setErrorEmail] = React.useState(false);
    const [errorMessage, setErrorMessage] = React.useState(false);

    // event handler
    const submitHander = (e) => {
        e.preventDefault(); // prevents screen refresh
        // uses regex to verify email
        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        setErrorName(false);
        setErrorEmail(false);
        setErrorMessage(false);

        // if a field is invalid, ensure that email is not submitted and error is thrown
        if (name === "" || !emailRegex.test(email) || message === "") {
            if (name === "") {
                setErrorName(true);
            }

            if (!emailRegex.test(email)) {
                setErrorEmail(true);
            }

            if (message === "") {
                setErrorMessage(true);
            }
        } else {
            const firebaseObject = { // object to be sent to firebase and email
                name: name,
                email: email,
                message: message
            }

            // send to firebase
            db.collection('contacts').add(firebaseObject)
                .then(() => {
                    console.log('submitted to Firebase');
                })
                .catch((err) => {
                    console.log(err.message);
                });

            // send to email
            emailjs.send(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID,{
                name: name,
                email: email,
                to_name: "",
                from_name: "",
                message: message,
                })
                .then((response) => {
                    alert('Message has been submitted!');
                    console.log(response);
                })
                .catch((err) => {
                    console.log(err);
                });

            setName('');
            setEmail('');
            setMessage('');
            setErrorName(false);
            setErrorEmail(false);
            setErrorMessage(false);
        }
    }

    return (
        <Grid container className={classes.root} id="contact">
            {/* Title */}
            <Grid className={classes.title} item xs={12}>
                <br />
                <Typography variant="h2">Contact Me</Typography>
                <Typography variant="h4">- Can't Wait to Connect! -</Typography>
            </Grid>

            {/* Contact Text */}
            {lg && <>
                <Grid item xs={1}></Grid>
            <Grid item xs={10} md={5}>
                <br /><br />
                <Typography variant="h5"><b>Get in Touch!</b></Typography>
                <Divider></Divider>
                <br />
                <MdEmail />&nbsp;
                <Typography display="inline"><b> Email:</b></Typography>
                <a rel="noreferrer" target="_blank" className={classes.contact} href="mailto:anjaligta@outlook.com">
                    <Typography display="inline"> anjaligta@outlook.com</Typography>
                </a>
                <div /><br />
                <FaPhone />&nbsp;
                <Typography display="inline"><b> Phone:</b></Typography>
                <a rel="noreferrer" target="_blank" className={classes.contact} href="647-544-0781">
                    <Typography className={classes.contact}  display="inline"> 647-544-0781</Typography>
                </a>
                <div /><br />
                <FaGithub />&nbsp;
                <Typography display="inline"><b> Github:</b></Typography>
                <a rel="noreferrer" target="_blank" className={classes.contact} href="https://github.com/anjalig21">
                    <Typography  display="inline"> github.com/AnjaliGupta</Typography>
                </a>
                <div /><br />
                <FaLinkedin />&nbsp;
                <Typography display="inline"><b> LinkedIn:</b></Typography>
                <a rel="noreferrer" target="_blank" className={classes.contact} href="https://www.linkedin.com/in/anjali-gupta21/">
                    <Typography  display="inline"> linkedin.com/in/AnjaliGupta</Typography>
                </a>
                <br /><br /><br />
            </Grid>
            <Grid item xs={1}></Grid>
            </>}

            {/* Contact Form */}
            {md && <Grid item xs={1}></Grid>}
            <Grid item xs={10} md={4}>
                <div className={classes.formContainer}>
                    <form onSubmit={submitHander} className={classes.form}>
                        <TextField
                            className={classes.input}
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            label="Name"
                            variant="outlined"
                            error={errorName}
                            helperText={errorName ? "Please enter a name." : ""}
                        />
                        <br /><br />
                        <TextField
                            className={classes.input}
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            label="Email"
                            variant="outlined"
                            error={errorEmail}
                            helperText={errorEmail ? "Please enter a correct email." : ""}
                        />
                        <br /><br />
                        <TextField
                            className={classes.input}
                            value={message}
                            onChange={(e) => setMessage(e.target.value)}
                            label="Message"
                            multiline
                            rows={10}
                            variant="outlined"
                            error={errorMessage}
                            helperText={errorMessage ? "Please enter a message." : ""}
                        />
                        <br /><br />
                        <div className={classes.center}>
                            <Button type="submit" variant="contained" size="large" className={classes.button}>
                                Submit
                            </Button>
                        </div>
                    </form>
                </div>
            </Grid>
            <Grid item xs={1}></Grid>
        </Grid>
    )
}

export default Contact;

ContactStyles.jsx :

import { makeStyles } from '@material-ui/styles';

const ContactStyles = makeStyles((theme) => ({
    root: {
        background: theme.palette.primary.dark
    },
    title: {
        textAlign: "center",
        color: theme.palette.secondary.dark
    },
    formContainer: {
        height: "78vh",
        position: "relative"
    },
    form: {
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-100%, -50%)"
    },
    input: {
        width: "200%",
        fontWeight: "600",
        '& label.Mui-focused': {
      color: theme.palette.secondary.dark,
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: theme.palette.secondary.dark,
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: '#0644A3',
      },
      '&:hover fieldset': {
        borderColor: theme.palette.secondary.dark,
      },
      '&.Mui-focused fieldset': {
        borderColor: theme.palette.secondary.dark,
      },
    },
    },
    center: {
        display: "flex",
        justifyContent: "center",
        width: "200%"
    },
    button: {
        backgroundColor: "#0644A3",
        color: "#FFFFFF",
        borderRadius: 20,
        marginRight: "2%",
        textTransform: "none",
        "&:hover": {
            transition: "0.3s",
            color: "#0644A3",
            backgroundColor: "#FFFFFF",
            border: "1px solid #0644A3",
        }
    },
    contact: {
        textDecoration: "none",
        color: "#000000",
        "&:hover": {
            transition: "0.3s",
            color: "#b5befa"
        }
    },
    spacing: {
        display: "flex",
        alignItems: "center"
    }
}))

export default ContactStyles;

Answer 1

I tried to create a Beta for you, using the video you linked as a reference

using HTML and CSS only...

the trick here is creating an Extra Div as a Parent, so we can put the label and input inside.

now set the parent to have a position: relative; so the label will be absolute

now successfully we can use TOP, LEFT, RIGHT, BOTTOM and that's it (position the label as the place-holder)

I put the logic here .input-container input:focus~label

 * { --input-height: 3rem; } section { height: 100vh; width: 100vw; display: grid; place-content: center; }.input-container input { height: var(--input-height); width: 80vw; font-size: 2rem; }.input-container { position: relative; display: grid; place-items: center start; }.input-container label { position: absolute; left: 1rem; font-size: 1.5rem; color: rgb(90, 90, 90); background-color: white; transition-duration: 0.5s; }.input-container input:focus~label { position: absolute; font-size: 0.7rem; top: -0.6rem; padding: 0.2em; left: 0.5rem; color: rgb(0, 81, 255); background-color: white; transition-duration: 0.2s; z-index: 2; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <form action=""> <div class="input-container"> <input type="text" name="" id="my-input"> <label for="my-input">hello world</label> </div> </form> </section> </body> </html>