This article is out of date. The most up-to-date article can be found here.
In this article, we'll be walking through all of the styling you can add to your forms in QuestionScout, from changing the fonts to adding blurred background images.
Introduction to the form designer
After you're done building your form, you are probably ready to start adding some styling to your form. We'll be using this form as an example, which has an image field, description field, short answer field, email field and a single choice field added to it:
Navigating to the Design tab will put you in design mode. In the design tool, you can click on elements inside of your form to start applying styling to those fields. Here is an example of having the body of the form selected:
The interaction of clicking on fields to enter their styling options applies to every single field in your form. If you would like to quickly access all of the design options in your form, you can also click the dropdown in the top of the navigation to find all of the fields and elements you can apply styling to, as shown here:
Applying styling to your form
Now you know how to navigate through our form designer, it's time to start applying some styling to your form.
In the Form section of the designer you can style things such as:
- Form Font
- Background Color
- Background Images (from the Unsplash.com directory)
- Background Blur
- Background Opacity (can be used in combination with background color)
- Form Box (A box around your form to protect it from the background image or color)
- Box color
- Box opacity
All of these options can be used to make your form on-brand and completely personal. Applying some styling to the form we've used above, it now looks like this:
This leaves us with something much more to what we're looking for, but we still need to style the titles and the subscribe button. To reiterate: you can click on the elements to navigate to the styling options of those elements, but you can also go to the elements directly by clicking on the dropdown in the header.
Going to the fields styling options we can adjust the field label color, which makes our text much more readable if we turn them white.
Now all that's left is to make change the color of our submit button
To sum up on how to get started using our design tool:
It's advised to only start playing around with the design tool as it makes use of your form, and not a list of elements that all get the same styling.
You can click directly on the elements to modify styling within the form designer, but you can also use the dropdown in the sidebar to quickly access all available design options.