New Blogger Widget: Contact form - Change Style & Install in a Static Page

A few days ago, Blogger introduced a new contact form widget that you can easily add to your blog. At the moment it's very simple because at least for now it doesn't allow sending files or anything other than plain text.

The blogger contact form has the following features.

• Username field
• email field
• Message field (text area)
• the enter key

The design is simple and the text colors are inherited from the added class. Currently this widget has no configuration options and is not available for dynamic view.

How to add a contact form in Blogger

To add widgets to your blog, simply select the "Layout" tab and then click "Add widgets" in the desired section, e.g. a sidebar. Next, select More Widgets and add a Contact Form widget.

form of communication style

Because the background is clear, the shape blends in well, but it's still easy to change using style sheets (CSS) for the appropriate selectors. Here is an example:

/* contact form container */
Contact form widget {
Width: 500px;
Maximum width: 100%;
margin: 0 automatic;
Padding: 10px;
Background: #F8F8F8;
Color: #000;
border: 1 pixel solid #C1C1C1;
box shadow: 0 1px 4px rgba(0, 0, 0, 0,25);
border radius: 10px;
}

Fields /* and login button */
.contact form name, .contact form email, .contact form email message {
Width: 100%;
Maximum width: 100%;
margin below: 10px;
}

/* enter button style */
.send-contact-form-button {
border color: #C1C1C1;
Background: #E3E3E3;
Color: #585858;
Width: 20%;
Maximum width: 20%;
margin below: 10px;
}

/* Submit button on hold */
.insert contact form button:hover{
Background: #4C8EF9;
Color: #ffffff;
border: 1 pixel solid #FAFAFA;
}

Here's what it looks like after applying the style:

To add this style, go to Template > Edit HTML and click the arrow next to it ... And paste the above code ]]> (Press CTRL+F to search)

How to add a contact form to a static page

The first step is to add a Contact Form widget (Layout) and the second is to remove most of the widgets from the template (Template > Edit HTML). You should find the "ContactForm" ID, expand the widget by clicking the black arrow on the left (included for the same), then delete the part I colored red (see below).

Section to remove:

*

*


<br /> <p/><br /> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.intanceId + "_contact-form-submit"' expr :value='data:contactFormSendMsg' type='button'/><br /> <p/><br /> <div style='text-align: center; Maximum width: 222 pixels; Width: 100%'><br /> <p class='Contact Form Error Message' expr:id='data:widget.intanceId + "_Contact Form Error Message"'/><br /> <p class='contact-form -success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/><br /> </div><br /> </div><br /> form> <br /> </div><br /> </div><br /> <b:include name='quickedit'/></span><br /></b :includable><br / > < /b:widget> </blockquote><br /> After saving the template, go to <b>Pages</b> and paste the following code into a new blank page titled I love you:<br /> <br /><blockquote class="tr_bq"> <div class='contactForm widget' id='ContactForm1'><br /> <div class='contact-form-widget'> < br /> <div class = 'form'><br /> <form name='contact-form'><br /> <p>Name</p><br /> <input class='contact-form - name 'id=' ContactForm1_contact - form-name' name='name' size='30' type='text' value=''/><br /> <p>email *</p><br /> < Entry class= 'Contact form ' -email' id='ContactForm1_email-contact- form' name='email' size='3 0' type='text' v alue='/><br /> <p>Message *</p><br /> <textarea class=' contact-form- email-message' cols='25' id= 'ContactForm1_ContactForm -Email Message' Name='Email Message' Lines='5'>