How to create your contact form and customize it

 How to create a contact form and customize it on Squarespace

I. How to setup your contact form and connect it to Google Drive

II.  Ok, the form looks boring, how can I customize it?

This is a little bit of custom code for you to add to your contact form to make it stand out a little bit more.

First, copy the code below and paste it in your Custom CSS box. You can find it when you click on Design > Custom CSS

.form-wrapper .field-list .field .field-element{
  border:none;
  border-bottom: 1px solid;
  border-color: #D2B3B5;
  background: #fff;  
}

If you want to customize the form further you can play around with the colors, the color background, and the thickness of the lines.

For example, the border-color is a hex color code which consists in a # sign followed by a six-digit code that you can play around with here: https://htmlcolorcodes.com/color-picker/


So for example if you want the lines to be red, you would replace border-color: #D2B3B5; with border-color: #FF5733 ; 

If you want the lines to be thicker, you replace border-bottom: 1px solid; with border-bottom: 4px solid;

III. I want visitors to be redirected to another page once they submit their form

If you want to redirect the user to another page automatically once they submit the form. You first need to have a page already created and save the URL/link to it. 
Once that is done, go to the Advanced tab of the form as we covered in the video above and paste the code below. Just make sure to replace the /your-page section with the link to the page you want people to be redirected to.
For example, here, you would only replace it with the bold section of the link maiahariton.squarespace.com/thank-you-page

<script> window.location.replace("/your-page"); </script>

As always, if you have any questions feel free to contact me :)

 

Related Posts