How to customize your Squarespace forms with FormKeep
Squarespace sets itself apart from other website-building platforms by combining ease of use with stylish, professional design. The company’s mission is to make web design as seamless as possible, which means that you can design a fully functional website without external software or plugins.
The straightforward Squarespace system appeals to a lot of web design novices. Whether they want to build a personal portfolio or an e-commerce site, Squarespace makes it easy. But experienced users might want more customization opportunities. A third-party service like FormKeep can integrate with Squarespace to offer a wider variety of design options as well as more robust backend features.
In this blog post, you’ll learn how to build forms using Squarespace’s default templates and how to make custom forms with FormKeep.
Building forms with Squarespace
You don’t need to know any code to build a website using Squarespace. Many Squarespace website templates include built-in contact pages that include submission forms, but you might have more specific needs that require building your own form. Let’s walk through setting up a simple contact form with Squarespace blocks.
Blocks are what Squarespace uses to lay out content. These include images, text blocks, and blank spacers, and you can choose from a variety of submission form blocks, including ones designed for newsletter signup or contact forms. You can find these by creating an empty page and clicking the button labeled Add Page Content.
Once you’ve chosen a form template, you can double click on it to open the Edit Form menu. The first page of the menu, Build, lets you change the name of the form and the fields that appear in the form. These include text boxes, date and time fields, and contact information, and you can choose whether these fields are required. For example, if you’re collecting phone numbers and email addresses, you might include a checkbox field that asks how users would prefer to be contacted.
On the second page of the Edit Form menu, you choose where submissions are stored. Squarespace can also send form submissions to Google Drive or an email address of your choice. With Squarespace’s Business or Commerce plans, users can also connect forms to MailChimp or Zapier.
The Advanced page of the Edit Form menu lets you edit the label and alignment of the submit button. You can also change what happens after users submit the form, either by changing the post-submit button from the standard “Thank you!” or by adding a redirect URL. Finally, the Advanced panel lets you enable Lightbox Mode, which will hide the form until the user clicks a button.
That’s all you need to do to create a functional, stylish form in Squarespace. But if that’s not enough, you can use Squarespace’s code block to make your own form from scratch.
Customizing Squarespace forms with HTML
Squarespace’s blocks make page-building easy, but they don’t allow for a high level of customization. If you need to add additional field types to your form, like file uploads, if you want to hide and show certain form elements based on the inputs, your only option is to use the Code Block feature in Squarespace.
In the Squarespace page editor, click one of the insert points on the left side of the screen to choose a content block to add. Add a Code Block, and then paste the form code.
Here’s what a default Squarespace form looks like:
And here’s a form added to a Squarespace website using the Code Block:
This example HTML will display that form:
.myss-form-container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 50%;
}
.myss-title {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-size: 2em;
font-weight: bold;
letter-spacing: .05em;
padding-bottom: 1em;
}
.myss-form-label {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #2c3e50;
box-sizing: border-box;
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.myss-form-input {
box-sizing: border-box;
font: inherit;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 100%;
height: 45px;
padding: 10px 15px;
font-size: 15px;
color: #2c3e50;
background-color: #ffffff;
border: 1px solid #dce4ec;
border-radius: 4px;
border-width: 2px;
}
.myss-textarea {
font: inherit;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
box-sizing: border-box;
width: 100%;
padding: 10px 15px;
font-size: 15px;
color: #2c3e50;
background-color: #ffffff;
background-image: none;
border: 1px solid #dce4ec;
border-radius: 4px;
border-width: 2px;
height: auto;
}
.myss-form-button {
box-sizing: border-box;
margin: 0;
text-align: center;
border: 1px solid transparent;
white-space: nowrap;
padding: 10px 15px;
font-size: 15px;
border-radius: 4px;
color: #ffffff;
background-color: #2c3e50;
border-color: #2c3e50;
display: block;
border-width: 2px;
width: 100%;
margin-top: 1em;
} <div class="myss-title">Register Now</div>
<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST" target="_blank">
<div class='myss-form-field'><label class='myss-form-label'>First Name</label>
<div class="myss-form-input-container">
<input class="myss-form-input" type="text" name="first_name" placeholder="John">
</div>
</div>
<div class='myss-form-field'><label class='myss-form-label'>Last Name</label>
<div class="myss-form-input-container">
<input class="myss-form-input" type="text" name="last_name" placeholder="Smith">
</div>
</div>
<div class='myss-form-field'><label class='myss-form-label'>Email</label>
<div class="myss-form-input-container">
<input class="myss-form-input" type="email" name="email" placeholder="john@example.com">
</div>
</div>
<div class='myss-form-field'><label class='myss-form-label'>Subject</label>
<div class="myss-form-input-container">
<textarea class="myss-textarea" name="subject" placeholder="Reason for contacting us" rows="5"></textarea>
</div>
</div>
<button class="myss-form-button" type="submit">REGISTER</button>
</form>
</div>Now that you have a form that looks the way you want, you’ll need a way to manage what happens when a user submits information. With FormKeep, you can
- Get notified when people fill out the form
- Save a copy of the submission so you can export or download attachments like resumes or photos
- Catch and remove any spam submissions
- Connect to Google Sheets, Salesforce, Pipedrive, HipChat, ActiveCampaign and many more
Storing and managing form submissions with FormKeep
The example HTML above includes this line of code:
<form action="https://formkeep.com/f/exampletoken"
accept-charset="UTF-8"
enctype="multipart/form-data"
method="POST">
The action attribute points to FormKeep’s example token. Every FormKeep user has a unique, automatically generated token found under the Setup tab on the FormKeep website. You can replace the example token with yours to direct form submissions to your FormKeep account.
FormKeep also has its own Form Designer, which works a lot like Squarespace’s Edit Form menu. FormKeep, though, offers additional options not available in Squarespace, including attachments or file uploads.
Forms created through FormKeep’s Form Designer can be added to Squarespace websites using a Code Block. Just publish the form, go to the Setup tab in FormKeep, and copy the HTML from the Embed section.
FormKeep collects the data submitted through this form, stores it securely in a cloud database, and lets you share and manage that data without routing it through an email address. This is especially convenient for websites that require multiple forms or long forms that handle a lot of information.
Here are some other benefits to integrating FormKeep with your Squarespace website:
- File uploads: Squarespace does not support forms with file upload fields. That requires a third-party service.
- Advanced spam protection: In addition to reCAPATCHA and basic spam protections, FormKeep also provides Field Validations that can be used to assess the information being sent and reject those that do not meet your criteria.
- Data handling: Squarespace offers integration with MailChimp and Zapier as a premium feature, only available with certain plans. Users who prefer to stick with Squarespace’s Personal Plan can use Zapier to manage data submitted through FormKeep forms without changing their Squarespace plan.
Data routing: If you need to securely share submitted data, FormKeep can notify multiple email addresses with submissions. FormKeep also offers Slack notifications and integration with Google Sheets. - Message formatting and control: FormKeep gives you control over the format and information you get in FormKeep’s notifications. You choose which fields you want to see data from and how that information is presented.
Enhancing forms with Formkeep
Check out some examples of forms you can build here, including some HTML samples on CodePen.
Once you’ve published a form using FormKeep, you can integrate it with Google Sheets to manage your information and Slack to notify you when you have a new submission. FormKeep also offers Zapier integration, which will let you connect your form to thousands of applications, including email newsletter managers like MailChimp, e-commerce services like Salesforce, and project management apps like Asana.
Squarespace gives beginners the tools to build great websites, and its Code Block feature gives more experienced web designers the option to do even more. FormKeep can take those websites to the next level with improved security, functionality, and customization.
Boost the forms on your Squarespace website using FormKeep today, and don’t be afraid to reach out to our developer team at support@formkeep.com with any questions.
You can also check out our other blogs discussing how to setup your forms in other tools and platforms. We have an entry on Weebly Forms!