Responsive Contact Us Form in HTML and CSS

0























Hello Developers, Learning Robo provides you with a high-quality, dynamic, and eye-catching contact form snippet. This contact form snippet has been carefully crafted in HTML and CSS. This contact form snippet consists of HTML and CSS. It includes an entry field for your name, email address and mobile number, along with small placeholders that guide you through the form. There is also a message box where you can write your message. This contact form snippet comes with a send button that has a unique hover effect to make it stand out from other login methods. Besides improving the user interface of your contact form, this contact form snippet also provides you with a secure gateway for sending messages.CSS allows your contact form to be responsive to different screen sizes, so you can customize it for any device. With this HTML and CSS-powered contact form snippet, you're not only sharing information, but also making a statement about your commitment to professionalism and modern web design. Impress, engage and connect with the world through this creative and informative contact form snippet. Note: Keep in mind that the CSS is stored in its own file and is connected to the corresponding HTML file.

How to make Responsive 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>Send Us Message</h1> <form> <div class="flexgroup"> <label for="fname">Name</label> <input type="text" placeholder="Enter your Name" required id="fname" name="fname"> </div> <div class="flexgroup"> <label for="email">Email Address</label> <input type="email" placeholder="Enter your Email Address" required id="email" name="=email"> </div> <div class="flexgroup"> <label for="tele">Mobile Number</label> <input type="tel" placeholder="Enter your Mobile Number" required id="tele" name="tele"> </div> <div class="flexgroup"> <label for="meg">Message</label> <textarea placeholder="Write Your Message" id="meg" name="meg"></textarea> <input type="submit" value="SEND"> </div> </form> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</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{
    min-height:100vh;
    max-height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image: linear-gradient(to top, #505285 0%, #585e92 12%, #65689f 25%, #7474b0 37%, #7e7ebb 50%, #8389c7 62%, #9795d4 75%, #a2a1dc 87%, #b5aee4 100%);}
.container-sub{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    background-color: #121212;
    border-radius: 10px;
    text-align:center;
    width:500px;
    height:auto;
    padding:20px;
}
.container-sub h1{
    font-size:50px;
    background:-webkit-linear-gradient(#505285, #7e7ebb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container-sub form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width:100%;
    height:auto;
}
.container-sub form .flexgroup{
    display: flex;
    flex-direction: column;
    width:85%;
    margin:10px;
    row-gap:2px;
}
.container-sub form .flexgroup label{
    text-align: left;
    font-weight: 900;
    color: var(--bg);
}
.container-sub form input[type="text"],input[type="email"],input[type="tel"]{
    font-size:15px;
    padding:15px 10px;
    width:100%;
    background-color:#2c2c2c;
    outline:none;
    border-radius: 10px;
    color: var(--bg);
    border: none;
}
.container-sub form textarea{
    font-size:15px;
    background-color:#2c2c2c;
    outline:none;
    border-radius:10px;
    color: var(--bg);
    padding:10px;
    height:120px;
    width:100%;
    resize: none;
    overflow-y:auto;
    border:none;
}
textarea,input[type="text"]::placeholder,input[type="email"]::placeholder,input[type="tel"]::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:150px;
    height:50px;
    border:none;
    border-radius:10px;
    background-color:#2c2c2c;
    color:#ddd;
    font-size:20px;
    font-weight:400;
    margin:20px 0;
    transition:.5s;
}
.container-sub form input[type="submit"]:hover{
    cursor:pointer;
    color:rgb(255, 255, 255);
    background-color:#474847ae;
    transform: scale(1.05);
}
@media only screen and (max-width: 1024px){
    .container-sub{
        width:65vw;
    }
}
@media only screen and (max-width: 630px){
    .container-sub{
        width:95vw;
    }
    .container-sub h1{
        font-size:40px;
    }
    .container-sub form .flexgroup{
        width:100%;
    }
    .container-sub form textarea{
        width:100%;
        max-width:100%;
    }
}
.credit a{
    text-decoration: none;
    color: #ffffff;
    font-weight: 800;
}
.credit{
    color: #ffffff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Responsive Contact Us Form in HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Responsive Contact Us Form in 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