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:

  <b:section id="main_section"></b:section>

Adding the contact form to the main section gives the following result:

It actually modifies the template to add

  title='Contact Form' 

that I am now able to modify the content and the style. For example an input which was previously

<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;">

With some tweaks in the css for some styles that the contact form itself adds that needs to be overridden

      input.contact-form-name:hover, input.contact-form-name:focus {
        border: none;
        box-shadow: none;
        outline: none;

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

USB Foot Switch II - "Usb HIDKB Not connected"