A Contact Form using mdl hosted on Blogger
Getting a contact form on a static website always ends up with an ugly solution (Google sheet form or external website) and using free hosting (wordpress) requires to stick with a given style.
Blogger has a contact form that people manage to use with a personal style. I wanted to try blogger template for a long time and was wondering whether it could play well with Material Design Lite. I created a new "blog" that will only contain the contact form for the sake of simplicity.
The simplest template I ended up with was this:
Adding the contact form to the main section gives the following result:
It actually modifies the template to add
that I am now able to modify the content and the style. For example an input which was previously
can get 'materialized' using:
With some tweaks in the css for some styles that the contact form itself adds that needs to be overridden
Looks better now. After several other html/css tweaks (removing some max width, tweaking colors and various item styles, 'materializing' the button). I get this:
The result can be seen here (a way to contact me!): http://tekartik-contact.blogspot.com
The template is available here: https://gist.github.com/alextekartik/aa0d865dd30cee99fe4a
Blogger has a contact form that people manage to use with a personal style. I wanted to try blogger template for a long time and was wondering whether it could play well with Material Design Lite. I created a new "blog" that will only contain the contact form for the sake of simplicity.
The simplest template I ended up with was this:
<html
xmlns:b="http://www.google.com/2005/gml/b"
xmlns:data="http://www.google.com/2005/gml/data"
xmlns:expr="http://www.google.com/2005/gml/expr"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><data:blog.pageTitle/></title>
<b:skin></b:skin>
</head>
<body>
<b:section id="main_section"></b:section>
</body>
Adding the contact form to the main section gives the following result:
It actually modifies the template to add
<b:widget
id='ContactForm1'
locked='false'
title='Contact Form'
type='ContactForm'>
...</b:widget>
that I am now able to modify the content and the style. For example an input which was previously
<data:contactFormNameMsg/>
<input class='contact-form-name'
expr:id='data:widget.instanceId + "_contact-form-name"'
name='name' size='30' type='text' value=''/>
can get 'materialized' using:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class='contact-form-name mdl-textfield__input'
expr:id='data:widget.instanceId + "_contact-form-name"'
name='name' size='30' type='text' value=''/>
<label class="mdl-textfield__label"
expr:for="data:widget.instanceId + "_contact-form-name"">
<data:contactFormNameMsg/>
</label>
</div>
With some tweaks in the css for some styles that the contact form itself adds that needs to be overridden
<style>
input.contact-form-name:hover, input.contact-form-name:focus {
border: none;
box-shadow: none;
outline: none;
}
</style>
Looks better now. After several other html/css tweaks (removing some max width, tweaking colors and various item styles, 'materializing' the button). I get this:
The result can be seen here (a way to contact me!): http://tekartik-contact.blogspot.com
The template is available here: https://gist.github.com/alextekartik/aa0d865dd30cee99fe4a