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:

<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 + &quot;_contact-form-name&quot;' 
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 + &quot;_contact-form-name&quot;' 
name='name' size='30' type='text' value=''/>
<label class="mdl-textfield__label" 
expr:for="data:widget.instanceId + &quot;_contact-form-name&quot;">
<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


Popular posts from this blog

Simple Samba setup on Lubuntu

Soving AccessDenied on Google Cloud Storage domain mapping

Install Maven 3.1.1 on Ubuntu 13.10