Responsive Forms

Responsive FormsFormSite forms are now fully responsive, which means that they are optimized for devices with different display sizes. Completing a form on a full-size desktop or laptop computer is much different than completing it on a tablet or smartphone, and your FormSite forms will automatically change for the best possible experience on the device you’re using.

To repeat: This setting is automatic for all FormSite forms. You do not need to do anything to enable Responsive forms.

How responsive forms work

We use media queries in the code to detect the screen size, which loads the necessary styles for those kinds of devices. The styles adjust the size and display of various form items to meet the unique needs for each device. For example, the desktop/laptop styles will show the form fields and buttons normally, while the smartphone styles will maximize the field sizes to make it easier to see and complete.

Embedding responsive forms

Embedded forms are a fast and easy way to add forms to your site using our provided embed code. A common technique is to insert a box into a portion of the page and paste the embed code into the box, creating a contact form or signup form.

In this example, embedding the form into a small area will trigger the responsive code and may result in unexpected styles for some form elements. We have created a new parameter for our embed code that allows for enabling or disabling the responsive styling. For more information, see our documentation page on Embedding Forms.

Modifying the responsive styles

Advanced users may have a need to modify the styles for the various device sizes. We have added detailed instructions for adding custom styles to the documentation page for Responsive Forms. Updating the different sizes is as easy as going to the Advanced/CSS page and adding your custom CSS.

As always, we welcome questions and comments about our services at our support contact page.

HIPAA Compliant Form Building

HIPAA stands for the Health Insurance Portability and Accountability Act of 1996, which provides detailed instructions for safeguarding Protected Healthcare Information (PHI). Any organization that collects and stores this information is subject to the HIPAA regulations to ensure that the information remains secure.

HIPAA Services

HIPAAFormSite now offers an enterprise-level account configuration that complies with HIPAA. We have entered into a Business Associate Agreement (BAA) with our cloud service provider to provide compliant services, and we will complete a BAA with customers who require the services.

As an online service provider, FormSite has a wide range of possible uses and our flexibility prohibits us from claiming compliance with our standard service levels. In order to enable the HIPAA-compliant account settings, an Enterprise White Label configuration is necessary. For more information visit our HIPAA information page.

Section 508 Compliant Forms

Section 508 AccessibleFormSite forms support Section 508 and WCAG 1.0 (Level AA) accessibility standards. These provisions ensure access for people with vision impairments who rely on various assistive products to access computer-based information, such as screen readers and Braille displays. Screen readers translate what’s on a computer screen into automated audible output and certain conventions, such form field labels, are necessary so that these devices can “read” them for the user in a sensible way.

These accessibility standards are a requirement for Federal web sites and any private sector site under contract to a Federal agency. In addition to providing compliance to the Federal regulations, this feature benefits all FormSite customers and visitors who depend on assistance when completing our forms.

Automatically Section 508 Compliant

All FormSite forms are automatically configured to work with these standards and require no additional modification by customers to apply. Not every form item is applicable for these standards due to its nature, such as purely graphical items like Signatures or Star Ratings.

The list of items that are not fully accessible:

  • Calendar
  • Captcha
  • Signature
  • Star Matrix
  • Multi Scale items
  • Text List

For more information about FormSite form accessibility, please visit our documentation page.

Bulk Upload Files & Images

Bulk UploadFormSite’s newest release includes a bulk upload tool for files and images. The easy to use drag & drop uploader lets customers with large numbers of files and images quickly upload them to their account. All paid service levels now have access to the new bulk upload tool, located in your account under Account -> Files & Images.

How to use the bulk upload function:

  1. Log in to your account and go to Account -> Files & Images.
  2. Click the Upload button to see the new uploader window.
  3. Drag files into the window or click the Add Files button to select your files.
  4. Click the Start Upload button to begin the upload.
  5. After the upload is complete, click the Close button to return to the Files & Images page.

