Blogger Contact Form Code Snippet

blogger-contact-from-snippet.html

<style>
.contact-form-name, 
.contact-form-email, 
.contact-form-email-message {
    max-width: 100%;
} 
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

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

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

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

        <div style="padding: 30px;" class="form">
            <form name="contact-form">
                <p>Name</p>
                <input name="name" class="contact-form-name" id="ContactForm2_contact-form-name" type="text" size="30" value="">
                <p>Email</p>
                <input name="email" class="contact-form-email" id="ContactForm2_contact-form-email" type="text" size="30" value="">
                <p>Message</p>
                <textarea name="email-message" class="contact-form-email-message" id="ContactForm2_contact-form-email-message" rows="5" cols="25"></textarea>
                <p></p>
                <input class="contact-form-button contact-form-button-submit" id="ContactForm2_contact-form-submit" type="button" value="Send">
                <div style="text-align: center; max-width: 222px; width: 100%">
                    <p class="contact-form-error-message" id="ContactForm2_contact-form-error-message"></p>
                    <p class="contact-form-success-message" id="ContactForm2_contact-form-success-message"></p>
                </div>
            </form>
        </div>