How to Make Basic Contact Form for HTML Website?

Facebook X Pinterest

Contact form is an integral part of the website because it is the specific panel through which the admin of the website will be able to connect with the users. Users share their feedback or raise their concern through the contact forms and admin takes relevant action in return of the same.

If you are also looking to know the code through which basic HTML form could get created then below mentioned code will help you. We have mentioned the HTML code for the form and by using the CSS you will be able to give style to the form. So now let’s move towards the code:

Step 1: Use the below mentioned code to create the form in HTML.

<html>
<head>
    <title>How to Make Basic Contact Form for HTML Website?</title>
</head>
<body>
    <div class="container">
        <form action="action_page.php">
            <label for="fname">Full Name</label>
            <input type="text" id="fname" name="fullname" placeholder="Your name..">
            <label for="lname">Age</label>
            <input type="text" id="lage" name="age" placeholder="Your age..">
            <label for="country">Country</label>
            <select id="country" name="country">
                <option value="australia">Australia</option>
                <option value="canada">Canada</option>
                <option value="usa">USA</option>
            </select>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>

While you run this HTML code it will show form like as below

This form is not looking attractive. So let’s add some CSS code in this HTML code of form and make it attractive.

Step 2: Add Below mentioned CSS code between “head” section and in “style” tag for giving style to the created form.

/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
    width: 100%;
    /* Full width */
    padding: 12px;
    /* Some padding */
    border: 1px solid #ccc;
    /* Gray border */
    border-radius: 4px;
    /* Rounded borders */
    box-sizing: border-box;
    /* Make sure that padding and width stays in place */
    margin-top: 6px;
    /* Add a top margin */
    margin-bottom: 16px;
    /* Bottom margin */
    resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */

input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */

input[type=submit]:hover {
    background-color: #45a049;
}


/* Add a background color and some padding around the form */

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

Now Look at Full Html Code for Basic Contact Form as Below

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        input[type=text],
        select,
        textarea {
            width: 100%;
            /* Full width */
            padding: 12px;
            /* Some padding */
            border: 1px solid #ccc;
            /* Gray border */
            border-radius: 4px;
            /* Rounded borders */
            box-sizing: border-box;
            /* Make sure that padding and width stays in place */
            margin-top: 6px;
            /* Add a top margin */
            margin-bottom: 16px;
            /* Bottom margin */
            resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */
        }
        /* Style the submit button with a specific background color etc */
        
        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        /* When moving the mouse over the submit button, add a darker green color */
        
        input[type=submit]:hover {
            background-color: #45a049;
        }
        /* Add a background color and some padding around the form */
        
        .container {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="action_page.php">
            <label for="fname">Full Name</label>
            <input type="text" id="fname" name="fullname" placeholder="Your name..">
            <label for="lname">Age</label>
            <input type="text" id="lage" name="age" placeholder="Your age..">

            <label for="country">Country</label>
            <select id="country" name="country">
                <option value="australia">Australia</option>
                <option value="canada">Canada</option>
                <option value="usa">USA</option>
            </select>
            <input type="submit" value="Submit">
        </form>
    </div>
</body>
</html>

Now the contact form looks like as below