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

A few days ago, Blogger introduced a new contact puzzle that you can easily add to your blog. It's very easy at the moment, because at least for now, it doesn't allow you to send any files or text that isn't plain text.

Blogger Contact Snow has the following features:

• Username field:
• Email field:
• Message field (text field)
• Delivery button

The design is simple, the colors of the text inherit the part you add. This puzzle has no configuration options and is not available for dynamic browsing.

How to add a contact to Blogger

To add it to your blog, select the "Design" tab and then tap the "Add Device" section that you want to display in the sidebar, for example. Then select the Add- ons tab and add the Contact Us tool.

Contact style horse:

Because the background is transparent, the egg will fit beautifully aesthetically, but it's still easy to change with the appropriate style sheet (CSS) pickers. Here is an example.

/ * Contact the horse guard * /
.contact-form-widget {
width: 500px;
maximum width - 100%;
margin: 0 automatically;
load: 10px;
background: # F8F8F8;
color: # 000;
limit: 1px solid # C1C1C1;
cutie-hije: 0 1px 4px rgba (0, 0, 0, 0.25);
boundary radius: 10px;
}

/ * Fields and submit button * /
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
maximum width - 100%;
bottom edge: 10px;
}

/ * Enter button style * /
.send-contact-button-send {
border color: # C1C1C1;
background: # E3E3E3;
color: # 585858;
width: 20%;
maximum width - 20%;
bottom edge: 10px;
}

/ * Release the mouse button * /
.contact-form-button-submit: hover {
background: # 4C8EF9;
color: #ffffff;
edge: 1px solid #FAFAFA;
}

Here's how to put one together for use with your style.

To add this style, select Template > Edit HTML and click the arrow next to it. ... paste the code above ]]> (press CTRL + F to find).

How to add a contact to a static page

The first step is to add the Contact Horse layout, and the second step is to edit the template (Template> Edit HTML) to remove most of the tools. You need to find the "ContactForm" id, expand the puzzle by clicking on the left arrow (same as the inside), and then delete the part I painted red (see below).

The part to be removed.

*

*


<br /> <p /> <br /> <input class = 'contact-form-button contact-form-button-submit' expr: id = 'data: widget.instanceId + "_contact-form-submit"' expr : value = 'data: contactFormSendMsg' type = 'button' /> <br /> <p /> <br /> <div style = 'text-align: center; maximum width: 222px; width:% 100 '> <br /> <p class =' ​​'contact-form-error-message' expr: id = 'data: widget.instanceId + "_contact-form-error-message"' / > <br /> <p class = 'contact-form-success-message' expr: id = 'data: widget.instanceId + "_contact-form-success-message"' /> <br /> </div> < br /> </form> <br /> </div> <br /> </div> <br /> <b: include name = 'quickedit' /> </span> <br /> </ b: include> <br /> </ b: widget> </blockquote> <br /> After saving the template, go to <b> Pages </b> and paste the following code into a new blank page called What do you want? <br /> <br /> <blockquote class = "tr_bq"> <div class = 'Contact Form Widget' id = 'ContactForm1'> <br /> <div class = 'Contact Form Widget'> <br /> < div class = 'form'> <br /> <form name = 'contact form'> <br /> <p> Emry </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_contact-form-e-mail' name = 'e-mail' size = '30 'type =' text 'value =' '/> <br /> <p> Message * </p> <br /> <textarea class = 'contact-form-email-message' cols = '25 'id =' ContactForm1_contact-form-email-message 'name =' email-message 'rows =' 5 '> :