With WorkForms, designing the form of your dreams is easy! The "Design" tab at the top of your form will help you give it the look and feel you need. 

Function and beauty, WorkForms has it all! 🙌

Access the Design tab

The "Design" tab is located at the top of your form, between the "Edit" and "Settings" tabs. Clicking on it will open a design panel on the right side of your form. From within the design panel, you can edit the format, alignment, color theme, background, and font of your form. You will also find the "Hide branding" and "Progress bar" settings within the design panel. 

Formatting and alignment

When setting up your WorkForm, you can choose the alignment of your content and whether you'd like your form to appear on a full page or in a card-style format. 

• Choose a format

When formatting your WorkForm, you have the option to choose between a full-page view and a card-style view. These options will affect the appearance of your form on the screen when the submitter fills it out.

When choosing the full-page format, the form will appear as an elongated page on the screen: 

When choosing the card format, your form will appear in a shorter card-like view on your screen:

Note: To learn about customizing the format of your questions on the form, read our article on Organize your WorkForm with content blocks and pages. 

• Adjust the alignment 

The alignment setting allows you to adjust the placement of your WorkForm within its background. You can choose to align the form to the left, right, or the center of the screen. 

Button spacing and page height

The space between a question and its Next or Submit button can't be adjusted directly. If the buttons seem too far down the page, you can try switching your form layout to card-style view, which uses a shorter container to bring the Next and Submit buttons closer to your questions. To do this, open the Design tab and select the card format under Formatting and alignment.

Customize with AI

Customize with AI lets you automatically design your WorkForm to match your company's brand. Instead of manually styling colors and fonts, AI extracts brand elements from your company's website and applies them to the form, saving time and maintaining consistent branding at scale! 

To customize your WorkForm using AI, simply input your website URL into the Customize textbox. Once AI has scanned the website, you will find your brand colors, logos, and fonts to choose from in the design tabs below. 

Select a color theme

Adding a specific color theme allows you to customize the appearance of the text and buttons on your form, such as the "Start" and "Submit" buttons. 

• Customize buttons

Click on the "Color Theme" tab, and ensure you are in the "Primary color" section. Select a color from the options, or click on the "+" icon underneath "Custom colors" to choose a color from the picker. 

• Customize text color

You can also change the color of your text on the form to ensure that the color of your text is suitable to your form's overall color theme. Within the "Color Theme" tab, click on the dropdown arrow next to "Primary color" and select "Text color". From here, select a color from the options, or click on the "+" icon underneath "Custom colors" to choose a color from the picker. 

Add a background

When selecting a background for your WorkForm, you can set a color, use a template image, or upload your own image. These options enable you to create a form that looks exactly how you want it to! 

• Background color 

To modify the background color, click on the "Background" option on the right-hand side of your screen. In the "Color" tab, you can choose a solid color from the color list or click on the "Custom" button to choose a color from the color picker.  

You can click on "Reset to default" to undo any changes you make to the background color to return to the original WorkForms background. 

• Template image 

WorkForms offers a selection of background images. To open other background options, click on the dropdown arrow next to "Color" and select "Image." From here, you can see the template images on offer. Scroll to the left or right to see all the images on offer, and click on the image you wish to add.  

• Custom image

From within the "Image" tab, you can also upload your own image to set as the background for your form. Click on the "Upload" icon underneath the templates and select an image from your computer to upload. 

Add a logo

To add a logo, click on the "Logo & header" tab in the right-hand pane, and select "Upload image". A window will open, allowing you to select a file from your computer. Once you have selected your image, you can drag the squares to crop your image to a size that suits your needs. 

You can further customize the logo's size and the form's header alignment by using the dropdown arrows next to "Header alignment" and "Logo size." 

Customize your text

You can change the font and direction of the text displayed on your WorkForm by clicking on the "Font" tab in the right side design panel. Click on the dropdown arrow next to "Font" and select a specific font from the list. To change the text direction on your form, click on the dropdown arrow next to "Text direction". 

Adding hyperlinks in form text fields

You can add clickable hyperlinks directly inside certain text fields on your WorkForm using the built-in rich-text editor. This allows you to embed links within your Welcome page, form description, question descriptions, and Thank You page.

The following fields support rich text and hyperlinks:

• Welcome page
• Form description
• Question descriptions
• Thank You page

To add a hyperlink in a supported field:

1Click into the text field you want to edit, such as the form description or a question description.

2Highlight the text you want to turn into a link.

3Click the hyperlink icon in the rich-text toolbar that appears, then enter your URL.

Add Progress bar

An additional setting within the Design tab is the option to add a progress bar to your form. The progress bar will show the submitter how much of the form they have completed, and how much is still left to complete. To add a progress bar, click on the toggle to the right of the setting. 

As the submitter begins filling out the form, a bar will appear at the top of the form and will grow as the submitter progresses in the form. This will enable them to see how much of the form is left for them to complete. 

Hide branding

This setting allows you to hide or show the "monday workforms" branding from your form if you would prefer not to show it. To hide the branding, click on the toggle next to the setting to turn it off.