Contact us Form using HTML and CSS

0













Hello Developers, Learning Robo offers a dynamic and visually appealing contact form snippet that shows your data at a glance. This contact form snippet was created with precision using HTML and CSS to provide a user-friendly experience. It includes input fields for the user’s first name, last name, email address and website name, along with subtle placeholders to guide the user through the form. It also contains a message field where the user can write the message they wish to submit. The contact form also includes a submit button that stands out with a unique hover effect. In addition to improving the user interface, this contact form snippet also provides a secure login gateway for users to gain easy access to their account. Thanks to CSS, the contact form is responsive and can be adapted to different screen sizes to ensure a smooth experience on any device. With this HTML and CSS contact form snippet, you not only pass on information, but also demonstrate your commitment to professionalism and modern web design. Show yourself and interact with the world with this innovative and creative contact form snippet. Note: The CSS is stored in a separate file that is connected to the HTML file.

How to make Contact us form in HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Form UI design - learningrobo</title> <meta name="description" content="Form UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="form,responsive,learningrobo.com,html & css projects"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="container-sub"> <h1>CONTACT US</h1> <form> <div class="flexgroup"> <label>First Name</label> <input type="text" placeholder="Enter your First Name" required> </div> <div class="flexgroup"> <label>Last Name</label> <input type="text" placeholder="Enter your Last Name" required> </div> <div class="flexgroup"> <label>Email Address</label> <input type="email" placeholder="Enter your Email Address" required> </div> <div class="flexgroup"> <label>Website Name</label> <input type="text" placeholder="Enter your Website Name" required> </div> <textarea placeholder="Write Your Message"></textarea> <input type="submit" value="SEND"> </form> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.w3pupil.com/">W3pupil</a></div> </div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300&family=Nunito+Sans:opsz,wght@6..12,300&display=swap');
*{
    box-sizing: border-box;
}
:root{
    --bg:#ffffff;
    --font:'Mukta', sans-serif;
}
h1,h4{
    margin:0%;
}
body{
    margin: 0%;
    font-family: var(--font);
}
.container{
    height:100vh;
    max-height:fit-content;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image: linear-gradient(#f5ebe0,#d1b09c);
}
.container-sub{
    box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    text-align:center;
    background-color: rgba(255, 255, 255, 0.5);
    padding:20px;
    width:600px;
    height:auto;
    border-radius: 10px;
}
.container-sub h1{
    font-size:60px;
    background:-webkit-linear-gradient(#c4bfbf, #7e3c14);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container-sub form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width:100%;
    height:auto;
}
.container-sub form .flexgroup label{
    text-align: left;
    font-weight: 900;

}
.container-sub form .flexgroup{
    display: flex;
    flex-direction: column;
    flex-basis:40%;
    margin:20px 10px;
    row-gap:20px;
}
.container-sub form input[type="text"],input[type="email"]{
    font-size:15px;
    padding:10px 0px;
    background:none;
    outline:none;
    border:none;
    border-bottom:2px solid #c5bebe;
}
.container-sub form textarea{
    background:none;
    outline:none;
    border-radius:10px;
    border:2px solid #c5bebe;
    padding:10px;
    margin-top:20px;
    height:120px;
    width:85%;
    resize: none;
    overflow-y:auto;
}
textarea,input[type="text"]::placeholder,input[type="email"]::placeholder{
    font-family:var(--font);
}
textarea::-webkit-scrollbar{
    width: 10px;
    cursor: pointer;
}
textarea::-webkit-scrollbar-thumb{
    background-color: #555;
    border-radius: 5px;
    cursor: pointer;
}
textarea::-webkit-scrollbar-thumb:hover{
    background-color: #777;
}
textarea::-webkit-scrollbar-thumb:active{
    background-color: #333;
}
textarea::-webkit-scrollbar-track{
    background-color:transparent;
}
.container-sub form input[type="submit"]{
    width:200px;
    height:50px;
    border:none;
    border-radius:10px;
    background-color:#d1b09c;
    color:rgb(73, 70, 70);
    font-size:20px;
    font-weight:400;
    margin:20px 0;
}
.container-sub form input[type="submit"]:hover{
    cursor:pointer;
    color:black;
    background-color:#bb875d ;
    transition:0.5s;
}
@media only screen and (max-width: 1024px){
    .container-sub{
        width:65vw;
    }
}
@media only screen and (max-width: 630px){
    .container-sub{
        width:96vw;
    }
    .container-sub h1{
        font-size:40px;
    }
    .container-sub form{
        display:flex;
        flex-direction:column;
    }
    .container-sub form .flexgroup{
        width:100%;
    }
    .container-sub form textarea{
        width:100%;
        max-width:100%;
    }
}
.credit a{
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
.credit{
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Contact us form Using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Contact us form using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome