How to create a simple stylish HTML contact message form for Blogger

How to create a simple stylish HTML contact message form for Blogger with category and gender

In this post you learn to add a simple contact form as a blogger post or a new page with HTML and CSS codes with the advanced options you need below is a simple example of an HTML form that you can use in a Blogger article. This form includes text input fields, a textarea, a dropdown menu, radio buttons, and a submit button. You can customize it based on your specific requirements.

Note:

Make sure to replace "YOUR_FORM_PROCESSING_SCRIPT_URL" with the actual URL where you want to handle form submissions. This could be a server-side script that processes the form data. Additionally, feel free to modify the styles and form elements based on your design preferences and requirements.

HTML

<title>Your Form Title</title>

 <form action="YOUR_FORM_PROCESSING_SCRIPT_URL" method="post">

        <!-- Text Input -->

        <label for="name">Name:</label>

        <input type="text" id="name" name="name" required>

        <!-- Email Input -->

        <label for="email">Email:</label>

        <input type="email" id="email" name="email" required>

        <!-- Textarea -->

        <label for="message">Message:</label>

        <textarea id="message" name="message" rows="4" required></textarea>

        <!-- Dropdown Menu -->

        <label for="category">Category:</label>

        <select id="category" name="category">

            <option value="option1">Option 1</option>

            <option value="option2">Option 2</option>

            <option value="option3">Option 3</option>

        </select>

        <!-- Radio Buttons -->

        <label>Gender:</label>

        <label for="male"><input type="radio" id="male" name="gender" value="male"> Male</label>

        <label for="female"><input type="radio" id="female" name="gender" value="female"> Female</label>

        <!-- Submit Button -->

        <input type="submit" value="Submit">

    </form>

CSS;

<style>

        /* Add your custom styles here */

        body {

            font-family: Arial, sans-serif;

        }

        form {

            max-width: 500px;

            margin: 0 auto;

        }

        label {

            display: block;

            margin-bottom: 8px;

        }

        input,

        textarea,

        select {

            width: 100%;

            padding: 8px;

            margin-bottom: 16px;

            box-sizing: border-box;

        }

        input[type="submit"] {

            background-color: #4caf50;

            color: white;

            cursor: pointer;

        }

    </style>

 

OUTPUT

Name: Email: Message: Category: Option 1 Option 2 Option 3 Gender: Male Female

CSS;