Many service-based businesses utilize forms on their websites to collect client inquiries. Squarespace’s form blocks offer basic customization features; further adjustments may be possible using CSS.
In this article, I will provide some CSS snippets that will enable you to personalize forms in various ways. These will target specific HTML elements within page sections.
Background Image
Squarespace’s Form Block is one of its most versatile tools, enabling you to gather contact details, use Zapier to build mailing lists, or hack it to add cool features like file uploads. However, Style Editor only offers limited ways of styling the Form Block; for a truly personalized result you must explore CSS.
Form Blocks in both Fluid Engine and classic editors allow you to set an image as its background, and set padding around its borders for additional space to work with. Furthermore, when using color backgrounds you have control over how they’re cropped on both desktop and mobile.
To set an image as the background, edit the page where it should be shown and in its Image Overlay field select or upload your photo from the Select a Photo drop-down list in Select a Photo drop-down or upload your own. Furthermore, the image can also be moved or scaled accordingly.
Background images vary in height depending on the size and width of your section and visitor browsers. To select an ideal height for your image, use Fill or Fit on the Design tab; Fill will stretch to fill its block area; to avoid this, try uploading an image that’s 1500 to 2500 pixels wide instead.
For a subtler effect, use the Corner radius settings in the Design tab to round the corners of your image and create an overlay shape resembling banner or poster printouts.
When working in the Classic Editor, you have an additional way of quickly changing an image block’s layout and text alignment without opening its editor: use Layout/Alignment buttons that appear next to pencil icons on their right sides to quickly test out different layout options for your background image before making a decision. This feature makes experimenting easier!
Padding
Squarespace’s Form Block is one of its most powerful tools. You can use it to build contact forms, connect to Zapier and more. However, its native options for styling are somewhat limited in the Style Editor; here’s how you can add some personal flair using custom CSS.
Step one in setting up your Form Block is adding your background image. Step two involves customizing it; choosing from various color backgrounds and padding sizes before finally adding text and buttons with several font styles (including changing size if necessary) before finally selecting which button styles and font sizes will work best.
Adjusting the padding on your website can be accomplished using various means, but one of the easiest is through CSS code. To use it effectively, navigate to your Style Editor and scroll down to “Padding”, where you can then adjust top, bottom, left, and right padding as necessary.
CSS can also make your site’s elements easier for readers to read, such as underlining headings with custom CSS code – this will make them appear bold but won’t change their font size – or to create unique backgrounds for content blocks.
Custom fonts can also help personalize your Squarespace website quickly and efficiently, taking it beyond its standard template without loading large images.
Add your custom font by editing either a CSS file or style editor font settings. If you’re new to CSS, I highly suggest following a tutorial; it will help you learn its fundamentals as well as create your custom font. There are numerous online tutorials which can guide you through this process and once finished you can upload your font onto your website.
Border
The form block on your Squarespace website provides visitors with an easy way to contact you through its platform. Use it for anything from contact forms and file upload forms to any other task that requires filling out fields. While Squarespace provides this versatile block with basic functionality, its customization potential remains limited; for optimal use of this form block use CSS instead.
Here are a few simple snippets you can use to give your form block more prominence on your website. To apply these, open up the code editor and paste in your code snippet; make sure that once finished, save all changes before closing out of it!
This code snippet adds borders around image blocks to draw attention and draw the eye in. You can adjust both its size and color as needed using values in the code; by default it uses black as its border color, but any standard or hex color code name (such as red) can be substituted – the default setting being black!
Another simple snippet to add borders to form blocks, this code allows you to customize its width. Simply change “3e5” with any number that suits you in the code.
Subtlely enhance your image blocks with shadow effects using this code snippet! For a subtle yet noticeable change, adjust the “#000000” value in the code for additional depth and visual interest. To change its hue, adjust “color:#000000”.
This snippet is ideal for image blocks, though any block with an image background. It makes your text appear to tilt up and down as you hover over it, giving the illusion that its corners are tilting up or down when hovered over. To adjust its opacity level simply change ‘0.2’ according to your needs.
This code adds soft corners to images, making them more visually appealing and professional-looking on your website. This works for all image blocks in Fluid Engine as well as inline and poster layouts of classic editor Inline/Poster editors. In order to use this snippet correctly, you need the unique Block ID of each block that needs styling; Squarespace Collection/ Block Identifier provides this function or you can search your site. Once you know its Block ID simply replace ‘your-unique-block-id’ in the code below with it’s value instead.
Buttons
The Form Block is one of Squarespace’s most versatile tools, enabling you to build contact forms for your website or connect it to third-party services like Zapier or Wufoo to collect email addresses for newsletter subscription. By customizing its appearance further – adding images or adding custom CSS codes – your Form Block will look unique to your brand and business. This tutorial shows you how to do both! Additionally, learn how you can add images into Form Blocks while altering layout settings; additionally learn how you can further tailor its appearance by adding images/customizing its layout/adding custom CSS so as to further modify its appearance!
Button design is an integral element of any successful website. You want your visitors to understand exactly what the button does when they click it, and what will happen when they do. Squarespace comes equipped with some built-in button styles (depending on the template) which you can modify using the Site Styles editor; for something more creative or customized for your biz here’s how you can add one with just two lines of code!
Before beginning, it’s essential that you create a Form Block on your website and create Form Fields to collect visitor information. After all the fields have been created, select a submit button which will appear on your form.
When creating a submit button, its default is to display an icon. However, you have the ability to alter this by customizing its text with anything that relates directly to what your submission button needs to say.
After selecting a submit button, you can customize its background color and padding settings. To change its background hue, use the toolbar’s “Background” feature and choose either from your brand palette or select custom. In addition, the corner radius for Form Block padding can also be altered as desired.
To change the padding, open up your Site Styles panel and navigate to a page containing a Form Block. Identify it, and then use its toolbar to select “Padding,” before setting values for “Top Padding,” “Right Padding” or “Left Padding.” Be sure to save before exiting out of the Panel!
