How to Have Users Pay Once for Multiple Registrations or Orders

A little known feature of FormSmarts’ Advanced PayPal Integration is SuperCart. This feature allows a user to submit multiple online forms that include a payment and pay once for the total amount at the end, thereby providing the buyer with a better ‘shopping’ experience and reducing the seller’s PayPal fees. Let’s review two typical uses of SuperCart.

Note: This article discusses an early version of SuperCart. Although it content has been updated and is still relevant, please also read our introduction to the SuperCart Shopping Cart.

Online Registration Form Allowing Several Registrants

Use Case 1: Event Registration Form

The first typical use for SuperCart is to create an online form to register attendees for an event. For illustration purposes, I’ve made a registration form for a conference. We want each attendee to be able to choose a different registration package, pick the seminars they would like to attend and optionally add an accommodation package. With SuperCart, a user can register multiple delegates by submitting the registration form for each one, then pay for all of them at once. In the illustration above, we submit the form once to register Pat selecting the standard registration option, then again for Jim, opting this time for a premium registration and adding accommodation. We then proceed to PayPal to pay for both registrations. This short video shows how this works in practice.

Use Case 2: Order Form

Another common use of this feature is to create an order form allowing a buyer to purchase several products or services while being able to customize options for each one. I’ve built an order form demo to allow customers to configure and order goods (greetings cards in this example). Each product can be customized based on the options selected on the order form. With SuperCart, the buyer will be able to order as many products as they like by submitting an order form for each one, then pay for all of them at once.

How to Create a SuperCart Form

While understanding the concepts behind SuperCart may not appear straightforward, building a SuperCart form is easy:

  1. Set the Return URL of the form to the URL of the page the form is embedded into. If you’re using the standalone form, enter the FormSmarts.com URL given by the form builder instead.
  2. In the Form Details screen, set the On Submission option to Integrate with PayPal using SuperCart.

If you haven’t already done so, remember to set up your PayPal account for Advanced PayPal Integration.

When You Should and Shouldn’t Use SuperCart

Set up your PayPal forms with SuperCart whenever you would like to allow a buyer to pay once for multiple form submissions and providing a single form would affect the form’s usability because each registration/order has too many options or you expect someone will submit more two or three registrations/orders. If it’s unlikely buyers will submit more than one form you should use a regular payment with Advanced PayPal Integration instead.

Introducing the New Mobile Form Platform

We’ve just released our new mobile form platform and we encourage you to try it out now from your smartphone or tablet.

  • Form navigation is optimized for touch screen devices with a virtual keyboard
  • If supported by the device (browser), a different virtual keyboard should be provided depending on the type of data to input. For example, when a phone number field is selected, the device will show a phone dial with large numbers. When moving to an email field, the keyboard will show the ‘@’ and ‘.’ keys at prominent positions.
  • Form adapts to the size of the screen and form layout changes when switching from portrait to landscape mode (or conversely)

Mobile Form FormSmarts

To access the mobile version of a form, use the URL http://m.f8s.co/your-form-id or add ?mobile=yes to the FormSmarts.com URL of the form.

e.g. If the URL of a form is https://formsmarts.com/form/lqh, you can access its mobile version at https://f8s.co/lqh or https://formsmarts.com/form/lqh?mobile=yes

Once the platform goes out of beta (i.e. public testing phase), FormSmarts will automatically serve the desktop or mobile version of a form depending on the client device.

Besides the iPhone and iPad, we’ve tested mobile forms with a wide range of Android smartphones and tablets, as well as BlackBerry devices. Please share with us your experience using mobile forms with your own device.

How to Lead People to Online Forms from Printed Material

Here are two easy tips to increase online form conversion from paper material: bridge the offline-online gap by allowing people to register for your next event, pay their membership fee, or sign up for your newsletter on the spot from any poster, brochure or printed document.

You are probably aware that you can easily share a form with your user base by email or on social networks using the FormSmarts.com URL that comes with each and every web form. What you may not know is that FormSmarts has two features that allow you to share online forms on printed material.

Using QR Codes & Short Form URLs

You can and should take advantage of the dramatic increase of the number of smartphones and tablets in the last few years to give people a convenient way to access your forms on the spot with their smartphone (or tablet) by either scanning a QR code that will lead them straight to your form or by typing a short URL (for those users that don’t yet have a QR code scanner app on their device).

You’ll find the QR code and short URL (e.g. f8s.co/lqh) of each of your forms in the Form Publishing Options screen of the online form builder.

Printed material where you should consider printing the QR code and short URL of your forms include: posters, invitations, printed newsletters, ads, brochures, job specifications, tags,… and even t-shirts.

Send us a picture of printed media where you use a FormSmarts QR code or short URL and you could win yourself a free Pro subscription! The best three entrants will be chosen on Jul 31, 2012 and will get a 1 year Pro subscription and their picture published on FormSmarts.

How to Integrate with FormSmarts API

The Event Notification API allows you to have FormSmarts send a machine processable ‘push’ notification message to a script on your website (or for that matter to any URL) to process the information that has just been submitted through one of your online forms. You can use the Event API (a.k.a. Web Hooks) to integrate FormSmarts with your database, website or any online service or application.

How to Integrate

Whereas this feature is mainly targeted at developers, creating a script that does something useful with the data received from FormSmarts is actually not difficult. The API is fully documented with examples in PHP.

  • You first need to create a program/script to process form data and upload it to your web server. Data is sent in JSON format, which is supported natively by all modern programming languages.
  • Then register the script’s URL with FromSmarts
  • Whenever a form is submitted, FormSmarts will send the data submitted through the form as well as other data pertaining to the form response (e.g. payment information if the form involves a payment) to the URL you have registered.

Have a Great Idea?

If you have a great idea about how you could use FormSmarts API, let us know: we have several Business Starter subscriptions to give away.

Engage Users via Twitter & Facebook to Increase Form Conversion

FormSmarts allows you to better engage with your user community by adding a social component to your online forms. The assumption with social networks is that a user is more likely to perform an online action such as filling out a form, registering for an event or sign up for a class if she knows that her friend or colleague has already done so.

Online Forms Get Social

For each form, FormSmarts allows you to set up a message template that will be used to post an update to social networks when the form is submitted. The message can incorporate any information entered on the form.

The user’s expectation when filling out online forms is that the information submitted will only be disclosed to the form owner, and you clearly need to ensure you don’t leak personal information (more about this in the last section). We define two types of input fields on a form. Those which will be populated by information which—taken out context—is so general that it can be safely disclosed, and those which should be kept private. In the example below, we deem First Name, City and Country as public, while all other fields are deemed private.

Post a Twitter Update When Online Form Submitted

How to Set Up FormSmarts to Post Twitter Updates

First connect your Twitter account with FormSmarts to allow FormSmarts to post tweets on your behalf. You will be taken to Twitter for authentication and asked to authorize FormSmarts to post updates using your account. You will only need to do this once. Note that FormSmarts will not have access to your Twitter password. Once this is done, Twitter will send you back to FormSmarts.

Next click on Twitter Feed Setup in the Form Details screen of the form builder. Enter a short text using placeholders $1, $2, $3,… where you want the value of the corresponding input field to be inserted. Use $1 for the value of the first input field, $2 for the second, etc., in the order fields appear on the form.

The Online Form Creator's Twitter Setup Screen

Posting Updates to Your Facebook Wall

When someone submits a form, FormSmarts can post an update to your Facebook wall via the Twitter App for Facebook. First set up FormSmarts to post updates to Twitter as described in the previous section, then add the Twitter App to your Facebook page or profile. We will add native support for Facebook if there is demand—please let us know here. (Note: if you ended up here while looking for information on integrating an online form to Facebook, read this).

Respecting the Privacy of User Information

Protecting the information of your users is of paramount importance. When someone submits his information via an online form, he does it with the implicit understanding that his personal information will not be disclosed.

  1. Add a privacy note on the form (like on this demo) to ensure people understand that some none-personal information will be posted to social networks. Say what information will be published.
  2. Make sure you’re using the correct placeholder (e.g. $1, $2,…) in the message template. Remember that $1 will be replaced by the value of the first input field in the order they appear on the form, $2 will be replaced by the value of the second input field, etc.
  3. If you change the order of fields on the form, don’t forget to update the message template with the correct placeholder name.
  4. Always test the form after setting up a Twitter feed or changing field order.

To further prevent the leak of confidential information, FormSmarts will not publish Twitter updates for SSL secure online forms, even if this has been set up through the online form builder.

How to Disable a Twitter Feed

If you no longer want FormSmarts to post a Twitter update when a form is submitted, simply erase the message template in the Twitter Feed Setup screen (pictured above) and save changes.

How to Customize the Look of Your Forms with CSS

The online form builder allows you to easily change the layout and colors of your forms when these are embedded into your website. This article discusses how to further customize the look of your online forms by providing your own CSS stylesheet. You can create one (or more) CSS stylesheet for each form.

Disclaimer

The feature discussed in this article is UNOFFICIAL. It is NOT PART OF ANY FORMSMARTS COMMERCIAL OFFERS and we do not provide direct support for it. Feel free to post questions at the bottom of this page. Changing the layout of a form may prevent it to display consistently across browsers.

Verify Your Site & Upload a Logo

To be able to use your own CSS stylesheet, your first need to verify your site and upload a site logo. Uploading a logo creates a website profile on FormSmarts and will allow you to provide your own CSS stylesheet. The logo will be shown on the standalone version of your forms and also on PayPal if you’re using Advanced Payment Integration.

Create a CSS Stylesheet

The CSS code in your stylesheet will be loaded after the default FormSmarts CSS, so any instructions specified in it will override the default. We give a few examples of customizations in the Example section below. More will follow.

Update the Embed Code on Your Site

In the HTML snippet given in the Form Publishing Info screen of the form creator, change the query string portion of the URL from mode=embed&lay=1 to mode=embed&lay=1&style=form.css, where form.css is the path to the CSS file relative to the root of your website. For example, if your website’s URL is http://www.example.com, the CSS file should be at http://www.example.com/form.css.

CSS Styling Examples

Changing the Font and Color of Headings

h2{
font-family:serif;
font-size:14px;
color:orange;	
}

Changing the Layout of a Form to Multiple Columns

Logical sections defined by headings can be made into separate columns using the following CSS code and changing the iframe width accordingly.

#section_1{
width:350px;
float:left;
}
#section_2{
width:350px;
float:right;
}

Online form with multiple columns

How to Use QR Codes to Deliver Online Forms to Mobile Users

As more users are accessing online forms through a mobile device, we’ve added two ways to share a form with mobile users. Each form now comes with it own QR code and short URL, to be found in the Form Publishing Options screen of the form creator. We’ve also made it easier to embed a form on Facebook.

Why Mobile Users Are Important

  • Users are increasingly accessing online forms on the go through their iPhone, smartphone, iPad or other tablet. Recent figures from market research firm IDC suggest that by 2015 more US users will access the Internet through mobile devices than through traditional PCs.
  • Online form publishers can and should take advantage of the QR code scanning functionality available on mobile devices to bridge the gap between offline and online content. A QR code is a type of two-dimensional (2D) barcode popular in the mobile industry and for which free scanning apps are readily available for (if not built in) most mobile platforms. By printing the QR code provided by the form builder on ads, posters, fliers, and any paper form or document (mobile tagging), you’re allowing mobile users to access an online form without typing, simply by scanning its QR code with their phone. Avoiding typing is a convenience for users, and it also eliminates the risk of errors when entering the URL.

Share a mobile form with its QR Code

QR Code vs. Short URL

For those cases where distributing a QR code is not practicable and for mobile users who haven’t yet installed a QR code scanner on their phone or don’t know how to use it, we’ve also made all online forms accessible via a short URL such as https://f8s.co/7kb. If this doesn’t fully eliminate typing, it at least makes typing a form URL a less frustrating experience and shows mobile users you do care. And again, it reduces the risk of making an error when typing the URL.

Excel Report Generator Upgrade

If you’re using FormSmarts’ Export to Excel feature, you may have already noticed that we’ve updated the report generator. As well as several other minor changes, we’ve added a second way to specify the date range over which the report is generated (in addition to selecting a start and end date) by choosing a preset time period. This is meant to further simplify the task of generating a report. The preset periods available are Today, Yesterday, This Week, Last Week, Last Seven Days, This Month, Last Month, Last 30 Days.

For the time period options that depend on the first day of the week (This Week, Last Week), we use the default for your country, as set in your account. You can change this in the Report Generator under More Options.

Give Us Feedback

Do you find the new date range feature useful? Which one do you anticipate you will use most? Should we add more (e.g. quarter)? Please give us feedback by posting a comment, via Facebook or Twitter.

Advanced PayPal Integration in Two Steps

FormSmarts Advanced PayPal integration is as easy to use as our popular PayPal form feature, but it provides several additional benefits, mainly:

  • FormSmarts only notifies you of a new order form submission after the payment is confirmed and verified (no need for manual verification)
  • Your customer receives an automated order & payment confirmation email
  • Advanced PayPal Integration works seamlessly with other FormSmarts features (export to Excel, PDF reports, API).

