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

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 {

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.

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>
<script>
  fetch('X?token=Y&sort_id=Z&sort_direction=desc&limit=1')
    .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;
  });
</script>

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.

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:

• Club signup forms
• Surveys
• Membership registration forms
• Scheduling forms
• Order forms

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:

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.

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:

• Primary and Sub-user logins
• New form creation and name changes
• Results exports and deletions
• Password changes

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)

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.

Formsite forms let visitors submit attached files using the File Upload item included in your form. File attachments save in the form’s Results Table and clicking the link lets form owners view and download them. See how Formsite gives form owners options for working with uploaded files that help with organization and tracking.

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.

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.

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.