Table of Contents

How Do I Create a Contact Form

Share Now :

Title : How Do I Create a Contact Form with CSS | W3pupil

Description

Hello W3PUPIL!!

W3pupil provides a dynamic and visually appealing contact form snippet that showcases your data in a single glance. This contact form snippet is created with precision using HTML and CSS.

This contact form snippet is composed of HTML and CSS elements. It contains an entry field for the user’s name, an email address and a mobile number, as well as subtle placeholders that guide the user through the form. Additionally, a message box is available for the user to write their message. This contact form snippet is equipped with a send button, which has a distinctive hover effect to differentiate it from other login options. In addition to enhancing the user interface of the contact form, this contact form snippet provides a secure gateway for the user to easily send messages. CSS enables the contact form to be responsive to various screen sizes, allowing the user to customize the form for any device.

By using this HTML and CSS contact form snippet, you’re not just sharing information – you’re demonstrating your dedication to professionalism and contemporary web design. Show off and interact with the world with this innovative and creative contact form snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is crucial for a seamless development experience. A step-by-step tutorial is provided below:

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After the successful completion of downloading and installing, open Visual Studio Code.
  • Create a new folder in your desktop.
  • Go to file and then open the folder created.
  • Then add a file for html with “.html” or “.htm” extension.
  • Also add another file for css with “.css” extension.
  • Now, you have a blank HTML file and CSS file ready for your code.

Let's know how to open a downloaded file..

  • After downloading the snippet file from W3pupil, you will receive a zip file.
  • Extract the file and open it in Visual Studio Code.
  • Now you have the HTML file and CSS file to work with.
  • Take time to fully understand the code’s functionality before making any desired changes.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  <!--Hello Future Developer Thanks for Using w3pupil.com, Share & Support us-->
<div class="container">
<div class="container-sub">
    <h1>Send Us Message</h1>
    
        <div class="flexgroup">
            <label for="fname">Name</label>
             
        </div>
        <div class="flexgroup">
            <label for="email">Email Address</label>
            
        </div>
        <div class="flexgroup">
            <label for="tele">Mobile Number</label>
            
        </div>
        <div class="flexgroup">
            <label for="meg">Message</label>
            <textarea id="meg" name="meg"></textarea>
            
        </div>
    
    <div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/">W3pupil</a></div>
</div>
</div>
<!--Check our website Regularly For New Snippets Post-->  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

  /** 
Hello Future Developer Thanks for Using w3pupil.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;
}  

Note :

  • The CSS is coded in a separate file and linked to the HTML file.

Download :

Share and Support W3pupil.com

Conclusion :

To modify the code, you can download the snippet’s source code files. To enhance your skills in HTML and CSS, you can try to recreate other creative HTML and CSS snippets available on W3pupil. In case you experience any technical related doubts, you are welcome to contact W3pupil. We’ll try to solve your request at the earliest.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :