Squarespace is a popular platform that allows users to create stunning websites with ease. One of its powerful features is the ability to create forms, which are essential for collecting information from visitors. While Squarespace offers a user-friendly form builder, sometimes you might want to customize the appearance of your forms beyond the standard options. This is where custom CSS comes into play. In this article, we’ll guide you through the process of customizing Squarespace custom contact form using CSS to achieve a more personalized look.
Why Customize Squarespace Forms with CSS?
Squarespace offers a range of pre-designed form styles that can be easily applied to your website. However, if you have a specific brand identity or design aesthetic, you might want to go beyond these defaults and customize the forms to match your unique vision. Customizing forms with CSS enables you to:
- Maintain Brand Consistency: Customizing forms ensure that they align perfectly with your website’s branding, colors, and typography.
- Enhance User Experience: By creating visually appealing and user-friendly forms, you can make the submission process more engaging and intuitive for your visitors.
- Stand Out: Unique and well-designed forms can set your website apart from others, leaving a lasting impression on your audience.
How to customize Squarespace forms with CSS| Custom Contact form
Customizing the Squarespace form with your own website’s custom code is super easy. Here I’ll describe the following four customization codes:
- Change input field border and background
- Change the focus style
- Change required asterisk
- Change the submit button colors
This tutorial was originally demonstrated in Squarespace 7.1, but these code examples are also applicable to older websites built on version 7 of the platform.
Here is how you can install the codes into your website:
- Log in to the Squarespace website.
- Navigate to Design and select Custom CSS.
To change the input field border and background copy the following code and paste it in the custom code bar under design.
.sqs-block-form .field-list .field input,
.field textarea {
border: 1px solid #eee;
border-radius: 5px;
background: #e5f5f6;
}
If you want to change the focus style, you’ll have to use this code:
.sqs-block-form .field-list .field input:focus,
.field textarea:focus{
background: #F6EDCE;
outline: none!important
}
DO NOT forget to change the color codes and border style according to your websit.
You can change the required to an asterisk ✳ by using the following code:
.sqs-block-form span.required{
visibility:hidden
}
.sqs-block-form span.required:before{
content:" * ";
visibility:visible!important
}
And finally comes the submit button customization. You can change the colors of submit button and create a hover effect using the following code:
.form-wrapper input[type=submit]{
background-color: #A1D9DD!important
}
.form-wrapper input[type=submit]:hover{
background-color: #EDD17D!important
}
FAQs
Q1: Can I customize the appearance of my Squarespace forms beyond the built-in options?
A1: Absolutely! While Squarespace provides default form styles, you can further customize the appearance of your forms using CSS to match your unique design preferences.
Q2: Do I need coding experience to customize forms with CSS?
A2: While some familiarity with CSS is helpful, you don’t need to be an expert. Basic knowledge of CSS selectors and properties will suffice. Squarespace’s intuitive interface makes the process user-friendly.
Q3: How do I access the Custom CSS editor in Squarespace?
A3: After logging in to your Squarespace account, navigate to your desired website. Under the Design section, you’ll find the option labeled Custom CSS which allows you to input your custom code.
Q4: How can I identify the HTML class or ID of the form element I want to customize?
A4: Right-click on the form you want to customize, then select Inspect or Inspect Element. In the HTML code that appears, look for the class or id attribute within the form’s opening tag (e.g., <form class="my-custom-form"> or <form id="custom-form">).
Q5: Can I apply these CSS examples to older Squarespace versions?
A5: Yes, you can apply the provided CSS examples to legacy websites built on Squarespace version 7. These codes are adaptable and compatible across various versions of the platform.
Q6: How do I style specific elements of the form, such as input fields and submit buttons?
A6: To style specific elements, you can use CSS selectors. For instance, to style input fields, you can target them with .my-custom-form input[type="text"]. Similarly, you can target the submit button with .my-custom-form button[type="submit"].
Q7: What if my custom styles don’t look right on different devices or browsers?
A7: It’s important to test your customized forms on various devices and browsers. If your styles don’t display as intended, you might need to adjust the CSS properties to ensure a responsive and consistent design.
Q8: Can I revert to the default form styles if needed?
A8: Yes, you can always remove or comment out your custom CSS code to revert to the default form styles provided by Squarespace.
Q9: Are there any limitations to consider when customizing forms with CSS on Squarespace?
A9: While CSS customization offers significant flexibility, it’s important to stay within Squarespace’s framework. Excessive customization might affect the functionality or responsiveness of the forms, so it’s a good practice to thoroughly test your changes.
Q10: Where can I get help if I encounter issues while customizing forms?
A10: Squarespace’s support resources, including their official documentation and community forums, are excellent places to seek assistance. If you encounter technical difficulties, their support team can provide guidance as well.