Technical notes:

  • The bulk upload tool supports common image and document formats: jpg, gif, png, zip, doc, docx, xls, xlsx, pdf. The tool does not support exe files.
  • The uploader will not upload folders – only individual files.
  • The file transfer process will stop when the close button is clicked. Be sure that the upload process is complete before closing the window.

 

Success Page Tips & Tricks

Your form’s success page is an important part of the user experience where form visitors get confirmation that their contribution was successfully recorded, as well as an opportunity for form owners to provide more information. See how your FormSite Success Page can be used for much more than a “Thank You” page.

Success PagePersonalized Success Pages

Use the opportunity to reinforce the visitor’s choices by piping their answers into the success page. For example, say you have a class registration form with times to choose. You can pipe the visitor’s name, class, and time choice into the success page:

“Thank you, [pipe:name].
Your [pipe:class] registration has been received. We will see you at [pipe:time].”

Create multiple success pages to provide even more customization options. Using the example above, say your class choices include piano and trumpet classes. You can direct piano users to a success page with a special message just for them:

  1. Create your success page
  2. Go to Form -> Edit and click on the Rules tab
  3. Click the Add Criteria link on the last page of your form
  4. Set the form to skip to your piano success page when the class choice is piano
  5. Click save

Error Pages

The term success page refers only to a page that is shown after the form submits – it doesn’t have to be a success. You can create error pages if your form has a need for them, too. For example, for an online quiz you would want to have a page for visitors who pass and another for those who do not pass:

  1. Create two success pages: Pass and Try Again
  2. Add your form questions, using the scoring features to keep track of correct answers
  3. Go to Form -> Edit and click on the Rules tab
  4. Click the Add Criteria link on the last page of your form
  5. Set the form to skip to your Try Again success page when the scoring total is less than your pass/fail threshold

Link to Another Page/Form

Sometimes the end of the form isn’t the end of the session and you want to send the visitor to another page or form. The Redirect URL setting allows you to insert an address to send the visitor to upon form completion. An example of how this can be used would be as a custom survey on your website. Say you have a support area on your website and you want to survey your customers to get their feedback, you can return them to the support page when the survey is complete.

Another useful feature of this function is by combining the pre-populate and pipe functions to link to another form with information already filled out. For example, say your registration form has a question asking if they would like to register for another event. You can make a success page with the redirect URL set to the other registration form, then pre-populate the contact information. The URL format would be something like:

https://fsX.formsite.com/yourAccount/yourForm/fill?idX=[pipe:X]

This is a very simplified version of the actual code, but essentially you use the pre-populate format to indicate which of the destination fields to fill, then use the pipe codes to fill in the destination fields.

These are very simplified examples of what you can do with FormSite’s Success Pages beyond the standard “Thank You”, and more information on all of our features can be found on the documentation and faq pages. As always, feel free to contact FormSite support if you have any questions.

Embed forms into your site

A valuable feature of FormSite forms is the ability to embed the form into another page or site. For example, if you are seeking a contact form or order form to add to your site but you don’t want to program your own or link to a form on a different site, you can make your form on FormSite and embed it on your site.

Embed definitionEmbed Benefits:

  • Keep your site visitors on your site.
  • Use your own style.
  • Prevent security mishaps.
  • No programming needed.

How to Embed a Form:

  1. Make your form. Create an account if you don’t already have one. Log in to your account, then click the Create Form link on the Home tab. Choose either a blank form or use one of our templates, then customize your form using our drag & drop form editor.

    Tip: Your form doesn’t have to be perfect – all future edits will be automatically updated on your site.

  2. Prepare your site. Whether you want a full-page form or to insert it into the page content, you will need to create the page on your site.
  3. Use the provided code. Find your embed code by logging in to your FormSite account, opening your form, and going to Form -> Publish and clicking the Embed Code tab. Simply copy the provided code and paste into the destination page.

Troubleshooting:

Q: I don’t see my form! All I see is the code I pasted.

A: There are two possible causes: First, your site could be converting your code to text, thinking that’s what you want to do. Be sure you’re using your site’s preferred method for inserting custom HTML code, such as via a widget or by using the code view in your page editor.

The second possibility is that your site could be blocking the ability to run custom Javascript. Most popular hosting services will handle this with no issues, like WordPress or Wix. If you need additional help, please contact support.


Q: My form is cut off on the side/bottom.

A: This happens when you paste the embed code into a page element with a specific width or height, and the form is larger than the area. For example, if you have a spot in your page template for a 300 px wide column and your form is made at 400px wide, you will not be able to see the entire form. The solution is to modify your form or container width to match.

If you find that the bottom of your form is cut off, be sure that you’re not specifying the height of the container. There are times when the form length will vary, such as if there are errors or if the visitor has a custom font size set.


I need more help!

We are always available for customers who need individual assistance. Feel free to contact FormSite support with questions about form building.

2 Ways to Customize Your Results

Custom results are a common question topic from FormSite customers. Whether it’s a need to automate the layout and design to save time, or a need to apply the results data in a different format, results customization is a valuable part of our service. For example, say you are creating a sign-up form for your organization’s annual 5k. You would begin, as always, by creating the form to collect the runner’s information. Next, you set up the notifications to confirm the registration and email any organization admins. In addition to the notification, say you want to set up the system to automatically create a personalized letter to the runner, as well as the race bib and post-race completion certificate. Results PDF

Custom PDF Results

The first method is using FormSite’s built-in PDF functions. You start by creating the template files in your preferred design program, save as a PDF file, then use Adobe Acrobat Pro or Adobe LiveCycle Designer to insert fillable form fields. These PDF templates are then imported into your FormSite account and your fields are then mapped to the template fields. More information about FormSite’s PDF features can be found at https://www.formsite.com/documentation/pdf/index.html

Results Data Merge

The second method uses data merge functions in your preferred design program with the FormSite export. You start the same way, by creating the template file in your program, then export your results from your FormSite account and use the exported file as the source data. This will allow you create all of the personalized documents in a batch and save them in the desired format. Popular programs that support data merging include:

Stripe Payment Integration Released

StripeWe have received many requests for an easy payment integration option. Stripe is an extremely easy to use, fast to set up, intuitive payment option that accepts the major credit cards from around the world. Their on-page payment form and simple fee structure make it a very attractive and competitive solution.

At the time of this writing, Stripe is available for customers in Australia, Canada, Ireland, United Kingdom, and United States, with most of the rest of Europe in Beta. To set up a Stripe account and to learn more about this payment option, visit stripe.com. To learn all about how to set up Stripe integration with your FormSite form, visit our documentation page.


Send Form Attachments to Dropbox

DropboxA new feature for our customers is an integration with the popular cloud file storage service Dropbox. FormSite users can now link individual forms with their Dropbox account to have file uploads automatically copied to a directory of their choosing.

This service allows form owners the security and convenience of multiple locations for their form attachments, as well as the accessibility and notification features that Dropbox provides. Our integration allows customers to select a primary folder to automatically add files, and allows for dynamic sub-folders and renaming to enhance the convenience and usability of the feature.

For new Dropbox users, visit dropbox.com to learn more and to sign up for your free account. To learn more about our integration and to see a video tutorial, visit our documentation page.


Full Cloud Migration Complete

FormSite has wrapped up migrating our architecture to a 100% cloud-based processing and storage system. This monumental task puts the power of cloud computing in our hands with a practically limitless scalable structure. In addition to processing power, cloud computing also allows FormSite to establish servers in geographically advantageous locations to enable faster connections and diverse redundancies.

CloudCloud Services for Customers

Cloud servicing offers our customers the peace of mind that comes with virtual computing and knowing that their data is secure. Since the cloud is made up of a large network of computing systems, data is invulnerable to physical events like hard drive crashes, power outages, or other machine failures. With the cloud components sharing the burden of data storage and processing, the potential for data loss is lower than ever.