Fixed Amount Discount

• Syntax: My Discount (-$5 USD)
• Example form with a fixed amount discount
• You may offer more than one discount, but not more than there are paid items selected.

Percentage Discount

• Syntax: Discount Percentage (-25%)
• Example form featuring a discount rate
• You may only add one discount rate to a form
• Discount rates only work with advanced PayPal integration
• If you’re offering a fixed discount on the same form, both may not be selected at the same time

Discount Codes

Last but not least, FormSmarts now supports discount codes. With discount codes, the buyer will only get the fixed amount discount if they enter a valid coupon code.

• Try this example with the discount code FSCP-DEMO
• Discount codes only work with advanced PayPal integration

To offer discount codes on your forms:

• Add a text box to your form selecting the data type Letters + Numbers
• Email us including in your message a series of valid coupon codes, the amount of the discount and the FormSmarts.com (of f8s.co) URL of the form (e.g. http://f8s.co/15to) the discount should apply to.
• Coupon codes must start with FSCP- and may only contain alphanumeric characters and dash

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 (USB sticks in this example). Each product will 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.

The SuperCart Widget

To help buyers track people they’ve already registered (or the products they’ve added to their order), we’ve created the SuperCart Widget. The widget shows the following information:

• Number of priced items in the cart
• Name of each priced item
• A sub-total for each form submission (i.e. registration or sub-order)
• The total amount due

The buyer may also perform the following actions:

• Remove a transaction from the cart (i.e. cancel a form submission to cancel a registration or a sub-order)
• Immediately proceed to checkout

You can easily embed the SuperCart Widget into you site alongside your forms with the following code snippet:

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. Due to the current limitations of SuperCart, if it’s unlikely buyers will submit more than one form you should use a regular payment with Advanced PayPal Integration instead:

• Unlike regular Advanced Integration payments, customer won’t get an email confirmation
• Payment data won’t be available online and through Excel reports and in webhook API notifications.

• 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)

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 http://formsmarts.com/form/lqh, you can access its mobile version at http://m.f8s.co/lqh or http://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.

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

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.

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.

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.

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.

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=css/form.css, where css/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/css/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;
}

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.

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 http://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.

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.

• 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 confirmation email.
• Fully integrated 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. That’s exactly what FormSmarts Advanced PayPal Integration is doing. Here are the benefits:

• No need to manually reconcile the order forms received 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 customer has paid.
• FormSmarts verifies that the payment details match those of the order.
• Excel exports include both form data 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.
• Further automate order processing or integrate FormSmarts with your website with a simple PHP script using FormSmarts API.

Setting Up Advanced PayPal Integration

To set up advanced PayPal integration, first create an order form with prices formatted in the same way as you would do with FormSmarts standard PayPal integration. 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.

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 personal 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.

In your PayPal Profile, go to My selling tools > Getting paid and managing my risk > Instant payment notifications and follow the Update link. Paste your URL in the text box provided and make sure IPN message delivery is enabled before saving.

Important: If you have added multiple email addresses to your PayPal account, please note that your Primary PayPal email must match your FormSmarts login. That is required for FormSmarts to be able to verify that payments are sent to the correct PayPal account. You can change your login if needed.

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.

Notes

Advanced PayPal Integration comes with all Business-level plans and doesn’t work with recurring payments/PayPal subscriptions at this time.