Contact form card HTML Template

0





























Hello Developers, we provide you with a dynamic and beautiful Contact form card that displays your information at a glance. This Contact form card snippet has been designed with accuracy using HTML & CSS. The snippet is a user-friendly contact form snippet that combines the power of HTML and CSS to provide the user with seamless authentication. This contact form snippet uses HTML and CSS to provide a user-friendly experience. It includes input fields for the user’s name and email address, as well as subtle placeholders to guide the user through the form. It also includes a message field where the user can write the message they wish to submit. The contact form also contains a submit button. Your contact form is always clearly displayed, regardless of whether it's on a desktop, laptop, tablet or smartphone. By using this HTML & CSS Contact form card you are not only sharing information but you are also showing your commitment to professionalism and modern web design. All in all, you can show off and communicate with the world using this innovative & creative Contact form card snippet. Note: We have saved the CSS in a different file and connected it with the HTML file to make the Contact form card snippets.

How to make Contact form card HTML Template .[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 Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="form,responsive,learningrobo.com,html & css projects,project"> <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="box"> <h1>CONTACT FORM</h1> <form action="#" method="post"> <input type="text" name="name" id="name" placeholder="Enter Your Name"><br> <input type="email" name="email" id="email" placeholder="Enter Your Email"><br> <textarea name="message" id="message" cols="30" rows="10" placeholder="Your Message"></textarea><br> <button type="submit">SUBMIT</button> </form> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/"> learningrobo</a></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
**/
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}
.container{
    min-height:100vh;
    max-height:fit-content;
    display:flex;
    justify-content:center;
    flex-direction: column;
    align-items:center;
    background-color: tomato;
}
.box{
    background-color:darkslategray;
    width: 750px;
    height: 450px;
    text-align: center;
    color: white;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.box h1{
    margin-top: 30px;
}
input[type="text"]{
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    width:95%;
    margin-top: 15px;
    font-size: 15px;
    outline: none;
    color: white;
}
input[type="email"]{
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    width:95%;
    margin-top: 20px;
    font-size: 15px;
    outline: none;
    color: white;
}
textarea{
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    width:95%;
    margin-top: 18px;
    font-size: 15px;
    outline: none;
    color: white;
    resize:none;
}
button{
    width: 130px;
    padding: 10px;
    border-radius: 20px;
    border: none;
    background-color: tomato;
    color: white;
    font-size: 18px;
    margin-top: 20px;
    outline: none;
}
input::placeholder,textarea::placeholder{
    font-family: 'Montserrat', sans-serif;
}
@media screen and (max-width:1024px){
    .box{
        width:80%;
        height: fit-content;
    }
}
@media screen and (max-width:630px){
    .box{
        width:90%;
        height: fit-content;
    }
}
.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;
}
.credit span{
    color:#000;
    font-size:20px;
}
We hope you would like this Contact form card HTML Template .

Thank you for reading our blog. If you face any problem in Creating a Contact form card HTML Template ., 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

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome