Merry Christmas Form Theme

Written by Lance Padgett on December 5, 2012

Posted in Form Hacks

Christmas is getting closer everyday! Looking for a way to add a little Christmas spirit to your online forms? We’ve built out a snowy Christmas form theme that you can use for free.

This form theme is very interactive. The background of this theme will actually SNOW while your visitor is viewing the form!! This theme uses the lighter blue and purple tones of the holiday season, but if anyone would happen to want it in the more traditional red & green, just leave us a comment below. Peek At This Theme >

Christmas form theme

 

In order to implement the themes, follow these steps.

1. Create a new form theme in Formstack under the “Settings” section.
2. Copy the code in the box below and paste it into the Formstack box labeled “Additional CSS” within your form theme.
3. Give your theme a name before saving.
4. Then apply this theme to either an existing form, or create a brand new form and then apply the new theme.

Looking forward to more free themes? Give us your suggestions in the comments below!

@import url(http://fonts.googleapis.com/css?family=Clicker+Script);
@import url(http://fonts.googleapis.com/css?family=Life+Savers);

body {
  background-color:#6b92b9;
  background-image:url('http://blog.formstack.com/wp-content/uploads/2012/11/snow500.png'), url('http://blog.formstack.com/wp-content/uploads/2012/11/snow400.png'), url('http://blog.formstack.com/wp-content/uploads/2012/11/snow300.png');
  -webkit-animation: snow 20s linear infinite;
  -moz-animation: snow 20s linear infinite;
  -ms-animation: snow 20s linear infinite;
  animation: snow 20s linear infinite;
}

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-color:#b4cfe0;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

.fsForm.fsMaxCol1, .fsForm.fsMaxCol2, .fsForm.fsMaxCol3, .fsForm.fsMaxCol4 {width:600px;}

.fsBody .fsForm, .fsForm .fsFieldRow .fsRowBody, .fsForm .fsSpacerRow .fsRowBody {background-color: #F7F7F7;}

.fsBody .fsForm .fsSectionHeader {background-color: transparent;}
.fsBody .fsForm .fsSectionHeading {font-size:60px; color:#88C9E7; line-height: 40px; text-shadow: rgba(130, 136, 143, 0.75) -1px 1px 1px, 0px -1px 1px rgba(216, 216, 216, 0.49); text-align:center; font-family: 'Clicker Script', cursive; font-weight:200;}

.fsBody .fsForm input[type="text"].fsField, .fsBody .fsForm input[type="file"].fsField, .fsBody .fsForm input[type="number"].fsField, .fsBody .fsForm input[type="email"].fsField, .fsBody .fsForm input[type="tel"].fsField, .fsBody .fsForm textarea.fsField {
padding: 8px;
border-radius: 5px;
background-image: none;
}

.fsForm select {width:220px;}

.fsForm .fsSubmit {background-color: transparent; padding: 50px;}

.fsSubmit input.fsSubmitButton {
background-color: #92D1E9;
margin: 0 auto; clear: both;
font-size: 21px;
color: white;
border: none;
border-radius: 5px;
font-family: 'Life Savers', cursive;
box-shadow: 0px 1px 1px #C5C5C5;
text-shadow:#B7BEC5 -1px 1px 1px, 0px -1px 1px #181818;
padding: 7px 60px;
-webkit-transition:background-color 0.25s, box-shadow 0.25s;
}

.fsSubmit input.fsSubmitButton:hover {
box-shadow: 0px 1px 10px #7c7c7c;
cursor:pointer;
background-color:#CEB4E2;
-moz-transition: background-color 0.25s, box-shadow 0.25s;
-webkit-transition: background-color 0.25s, box-shadow 0.25s;
transition: background-color 0.25s, box-shadow 0.25s;
}

.fsRequiredMarker {color: #CEB4E2;}