Style Items & Settings For Awesome Forms & Surveys

FormSite forms and surveys have been given new style elements and features to help customers create spectacular forms. These style upgrades include:

  • New Heading item & Image List item
  • New built-in web fonts & background images
  • New progress bar & button styles
  • New item style options & themes

form-style

New Items

headingOur new Heading item combines the old Page Heading and Segment Heading items into a single element that allows for more flexibility and customization. Adding the item to your form or survey opens the edit screen which provides the first look at the available settings. The left side provides text formatting and positioning options, and overall item height and width settings. The right side offers the choice of background colors or images with our new background image selector. The new background images provide a wide range of topics to choose from and connects to your account images to allow for custom heading items.

image-listThe new Image List item allows you to use images as options for a checkbox or radio button item. Found under Specialty Items -> Image List, adding the item displays the settings window that asks for the item label, image options labels, and image URLs. You can either use an absolute URL path to your images (https://www.yourserver.com/image.jpg) or upload them to your Account -> Files & Images area and use the image… link to select. Additional options include the ability to show or hide the image labels, set the image width for all images, and set any min/max options. For example, setting a max of 1 will change the checkboxes to radio buttons, which only accept a single selection.

The new Image List item also has a variation under Order Form Items called Image List Pricing that allows for setting a price for each image.

font styleNew Web Fonts & Background Images

Web fonts allow form designers a wider range of look and feel options without having to settle for old, boring system fonts. We have included over 30 of the most popular fonts provided by Google across all of the font categories. These custom fonts can now be set on the Look & Feel -> Customize page for the Page -> Font Family, Items -> Field Font Family, and  Submit Button -> Button Font Family. Also, every item in the form builder that uses the text editor can be individually customized to use its own font, and Success Pages can be fully customized, too.

Background images have been added to take advantage of higher bandwidths and a wider range of screen sizes, as well as providing designers another place to add visual information. FormSite has added over 100 images over a dozen topics that can be applied through the Look & Feel -> Customize settings to:

  • Page -> Page Background
  • Form -> Form Background
  • Form -> Heading Background
  • Items -> Field Background
  • Matrix Header and Sub-Header Backgrounds
  • Submit Button -> Button Background

A Note about Background Size:

Every background element has a background size setting, which allows you to choose how you want to apply the image. For a full-screen photo or image, choose the Full Cover option. This will automatically scale the background image to the maximum size possible without stretching or distorting the image.

The Tile setting allows for repeating patterns and gradients, or other images that should not be stretched to fill the area. Feel free to contact us if you have any questions or trouble.

New Progress Bar & Button Styles

progress bar stylebutton styleProgress bars and buttons have been given new styles and settings, too. The progress bar is on by default and has the option to be hidden, and the bar color can be customized for maximum readability. Submit buttons have received the most style settings, allowing form designers to create buttons with a variety of colors, fonts, images, height, width, and border styles.

New item style options & themes

Other item styles have also been added to enhance the new FormSite style, such as more font sizes, friendlier form and button shadows, and required field icon settings. One style setting that has been included due to customer requests is the ability to display input fields as an underline only and can be found under Items -> Field Border Width.field border style

To wrap it all up, FormSite has generated new themes that take advantage of the new styles and can be found in the Look & Feel area on the Themes tab. Creating a new form from either a built-in template or a blank form will use our new default style, which uses the new style features and settings.theme style

If you have any questions or comments about the new styles or any other FormSite component, please contact our support specialists or leave your comment below.

18 thoughts on “Style Items & Settings For Awesome Forms & Surveys

    • You can edit your form’s header by clicking the Header/Footer button in the form editor. In the Header Text/HTML box, you can use the Insert/Edit Image button to add your images and if their total width is less than the width of the form then they’ll appear next to each other.

      If you need more help, please contact our customer support specialists by going to https://www.formsite.com/contact.html. Thanks!

  1. How can I put short answer boxes next to each other like in the example of this page “Style Items & Settings For Awesome Forms & Surveys”

    I want to put make, model, and year on the same line within my form instead of having to list them which uses more space on my sheet and I also think it would be less confusing for my customers. This site is Awesome and very easy to use but I can’t figure this out for the life of me. Thanks Jacqueline

    • You can drag items in the form editor and place them before, after, or next to each other. You can also modify the size of text-entry items, such as Short and Long Answer items. Do that by modifying the display length setting for the individual item.

      I see you’ve responded already that you’ve found the answer on our YouTube page, but I’ll leave this here for any future visitors. Thanks for using Formsite and contact us at any time if you have any questions or comments about your service.

  2. Is there, or could you add, an option to set the font size of radio button text? It seems that radio and checkbox choice text is tied to page font (Look&Feel>Customize>Page>Font Size). This will change the default size of all label text, etc. on my form. I guess I could then go back through and lower the font size on all my labels, but what a pain.
    Thank you for considering…

    • Correct, the input option text is the same as page text. That’s the only way to set the font attributes using our built-in tools, unfortunately. If you’re comfortable with CSS you can go to the Advanced/CSS tab under Look & Feel and add a custom property before the closing tag:

      input[type="radio"]+label {
      font-size:16px;
      }

      If you have any further questions, feel free to send a message to our customer support staff at https://www.formsite.com/contact.html. Thanks!

  3. Is it possible to put an image into a form that can be drawn on or typed on?

  4. How do I change the style (e.g., background gradient colors, button color) of the “Save & Return” item?

    • The Save & Return item uses the same styles as the Header item, which you can change on the Look & Feel -> Customize tab under the Form -> Heading Background setting. The button styles can be styled inline in the Save & Return item.

        • The Save & Return item is a pre-made Custom HTML item and you can click the Edit link on that item to see the HTML code. You can change the code to suit your needs, such as changing the code <h2></h2> to <b></b> to make it a little smaller. The link for the button is found on the Share page under Save & Return Link so you can use that link in your own Formatted Text or Custom HTML item to serve the same purpose, too.

  5. How do I change the style of the authorize.net payment page? The Summary bar and payment method headers do not match the rest of the form. I would like to be able to control that.
    Thanks

    • The Order Summary page uses the same styles as the form, so go to Form -> Edit, click the Look & Feel button, then make sure your settings for the Heading Background are set properly. You can customize the Heading item on your form, but the Summary tables will use the settings on your Look & Feel page.

      If you’re still having trouble, please contact our support staff at our Contact page. Thanks!

  6. How do I change the width of the form? The standard width is ridiculously narrow. It would be great if it was 1.5 times wider. Thanks!

    • You can change the form styles by going to the Form Editor then clicking the Style button at the top of the left column. The specific setting for the form width is under the Form area on the Customize tab.