Skip to content

Instantly share code, notes, and snippets.

@himstar
Last active August 29, 2015 14:26
Show Gist options
  • Save himstar/c5163168684ae53b3d0a to your computer and use it in GitHub Desktop.
Save himstar/c5163168684ae53b3d0a to your computer and use it in GitHub Desktop.
Convert Blogger Template to Contact Form
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2'>
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css' rel='stylesheet'/>
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[*/
]]></b:skin>
<b:template-skin><![CDATA[
html { overflow-y: scroll }
body {
background: #008B8E;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
overflow-x: hidden;
color: #bdc3c7;
font-size: 17px;
line-height: 1.5;
font-family: 'Open Sans', sans-serif;
}
input[type=text] {
padding: .75em;
color: #666;/*Eingabe Farbe*/
background-color: #FFF;/*Hint Input*/
border: none;
margin-bottom: 1.5em;
width: 100%;
-webkit-appearance: none;
border-radius: 0;
}
input:focus,
textarea:focus { outline: none }
textarea {
padding: .75em;
margin-bottom: 1.5em;
background-color: #FFF;
border: none;
width: 100%;
-webkit-appearance: none;
border-radius: 0;
}
label {
display: block;
padding-bottom: .25em;
font-weight: bold;
}
input::-moz-placeholder {
color: #7f8c8d;
}
textarea::-moz-placeholder {
color: #7f8c8d;
}
input::-webkit-input-placeholder {
color: #7f8c8d;
}
textarea::-webkit-input-placeholder {
color: #7f8c8d;
}
input:-ms-input-placeholder { color: #27ae60 }
input[type=button] {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .2em;
color: #fff;
background-color: #e67e22; /*Button Color*/
border: none;
border-radius: 0;
-webkit-border-radius: 0;
padding: .75em;
margin-bottom: .5em;
-webkit-appearance: none;
cursor: pointer;
}
input[type=button]:active,
input[type=button]:hover { background-color: rgb(233, 139, 57) }/*Hover Button*/
.contact-form-error-message-with-border {
padding: 15px;
margin-bottom: 10px;
border: 1px solid transparent;
border-radius: 4px;
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.contact-form-success-message-with-border {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
color: #468847;
background-color: #dff0d8;
border-color: #eed3d7;
}
[class^="icon-"],
[class*=" icon-"] { vertical-align: middle }
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
form {
height: 480px;
max-width: 600px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Large devices (large desktops, 1200px and up) */
/* Shared By Tricksway.com */
@media (min-width: 1200px) {
}
]]></b:template-skin>
</head>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass + &quot; &quot; + data:blog.pageType'>
<b:section class='header container' id='header'>
<b:widget id='Header1' locked='false' title='Awesome (Header)' type='Header'>
<b:includable id='main'>
<h1><b:include name='title'/></h1>
</b:includable>
<b:includable id='description'/>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section class='container' id='container'>
<b:widget id='ContactForm1' locked='false' title='TricksWay' type='ContactForm'>
<b:includable id='main'>
<div class=''>
<div class=''>
<p/>
<form name='contact-form'>
<input class='' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Your Name' type='text' value=''/>
<p/>
<input class='' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='E Mail Address' type='text' value=''/>
<p/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='Your Message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div>
<p expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
<p expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment