Custom Form on your Squarespace websites 

 

Custom your forms by using Custom CSS window panel in Squarespace and web browser inspector. 

 

Step 1 - Add Custom Font

/*Custom Font - Avenir Book */
@font-face {
  font-family:'Avenir LT W01 45 Book';
  src:url('https://static1.squarespace.com/static/59ec9d5af9a61ebf9183e58b/t/5ab7a305562fa7d514080bf0/1521984261531/AvenirLTStd-Book.otf')
}

/*Custom Font - Avenir Heavy */
@font-face {
  font-family:'Avenir LT W01 85 Heavy';
  src:url('https://static1.squarespace.com/static/59ec9d5af9a61ebf9183e58b/t/5ab7a310575d1f49361cc99d/1521984272506/AvenirLTStd-Heavy.otf')
}

/*Custom Font - Avenir Black */
@font-face {
  font-family:'Avenir LT W01 95 Black';
  src:url('https://static1.squarespace.com/static/59ec9d5af9a61ebf9183e58b/t/5ab7a318575d1f49361ccaba/1521984281604/AvenirLTStd-Black.otf')
}

Step 2 - Add Background Linear Gradient

/* Background Linear Gradient*/
#collection-5aaea0cbaa4a99e02194703b{
  background:linear-gradient(+90deg,#3450A5,#2D8ADB)
}

Step 3 - Change Form Box Style  

/* Newsletter Box Style*/
#block-yui_3_17_2_1_1521902417234_12334{
  font-family:'Avenir LT W01 45 Book';
  height:20%;
  width:40%;
  background:linear-gradient(-30deg,#1A1D2A,#0B0C0D);
  color:grey;
  border:none;
  border-radius:25px;
  padding:80px;
  box-shadow: 3px 2px 100px #27429B;
  padding-top:250px;
}

/* Change Info Section */
.form-wrapper .field-list .fields .title, .form-wrapper .field-list .fields .description, .form-wrapper .field-list .fields .field, .form-wrapper .field-list .fields .field-error{
  margin-left:3%;
}
.form-wrapper .field-list .field .option{
  font-size:15px;
  color:white;
}

.form-wrapper .field-list .field .field-element{
    font-family:'Avenir LT W01 45 Book';
padding:20px;
  border:none;
  border-radius:25px;
  height:50px;
  font-size:15px;
}

Step 4 - Add some Text

/* Add TEXT */
p{
    font-family:'Avenir LT W01 85 Heavy';
  color:#F9F091;
  font-size:100px;
  position:absolute;
  top:150px;
  left:60px;
}

Step 5 - Change Bottom Style

/* Change Bottom Style */
body:not(.button-style-default).button-corner-style-square .sqs-editable-button, body:not(.button-style-default).button-corner-style-square .sqs-editable-button-shape{
    font-family:'Avenir LT W01 85 Heavy';
  background:#F9F091;
  border-radius:50px;
  color:black;
  width:150px;
  height:60px;
  padding:20px;
}

Step 6 - Make Responsive for Tablet & Mobile

/* RESPONSIVE - Tablet Screenview */
@media only screen and (max-width:1440px){
  #block-yui_3_17_2_1_1521902417234_12334{
    width:60%;
  }
  p{
    font-size:80px;
    top:160px;
  }
}

/* RESPONSIVE - Mobile Screenview */
@media only screen and (max-width:468px){
  #block-yui_3_17_2_1_1521902417234_12334{
    width:50%;
    margin-left:8px;
  }
  p{
    font-size:60px;
    top:90px;
    line-height:80px;
  }
}