How to Create Contact Form Using HTML and CSS

Hello friends, we use HTML forms to take input from the user in a web page. In this article, we will tell you how to create an HTML form. Also we will give you complete source code. Here we will tell you how to make a contact form with the help of HTML and CSS.

contact form using html and css

HTML forms are an important part of every website. You will definitely see the utility of forms in every website.

How to make HTML Contact Form

1. We use <form> tag to create any HTML form.

2. HTML forms have many elements such as input box, buttons, radio button, checkbox, selection lists etc. We use different tags to embed all this with the form.

  • <input>
  • <label>
  • <select>
  • <textarea>
  • <fieldset>
  • <legend>
  • <button>
  • <datalist>
  • <output>
  • <option>

3. From all these, we give the attributes for the type of data we want to get.

  • <input type="button">
  • <input type="checkbox">
  • <input type="date">
  • <input type="email">
  • <input type="file">
  • <input type="image">
  • <input type="number">
  • <input type="password">  etc.

4. Let's create a simple html form in which we will have 4-fields- Name, Phone No, Password and Submit Button. Its code will be something like this.

<!DOCTYPE html>
<html>
<body>

<form>

  <input type="text" name="name" placeholder="Name"><br>
  
  <input type="number" name="phone_no" placeholder="Phone No"><br>

  <input type="password" name="psw" placeholder="Enter Password"><br><br>
  
  <button> Submit</button>

</form>

</body>
</html>

Output will be:-




Full Source Code: HTML Contact Form

1. Download the following code which we have given you below.

2. Open you code editor and copy this code.

3. Run the project.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML CONTACT FORM</title>

    <!-- Font Awesome Starts-->
    <script src="https://kit.fontawesome.com/a5eb62bfd2.js" crossorigin="anonymous"></script>
    <!-- Font Awesome Close -->
</head>

<body>

    <!DOCTYPE html>
    <html>

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            * {
                box-sizing: border-box;
            }
            
            .box {
                border-radius: 5px;
                background-color: #e9e6e6;
                padding: 20px;
            }
            
            input[type=text],
            textarea {
                width: 100%;
                padding: 12px;
                border: 1px solid #ccc;
                border-radius: 3px;
                box-sizing: border-box;
                margin-top: 6px;
                margin-bottom: 16px;
                resize: vertical;
            }
            
            button[type="submit"] {
                padding: 10px 20px;
                font-size: 20px;
                cursor: pointer;
                background-color: #0787ae;
                border: .5px solid rgb(230, 226, 226);
                border-radius: 5px;
                color: azure;
            }
            
            button[type=submit]:hover {
                background-color: #0d0e0d;
            }
            
            .subject {
                height: 200px;
            }
        </style>
    </head>

    <body>

        <h1>HTML Contact Form</h1>

        <div class="box">
            <form>
                <label for="fname"><i class="fas fa-address-card"></i> Name</label>
                <input type="text" id="fname" name="firstname" placeholder="Your name...">

                <label for="lname"><i class='fas fa-phone-alt'></i> Mobile Number</label>
                <input type="text" id="lname" name="lastname" placeholder="10 Digit...">

                <label for="e_mail"><i class='fas fa-envelope'></i> E-Mail</label>
                <input type="text" id="e_mail" name="e-mail" placeholder="Working email">

                <label for="subject">  <i class='fas fa-question'></i> Why are you contacting?</label>
                <textarea class="subject" id="subject" name="subject" placeholder="Describe here..."></textarea>

                <button type="submit">Send <i class='fas fa-paper-plane'></i></button>



            </form>
        </div>

    </body>

    </html>


</body>

</html>

Download Code/download/button

Give us a feedback about our content...

Post a Comment

Give us a feedback about our content...

Post a Comment (0)

Previous Post Next Post