Spook Up Your Halloween Forms with a Free Form Theme

Written by Lance Padgett on October 24, 2012

Posted in Form Hacks

With Halloween fast approaching, we thought you might want to spruce up one of your Formstack online forms. Are you selling tickets to a midnight showing of a horror movie? Collecting donations to buy costumes or candy for a local charity? Do you just really love Halloween?

We’ve created a Halloween form theme that is free for all users. Follow the steps below to use this theme for one of your forms!

free form theme

In order to implement this free form theme, you need to:

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 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.

That’s all! Create any kind of form you want with this free theme. Take a peek at our finished form HERE.

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

@import url(http://fonts.googleapis.com/css?family=Emilys+Candy);
body {background-image:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/navy_blue.png);}

.fsForm.fsMaxCol1, .fsForm.fsMaxCol2, .fsForm.fsMaxCol3, .fsForm.fsMaxCol4 {width:600px; background-image:url(http://imageshack.us/a/img607/6672/bottomrz.png); background-repeat:no-repeat; background-position:bottom;}

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

.fsBody .fsForm .fsSectionHeader {background-color: transparent;}
.fsBody .fsForm .fsSectionHeading {font-size:40px; color:#ECAB36; line-height: 40px; text-shadow: rgba(68, 72, 77, 0.75) -1px 1px 1px, 0px -1px 1px rgba(228, 170, 68, 0.49); text-align:center; font-family: 'Emilys Candy', cursive;}

.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: #ffb76b; /* Old browsers */
background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 50%, #ff7c00 51%, #ff7f04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 50%,#ff7c00 51%,#ff7f04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
padding: 3px; margin: 0 auto; clear: both; width: 250px; height:50px; font-size: 24px; color: white; border: none; border-radius: 15px; font-family: 'Emilys Candy', cursive; box-shadow: 0px 2px 3px #2E2D2C;}

.fsSubmit input.fsSubmitButton:hover {
background: #FF7F04 ; /* Old browsers */
cursor:pointer;background-image:url(http://imageshack.us/a/img525/6321/ghostsq.png);background-repeat:no-repeat;background-position:left;}

.fsRequiredMarker {color: #F39217; }