Formstack with Squarespace

Formstack CSS.

We're evaluating Formstack  for use with Squarespace.  In particular there are occasions where we need to use some conditional logic and improve the way information in forms is dealt with.

The specific trigger was the need for email validation - which strangely isn't a field type or option in Squarespace but was a client requirement.  

We wanted Formstack to look like the very understated cool Squarespace forms, still be responsive and mobile friendly, but use the increased functionality of Formstack...  

Example Formstack Form with CSS

 
Disclaimer.  This CSS is offered without support and as a service to the Squarespace community.  Please feel free to use any or all of this at your own risk. Chris.
/*field input Can be styled differently per input type, here it is generic here all fields and an example of the text area field below that*/

.fsBody .fsForm input.fsField {
width: 100%;
padding: 12px;
margin: 2px 0 15px 0px;
border: 1px solid #ccc;
background: #fafafa;
font-size: 12px;
font-weight: 300;
line-height: normal;
box-sizing: border-box;
border-radius: 2px;
}

.fsBody .fsForm textarea.fsField {
width: 100%;
padding: 12px;
margin: 2px 0 15px 0px;
border: 1px solid rgba(238,238,238,0.5);
background: #fafafa;
font-size: 12px;
font-weight: 300;
line-height: normal;
box-sizing: border-box;
border-radius: 2px;
background-color: rgba(238,238,238,0.1);
}

/*field lable*/
.fsBody .fsForm .fsLabel {
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.6em;
line-height: 1.4em;
letter-spacing: 0px;
font-weight: 300;
font-style: normal;
color: #4f5769;
}

/* Form Background Colour */
.fsBody .fsForm .fsSubmit.fsPagination {
    background-color:#ffffff;
}
/*remove the border with the drop shadow and rounded corners*/
.fsboxshadow .fsBody .fsForm {
  box-shadow:none;
}
.fsborderradius .fsBody .fsForm, 
.fsborderradius .fsBody .fsSectionHeader {
    border-radius:0px;
}
body {
    background-color:#ffffff
}

/* Submit Button */
.fsBody .fsForm input.fsSubmitButton {
color: #fff;
/*input your key colour reference*/ 
background-color: rgba(31,185,253,1);
border-color: rgba(31,185,253,1);
display: inline-block;
width: auto;
height: auto;
padding: 1em 2.5em;
border-width: 0;
text-align: center;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none    
}

/*Form settings*/
.fsBody .fsForm {
position: relative;
width:100%;
height: auto;
outline-style:none !important;
border: 0px solid #ffffff !important;
padding-top: 17px;
padding-bottom: 17px;
box-shadow: none;

}


.fsBody {
position: relative;
height: auto;
outline-style:none ;
border:0px solid #ffffff !important;
}

/*Section Header*/
.fsBody .fsForm .fsSectionHeading {
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6em;
line-height: 1.4em;
letter-spacing: 0px;
font-style: normal;
color: #4f5769;

}
.fsBody .fsForm .fsSectionHeader {
    margin-left:20px;
    padding:0px;

}
.fsBody .fsForm .fsSectionText {
    padding:10px;
    margin:0px;

}

/*change the background colour of the focus when clicked.*/
.fsFieldFocused {
    background-color: #fafafa; }



Further CSS information about formstack classes and ID's can be found here: https://support.formstack.com/customer/portal/articles/1239064

Chris Bampton

Isoblue.com, Draycott, Derby, Derbyshire, England, UK