What Are the Benefits of Advanced PayPal Integration?

FormSmarts standard PayPal integration is easy to use and set up as it requires no change to your PayPal account. A downside to this is that FormSmarts has no way to know if the payment went through or not, and you — the seller — needs to manually reconcile payments and order forms using the FormSmarts Reference Number. That’s usually not an issue for small sales volumes, but can quickly become so as sales increase. At this stage payment processing must be fully automated and integrated with the form processing platform. Here are the benefits:

  • No need to manually reconcile form responses with payment notifications from PayPal
  • The seller is only notified of an order when the payment has gone through
  • The transaction won’t appear in Excel exports until the buyer has paid
  • FormSmarts verifies that the payment details match data submitted on the form (e.g. amounts, quantities)
  • Excel exports combine data submitted through the form and details of the corresponding payments.
  • FormSmarts sends a confirmation email to the buyer with both the order details and a payment confirmation. If you have verified your website and uploaded a logo, your site URL and logo will appear in the email.
  • Payment processing is fully automated and if you’re using online/PDF reporting or export to Excel, your order forms are on autopilot — at least for the ordering part.
  • You can further automate order processing or integrate FormSmarts with your website or another web service using the FormSmarts API.

Setting Up Advanced PayPal Integration

This video shows how to configure your form and set up your PayPal account for Advanced PayPal Integration.

To set up advanced PayPal integration, first create a payment form with prices formatted as shown in the PayPal integration section of the site. Then visit the Forms tab of the form builder and select Integrate with PayPal using advanced integration in the Form Details screen, as illustrated below.

Select Advanced PayPal Integration in the Form Builder

It’s now time to log on to your PayPal account to add your secret PayPal Notification URL. PayPal will use that URL to communicate with FormSmarts. You’ll find your notification URL in the Security Settings section of your FormSmarts account. Note that the URL contains your private security key and it should therefore be kept confidential.

New PayPal Site. Use this link or click on Seller preferences under Selling tools in the lower left-hand corner of your account, then Getting paid and managing my risk > Instant payment notifications and follow the Update link. Hit Edit Settings and paste your URL in the text box provided. Make sure Receive IPN message is enabled before saving.

Classic PayPal Site. In your PayPal account, click on Profile, then My selling tools > Getting paid and managing my risk > Instant payment notifications and follow the Update link. Hit Edit Settings and paste your URL in the text box provided. Make sure Receive IPN message is enabled before saving.

Turn On PayPal IPN Notification

Did you link multiple emails to your PayPal account? Then your Primary PayPal email must match your FormSmarts login. FormSmarts will otherwise reject payments for being sent to the wrong PayPal account. If needed, change your FormSmarts login.

If your account allows multiple PayPal recipients, payments will be sent to the email address matching your FormSmarts login by default. To have payments sent to another PayPal account, add the corresponding email address to your FormSmarts account and verify it, then contact us.

If PayPal shows an error on the checkout page when testing your first form, you may need to update your PayPal account settings.

A Tip to Increase Form Conversion: Use Required Fields Wisely

When creating a form, the form builder allows you to specify whether your want each input field to be required or optional. The meaning of required is obvious: form users will not be able to submit the form unless a value has been entered for each and every required fields. For radio buttons and drop-down lists, that means users will have to explicitly select an option between the ones provided. The decision to make a field required is not to be made lightly, because that could frustrate the user and affect the form’s conversion rate.

Radio Button and Drop-Down List as Required Input Fields

The meaning of optional is more subtle as it is different for text input fields (text boxes, multi-line text areas) on the one hand, and radio buttons and drop-down lists on the other hand. That’s because in the latter case users only have a limited set of options to choose from, and the first option in the list is always selected by default.

In the example illustrated below, we’re building a registration form for an event. The form should accommodate up to two delegates. The first delegate is required, but the second one is optional. It turns out that:

  • The first set of radio buttons or drop-down list should be required.
  • The second set of radio buttons or drop-down list should be optional, with None as the default option.

Required or Optional Radio Button and Drop-Down List in the Form Builder

Because None is selected by default, the form user won’t have to do anything in the most likely scenario where he’s only registering one attendee. This will save him time and frustration, and will statistically increase the form conversion rate and reduce form abandonment.

« Older Entries Newer Entries »

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.