How to customise a Squarespace form block
In this video we'll show you how to use customise a Squarespace Form Block.
This video covers 5 main things:
We’ll go over all the different spacing options provided in the SquareKicker Form Tools.
We’ll break down the different label font options
We’ll take a look at the most exciting part of this tool, the text input, checkboxes, radio buttons and select dropdown design options
How to design the post submit screen, the message people will get once they submit your form.
Last we’ll show you how you can turn this form into a preset so you can quickly make all your forms look exactly the same across your entire site.
Transcript:
Forms are one of the most important call to action points on your website. Squarespace’s form builder has so many fantastic fields and it’s really easy to setup but is has always been a struggle to customise the design of this vital block.
SquareKickers tool allows you to fully customise the design of your form block. SquareKicker also has a newsletter block tool with similar features so you have consistent designs on your site.
This video covers 5 main things:
We’ll go over all the different spacing options provided in the SquareKicker Form Tools.
We’ll break down the different label font options
We’ll take a look at the most exciting part of this tool, the text input, checkboxes, radio buttons and select dropdown design options
How to design the post submit screen, the message people will get once they submit your form.
Last we’ll show you how you can turn this form into a preset so you can quickly make all your forms look exactly the same across your entire site.
Once in edit mode, click on a Squarespace form block and then click the SK button. This will launch your block tools. First we’ll head into spacing and have a look at all the options provided.
1.) You will see spacing options for Fields, Labels, Description, Inputs, and Captions. If you’re not sure what these target, just hover over the options and you will see a yellow outline highlight the corresponding elements.
2.) Now that we have covered the spacing lets go back to the main menu and dive into the label options. Here you have the options to change the font on all the labels, description and caption text.
Inside these options you will find all the same font options you are familiar with from SquareKicker.
3.) Back to the main menu again, let’s check out the inputs. The following are 4 different type of input fields on a form block. These options will change all the input type fields on this form block so each field remains consistent.
First, lets look at the options for a Text Input:
You will see at the top an option to change the font style in the text input.
The style options are predefine styles for text inputs. You can choose underline, pill, shade and frame.
As you can see, these predefine options make a really quick impact.
If you want more control, select custom and you’ll be presented with more extensive options.
Next, we’ll look at Checkboxes:
Checkboxes have predefined options just like the text input fields, on each option you can also customise the design of the styles.
Square, Rounded and circle are 3 of the styles you can choose from. A new exciting option is the ability to turn a standard checkbox into a toggle and then fully customise the design to align with your brand.
The Radio Buttons and Select Dropdown’s both have similar options to the text input and checkbox design styles and options.
Heading back to the main menu, You can also uniquely customise the Line Field.
Line Fields are great because they can act like a heading for a group of fields.
Have you’ve ever wanted to customise the message your visitor sees when they submit your form?
Well now you can! As you hover over the Post Submit Option, your form will hide and the Post Submit message will display.
You will see all the same options your would normally expect to see in a standard SquareKicker text block tool.
Just a quick note, SquareKicker Form Block Styling will only be applied to the form block and not the Form Lightbox Design.
If you have multiple forms on you site it makes sense to save your new form as a preset so you can apply these same styles to all your forms on your site. To create a form preset, head over to your Presets tab and click “create preset from current block settings”. Now you can rapidly apply form styling to any form block on your site.
Presets are a premium SquareKicker feature and available on Pro, Designer and Agency plans and the free trial. For more information on presets check out the Presets tutorial on the SquareKicker website.
Now its your turn. For more inspiration join the SquareKicker Community on Facebook.
