Style Settings Page and Tips for Styling Formsite Forms

Formsite style settings

Formsite has style settings to allow form owners and designers ways to customize virtually every part of the form. These settings share common colors, fonts, borders, and spacing with other form elements, such as the Save & Return login page and Success Pages.

Customizing the styles for the form and these connected pages occurs on the Style page, found from the link in the form editor. Clicking the Style link shows one of three pages:

  • Themes: Pre-made styles and color combinations to quickly apply to forms
  • Customize: Detailed style settings for customizing forms
  • Advanced: Access to the HTML Head area and form CSS

 

See how to use the Style pages ›


Submit Button Text and Tips for Online Forms

Formsite submit button exampleFormsite forms come with many automated tasks that make building online forms easy. The submit button, for example, automatically appears when needed and shows ‘previous’ and ‘next’ labels for multi-page forms. Forms with Save & Return enabled also automatically display the ‘save progress’ button.

Other button features include:

  • Ability to customize button text
  • Style edits for colors, fonts, borders, etc.
  • Hide buttons completely if necessary

Read more about customizing submit buttons ›


Show Percentages of Calculated Amounts

Formsite show percentagesThe Calculations feature lets forms process basic equations and makes quiz forms easy. Mostly used with the Scoring feature, calculations let form owners set values for form answers then use those answers in equations. Form owners can show percentages using calculated values if needed.

The most common use for Scoring is with an online quiz. The form owner starts by setting values for each answer, then the form tracks the scoring total. At the end of the form, the result displays as the total score and the total possible.

The built-in Piping codes show the scoring totals on the form, but displaying as percentages requires an extra step.
See how it’s done ›


Add Tax and Other Required Fees to Order Forms

Formsite order forms provide form owners with many powerful tools to help collect payments accurately and easily. These tools include integrated payments, recurring payments, calculations, and a large number of pricing options. Adding basic pricing items to order forms lets form owners add to the order total, and also enable owners to add tax and other required fees.

Formsite add tax example formThe basic order form items include:

  • Pricing items: Radio Button Pricing, Dropdown Pricing, and Checkbox Pricing items list choices and prices. These are the most commonly-used order form items and allow visitors to add items to the orders.
  • Quantity items: The Text Quantity item placed before a pricing item allows for ordering multiples of that item. The Quantity List item combines the quantity and price to display as a condensed list.
  • Percent items: The Radio Button Percent item enables form owners to add or deduct a percentage of the entire order. Percent items are used to add tax and other required fees to orders.

Continue reading to see how it works ›


Pre-Populate URL Parameters with Embedded Forms

A common question when embedding forms is how to pre-populate URL parameters. For example, in this URL:

https://www.example.com?first=red&second=blue

The URL parameters come after the question mark ‘?’ and multiple parameters are separated with ampersands ‘&’. This URL contains parameters ‘first’ and ‘second’ with the corresponding values ‘red’ and ‘blue’.

Formsite Pre-populate URL Parameters

Using the prePopulate value in the form’s embed code lets form owners pre-populate the embedded forms. A previous article shows how to accomplish that using the site’s back-end language (php, java, .NET, asp, etc.). For form owners without back-end knowledge or access, these are instructions for using basic HTML files and Javascript.

Continue reading to see how ›


Field Labels in Forms Affect UX & Completion Rates

Using Formsite’s drag-and-drop form builder makes for fast and easy forms. Adding form items provides the item’s structure automatically, and some options are available for more customization. For example, the default position of the field labels places them above and aligned to the left side of the field. For most forms (in left-to-right reading languages), this default placement proves to be the best.

Placement of Field Labels

The possible label placements are:

  • Top left, center, or right
  • Left, right
  • Infield (inside the field)

Formsite field labels

Read more about designing field labels ›


Page Rules for Smart & Multi-page Forms

An essential tool for creating smart online forms is Formsite’s Rules. The Rules apply to either form items or pages and makes working with multi-page forms possible. Page rules apply their logic after each page and allow form owners to repeat or skip as needed.

The evolution of mobile apps has helped forms and other data collection methods with higher expectations for user experience. Examples include larger text, easier selections and answers, bigger buttons, and less on-screen information. A recent design style that is gaining popularity is the multi-page form, or showing one question at a time.

Formsite page rules

Multi-page forms are easily made with Formsite and page rules help to make them smart.
Read more to see how ›


Embedded Form Alignment and Other Formatting Tips

Embedded forms allow Formsite form owners to display forms in their own sites, which creates a more integrated and seamless user experience. The embed code offers variables for sizing the form, prePopulating the embedded form, and various other settings. Embedded form alignment can be tricky, however, and some style settings in the host site may be needed.

Formsite embedded form alignment

The most common way of embedding forms displays the form in the main content area on the host site. The form’s width is set to 100% and the host site’s code sets the container’s position.

Sometimes the form owner wants to display the form smaller, aligned differently, or in a smaller container on the host site. Therefore, custom CSS changes the alignment and position of the form’s container.

Keep reading to see how it’s done ›


Export Results Reports with Filters, Views & Labels

A new feature suggested by customers allows report users to export Results Reports. This new feature extends the download ability to report viewers and makes sharing results easy.

The Results Reports is the Formsite way to share results without giving access to the entire account. New form submissions save as results in the Results Table, and the reports feature allows form owners to create filtered reports with specific information. Reports are then shared through a unique URL.

Formsite export Results Reports

The new feature allows users of Results Reports to download the results in an Excel spreadsheet, using the filters, views, and labels.

Continue reading about exporting Results Reports ›


Restore Incomplete Results to Resume Completing Forms

Incomplete results occur when form visitors do not complete the form through the last submit button. Sometimes they experience technical trouble and lose their network connections, which cause the form result to be abandoned. Another possibility is that the form requires long answers that cause visitors to spend a long time on each page. Regardless of the reason, there are times when we need to restore incomplete results so the owners can resume editing them.

Formsite restore incomplete results

What causes incomplete results?

The system will create the result when these events occur:

  1. The form is submitted. The normal one-page form creates the result with a Complete status when submitted successfully.
  2. The multi-page form goes from page 1 to page 2. To save the answers from page 1, the system needs to create the incomplete result and saves the answers.
  3. A file or image is uploaded to the form. Uploading files creates incomplete results that contain the link to the file.

Continue reading about how to restore incomplete results ›