Creating the HTML form

Now that our API is ready we can use it to store the input data from our HTML form into the Google Sheet. For that lets create a basic HTML form first. Lets use the code given below for now.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1>Send Data to Google Sheet</h1>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-25">
                    <label for="name">Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="name" name="name" placeholder="Your name" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="email">Email</label>
                </div>
                <div class="col-75">
                    <input type="email" id="Email" name="lastname" placeholder="Your Email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="msg">Message</label>
                </div>
                <div class="col-75">
                    <textarea id="msg" name="msg" placeholder="Write your message here" rows="10" required></textarea>
                </div>
            </div>
            <div class="row">
                <input type="submit" value="Submit">
            </div>
        </form>
    </div>

</body>

</html>

index.css

h1 {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

* {
    box-sizing: border-box;
}

input[type=text],
input[type=email],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

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

.container {
    width: 50%;
    margin: 0 auto auto;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 600px) {
    .col-25,
    .col-75,
    input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}

Discussion

Akash Kumar

@99Akki

Nov 10 '25

This is a great guide overall.