How to Style the Signup Form with Custom CSS

The Design tab of your Signup Form editor allows you to customize how your form looks to your users.

If you'd like to take your form's design further, you can style it using custom CSS similar to how you can use custom fonts for the text in your form.

CSS stands for Cascading Style Sheets. It describes how HTML elements of the signup form are to be displayed on your form user's screen.

If you're familiar with CSS already, here's how you can add it on your form as well as know how to select the elements you want to style.

How to Add Custom CSS

1: From your project dashboard, navigate to Signup Form and select the CSS tab.
2: Enter your CSS code in the provided input box and hit the Save button to immediately see how your form looks with the styles you've applied to it.; The Signup Form editor will also autosave every 20 seconds from the last time your changes were saved/autosaved. That's it!

Knowing the Parts of the Form That You Want to Style

Prefinery uses descriptive CSS classes and IDs to add a default style to your form as well as implement the changes you applied through the Design tab. You can use these same specific selectors as well as generic ones to target DOM elements in your form.

The following is a summary of commonly used CSS selectors:

`#pfy-signup-form #tester_submit`	Submit button
`#pfy-signup-form .pfy-form-row`	Row wrapper around each question
`#pfy-error`	Error message when form is submitted with errors
`#pfy-signup-form .form-group > label`	Form question label
`#pfy-signup-form .form-group > input`	Form question input field
`#pfy-signup-form #tester_profile_email`	The email question input field

The above is not a complete list. You can target anything in the DOM via CSS. The easiest way to do this is to use your browser's Developer Tools, specifically its element inspector feature. Here's how:

1

While editing your Signup Form, right-click on an empty space inside the browser window and select Inspect in the context menu that appears to open up Developer Tools panel. Alternatively, you can bring it up by navigating through your browser's menu.

Here are shortcut keys to opening up the Dev Tools panel for each operating system and browser:

Windows (Chrome, Firefox, Edge): F12 or Control+Shift+I
Mac (Chrome, Firefox, Safari): Command+Option+I

2

Click on the Inspect button on the leftmost part of the panel header, then select the part or section of your form that you want to inspect and style. The Dev Tools panel will automatically display and highlight the element you selected.

3

Right-click on the highlighted element in the Dev Tools panel then choose Copy > Copy selector.

4

In the CSS editor of your signup form, add a new line and paste in the selector you just copied along with the styles you want to apply to it. Hit the Save button when done.

5

Repeat steps 2-4 for other elements that you want to style.