Custom Styles for Form Inputs with Example Code

Form elements like Radio Buttons and Checkboxes get their basic styles from the browser. These input items follow standardized rules for collecting form answers. For example, Radio Buttons only allow one choice per group and Checkboxes allow for checking and unchecking more than one. Sometimes these standard input items benefit from custom styles to make them more interesting or user friendly.

Built-in Custom Styles

Formsite custom styles image list

For example, our Image List item lets form owners use images for choices. By default the item allows for multiple selections and shows Checkboxes in the corners. Setting the max setting to 1 changes it to Radio Buttons.

Those who want to go beyond images and apply styling for all form elements can do so. Form owners who want to enhance the custom styles for input items use the CSS settings on the Style -> Advanced page to change their appearance. 

Applying Custom Styles

Try any of the examples by copying and pasting the code to the bottom of the form’s Style -> Advanced page before the </style> tag at the bottom.

Customize the colors, sizes, corner rounding, etc. by changing the CSS settings in the provided code.

Examples of Custom Radio Buttons and Checkboxes

.q .choices input + label {
  width: 100px;
  padding: 10px;
  background-color: #efefef;
  border: 1px solid #cccccc;
  border-radius: 5px;
  text-align: center;
.q .choices input + label::before {
  display: none !important;
.q .choices input:checked + label {
  background-color: #ffff00;

Use different styles for Radio Buttons by adding a type to the input. For example, to only target Radio Buttons add the [type] after each input:

.q .choices input[type="radio"] + label {

To only target Checkbox items:

.q .choices input[type="checkbox"] + label {

Continue reading

Show the Highest Bid on Your Auction Form Using the API

Formsite highest bid example code

Auction forms come with special considerations for form owners. Silent auctions are those that collect bids without knowing what everyone else bids. The person with the highest bid gets contacted after the auction completes and they typically don’t know by how much they won.

Collecting bids on products and services works by adding a Number item and letting visitors enter their bid. Adding a small amount of Javascript turns the silent auction into a live auction by displaying the highest bidder.

How to Show the Highest Bid

This method uses the Formsite API to look at one form item, sort the results highest to lowest, then return the top value.

Step 1: Start by building the form and adding the auction information. Describe the product or service in the auction, collect the name and contact info, and provide a Number item for the visitors’ bids.

Formsite highest bidder API settings

Step 2: After completing the form, go to the Form Settings -> Integrations -> Formsite API page. From there, collect the following information:

  • API base URL (X)
  • Access token (Y)
  • Item value for the bid field (Z)

Step 3: Copy and paste the following code into a text editor to make editing easier. Replace the placeholders X, Y, and Z in the code with the values from step 1. Feel free to also change the text “High bid” and “No responses yet” if you want.

<div id="bid" style="padding:25px;font-size:18px;">High bid: </div>
    .then(response => response.json())
  .then(data => {
    var bid = typeof data.results[0] == "undefined" ? "No responses yet" : data.results[0].items[0]["value"];
    var bidWithCommas = bid.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById("bid").textContent += bidWithCommas;

The base URL points to your Formsite account and the specific form. The access token is like your account password so take care to protect it from unauthorized access. The item value tells the script which column to find the bid amounts. The sort direction says to sort high-to-low, and the limit says to get the top value.

The rest of the code says what to do if there are no results and if there are, what item to update.

Continue reading

Membership Templates and Online Forms for Clubs

Formsite membership templates example

Formsite online form templates help form owners create new forms fast. The list of templates includes forms by type and by industry, which makes browsing them easy. Membership templates give organizations a fast and easy start for building online forms.

Examples of membership forms include:

Membership Templates

Club and membership forms share similar features with employment forms and volunteer forms. Many times they contain fields for contact information and questions about past experiences or goals for the future. There may be a need for uploading supporting documents to help confirm membership or organize members.

Formsite lets form owners make copies of forms for easy reuse of form items and style consistency. For membership forms that collect information on more than one person or location, we have ways to duplicate questions.

For duplicating a group of items containing a few input fields, the easiest way is to add an ‘add another’ checkbox:

  1. Add the questions for the first response, then add a Checkbox with one choice of ‘add another’ Click the Multi-Select link on the first question in the group to begin the selection, then click the End Selection link on the Checkbox item, then click Copy
  2. Repeat until you have copied as many times as you need
  3. Go to the Rules page and set rules on each item to show when checking the previous Checkbox

For duplicating a group of questions containing many input fields, the most convenient way uses the Repeating Page Rule:

Formsite membership templates repeat page
  1. Add Page Break items before and after the group of items you want to repeat
  2. Add a Dropdown item on page 1 asking how many you want to repeat
  3. Page 2 contains the items for a single response. Go to the Rules page and add a page rule to repeat page 2 using the Dropdown from page 1 as the number of repetitions.
  4. Page 3 and the rest of the form shows after the repeating is complete

Make a Membership Form from a Template

  1. Go to Formsite’s templates and browse the templates
  2. When you find a template with questions or styles you like, click the Get This Form button
  3. Also, you can click the Create New Form button inside your account to see the templates
  4. Use the form editor to edit the questions and add new ones to customize your form
  5. Click the View Form button to see the live form and find the form’s link on its Share page

For more information about using the form editor, see our Getting Started video.

Continue reading

See the Account Log for Logins, Events, and More

Formsite account log

Formsite account management sometimes requires investigation to track down when events occurred. For example, if a result doesn’t appear in the Results Table as expected, it may be because it’s in a different form or possibly deleted. Tracking events for the Formsite account is easy using the account Log page.

Located under the User Menu, the Log page shows dates and times for account-level events:

Continue reading

How to Limit Registrations and Create a Waitlist

Formsite waitlist examples

Formsite’s registration form templates give event managers a fast and easy way to collect ticket orders. Whether the registrations are ongoing or a one-time event, organizing registrants is essential. There are times when an event has limited capacity and the demand for spots exceeds the number available. When that happens, a waitlist can be useful.

Fun fact: Waitlist is one word when it’s a noun but hyphenated when it’s a verb:

  • “Please sign up for our waitlist
  • “Click here and we’ll wait-list your information”

APStylebook (@APStylebook)

Continue reading

Add-on Options for More Forms, Sub-users & File Space

Formsite Add-on Options example

Formsite service levels support the most common user types and contain limits for typical needs. For example, the Free service level accommodates users who need a few forms to collect a small number of responses. The paid service levels increase the limits and features available to accommodate higher needs. All paid service levels come with the ability to customize the limits with account add-on options, too.

Continue reading

How to Make Installment Payment Forms

Formsite installment payment example

Many online stores and service providers offer ways to purchase in installments to make each payment smaller. The installment payment form lets customers buy on credit, otherwise known as “buy now, pay later.”

This kind of financing option appeals to many customers and can be the incentive needed to close the sale. If your form collects payments from customers and you think you might want to try it, here are some ways to make it work.

Continue reading

Collect ACH Payments and Global Payment Options with Stripe

Formsite ACH payments

Stripe’s payment processing system lets form owners link to their Stripe accounts to collect instant payments. Before, the Stripe integration only allowed credit card payments, but recently we’ve added more options. Now Formsite form owners can use Stripe to collect ACH payments, e-checks, bank transfers and use other international gateways.

ACH stands for 'Automated Clearing House' and refers to direct payments to and from bank accounts. While credit cards track the charges over time and require periodic payments, the ACH payments occur in real-time for the connected accounts.

Continue reading

Export Results Formats and Settings for Formsite Online Forms

Formsite forms collect results and store them in the Results Table. Every new form submission saves as a result row and counts toward the results per form limit. Form owners can export results in a variety of formats depending on their needs.

The export formats also apply to Notifications and Scheduled Exports for the most part. For example, the Results Docs formats are available in all places and send each result as a separate document.

The results export is the primary way for form owners to receive their form answers. Collecting results as a spreadsheet allows for the greatest flexibility for offline filtering, sorting, and data normalization.

Continue reading
Billions of forms submitted