Posts Tagged ‘form builder’
The set of form-making operations supported by FormSmarts form builder was up to now almost complete, allowing to:
- create a form
- delete a form
- edit form properties (name, title, return URL, form filling instructions, recipient email account)
- add a form input field
- delete a field
- edit field properties (name, description, field type, input widget, optional/required)
The last unsupported operation was to allow users to easily change the order in which fields appear on a form. This is often needed to:
- group fields logically
- group optional fields together at the bottom of a form
- insert a field in a existing form
- move fields around to increase the visual appeal of a form
Reordering fields manually is tedious, as it involves deleting and re-creating fields.
No more. Reordering fields is now a trivial drag & drop: in the fields tab, drag the field you want to move, and drop it in the position you want.
As usual, we welcome your comments and suggestions about this feature.
You can manage the email addresses linked to your FormSmarts account in the Settings tab of the online form builder, under Email Accounts.
Adding an Email Account to FormSmarts
Before you can start using an email address as a form recipient, you must add it to your account and verify it.
To add a new email account to FormSmarts, visit the Settings tab of the form builder. Click the Email Accounts link and enter a name and email address under Add an Account.
FormSmarts verifies that the owner of an email account agrees to his email being used by sending a verification link. Once the email account owner has visited the verification link, the status of that email address will change to Verified. Use the Refresh button to check if a newly added email account has just been verified. You can start using an email address as a form subscriber or as your FormSmarts login as soon as it shows as Verified.
Changing the Email Recipients of a Form
When you create a new form, responses are sent to your login email address by default. To have a form sent to another email account (or email accounts):
- Add a new email address to your account as described in the last section.
- Click on the icon showing a pen to edit the relevant form and check or uncheck email subscribers as required (see screenshot above).
Note: An email address will only appear in the list after it has been verified (see previous section).
Changing Your Login Email
You can set any of the verified email addresses registered on your account as your FormSmarts login. Note however that you won’t be able to use an email address as you login if it’s already the login of another account.
A user icon is displayed next to your login email address.
Note: Any email addresses that you use as your login or form recipient has the Active status and cannot be removed (the corresponding trash can will be grayed out).
Removing an Email Address From Your Account
To remove an email address from your FormSmarts account, Visit the Email Accounts pane of the Settings tab and click on the trash can icon corresponding to the email address you want to remove.
Trash can icon grayed out? The trash can icon will be grayed out if the corresponding email address is still in use as a form recipient by at least one form or is the account’s login. To remove the email address, first edit each of the forms in the Forms tab and uncheck that email address under Form Subscribers (see screenshot above). Then go back to the Settings tab, refresh the list of email accounts, and click on the relevant trash can icon.
We welcome your feedback about this feature. This will help us improve it in the future.
We get many emails from users asking how they can modify the email address held on their FormSmarts account.
At this time, each FormSmarts account is bound to a single email address. The address is used both as the account username, and as the recipient of all the forms on the account.
We will soon be upgrading FormSmarts Form Builder to provide more flexible email address management.
Users will be able to:
- change the login email address
- specify a different recipient email address for each form
Linking or Embedding?
FormSmarts supports two ways to integrate a form into your website or blog: linking and embedding. Embedding lets you place the form on your site alongside other content. Linking gives your form its own separate web page. Both have advantages and disadvantages. Many users think embedding the form into their site gives them more control. That’s far from always being the best option.
Embed a Form When…
- the web form is short — 10-15 input fields maximum
- it is self comprehensible and form filling instructions are not needed
Mailing list signup forms and simple contact forms work well embedded.
Link To a Form When…
- the form is long or complex
- the form is accessed both by web visitors and via a mailing list
- the form in intended for a large audience, that may be using a wide range of browsers and devices
- your audience includes mobile phone users
- you expect a large number of form submissions
Event registration forms and survey forms may perform better when accessed buy URL on their own page.
- forms accessed by URL load faster and are more scalable
- they are statistically more reliable
- they offer more flexibility
- there are no sizing issues
A word of wisdom: Resist the temptation to systematically embed web forms on your site for irrational reasons “because it gives you more (apparent) control”. Some web forms perform better on their own page.
Placing the Embedding Code On Your Site
Copy the HTML code, then paste it somewhere in the HTML source of the
host page on your website or blog. If you’re using an online service like Blogger, that’s
all you have to do. Otherwise, you need to publish the page to your web server.
Changing a Form, Once the Code Is on Your Site
Any changes you make to a form using the form builder will show up straight away on your website. You do not need to update the embedding code. However, as a result of adding more fields, or changing a text box to a larger text area, the frame containing the form may no longer be high enough to fit the form. You will then need to re-publish the embedding code to your site. See the section about Form Sizing below.
Customizing Your Form
You can customize several aspects of your forms in the Form Details screen of your account.
Web Form Sizing
Why Is There Extra Space at the Bottom of the Form?
Forms are contained within an HTML frame (“iframe” for geeks). The frame has a fixed size, which is computed for each form, based on several factors, like the number and type of fields used, and the form layout chosen.
It is necessary to leave room at the bottom of the form for error messages that may need to be displayed during a form submission. That’s the reason for the extra space at the bottom of a form.
Manually Changing the Height or Width of a Form
You can change the size of a web form widget by editing the value of the height and width attributes in the HTML snippet (a.k.a. form embed code) given by the form builder.
We do not recommend changing the height of forms. If you do, remember to allow extra space at the bottom of the form, as discussed in the previous section.
The width of embedded web forms can be resized down to 360px without side-effects, and should degrade well beyond that.
How Do I Get Rid of the Vertical Scrollbar
With time, you may need to add more fields to your forms, but forget to refresh the form HTML code on your site. Since the frame height is hard-coded into the code on your website, the form may no longer fit into the frame, and a vertical scrollbar will then appear. That is not desirable on a usability standpoint, so you are advised to update the code on your site whenever you add new fields, or change a text box to a text area.
Only One Form Per Page
It is against our terms of service to embed more than one form in a single web page.
Embed a Form to a Facebook Fan Page
The easiest way to add a form to a Facebook page is to use the FormSmarts URL that comes with each form. Click on the URL link in the Forms Tab of the form builder to show form URLs instead of embedding code. You may also embed the form into your Facebook page using an FBML Box. See instructions to embed a form to Facebook. Feel free to post your questions in the relevant thread of our forum on FormSmarts’ Facebook page if you need help.
Web forms play a key role for visitor (and customer) interaction on many
sites. However, many web designers don’t realize that there may be huge
differences in form abandonment ratio, depending on how well the form is
designed. In this post and follow ups, we’ll give you some tips to help
you make your web forms an effective communication channel.
Always provide form filling instructions.
Don’t assume that all of your visitors will understand how to submit a form without further explanation. Short and clear form filling instructions can reduce form abandonment, and increase the quality of the information collected.
- include a call to action phrase like “Please fill out this form to
- indicate the purpose of the form and the recipient of the information collected
- if applicable, confirm that you will reply, and give an indication of the time frame
Select the correct data type for each input field.
Because of necessary form validation, choosing and incorrect data type may prevent a form user from submitting valid information. When this happens, it is likely to lead to form abandonment.
For example, if you specify that a form field can only contain a Number, it may not work for a phone number. 1233456789 will work, but not 123-345-6789. So use
the Phone type instead. In many cases, the form builder will
pre-select a type for you, but not always. Read
more about selecting an input field data type in the form builder documentation.
Choose the most appropriate input field widget.
Don’t restrict yourself to text boxes and drop-down lists. Take advantage of the full range of HTML form fields with radio buttons and checkboxes. Learn when to use each one.
Using a drop-down list for a yes/no question will slow down the form user, and increase the chances (s)he gives up. Use radio buttons instead. Read tips about choosing the best input field widget in the form builder documentation.
Brand your forms for instant visual recognition.
Always brand your web forms with your own logo. This helps visitors
recognize at first sight who they are about to send information to.
The form builder now allows the modification of input fields and web form details. Click on the icon to edit a form or field.
A major FormSmarts upgrade was rolled out today. Changes include:
- New features in the form generator, like the ability to delete a field in a form
- A simplified user interface for generated web forms
- A major upgrade of the form spam protection engine
Many organizations don’t publish any email addresses on their website because of email spam. On those sites, a contact form is the only way for a visitor to reach the site owner. This should imply that website designers take a lot of care to ensure that web forms are usable by anyone, as email is.
The accessibility issues associated with CAPTCHAs for visually impaired people are well known, so I’m not going to discuss this further. I’m going to talk here about people fortunate enough to have normal sight and hearing, but who may also have a hard time using web forms.
Many CAPTCHAs systems are difficult to read because they were designed to defeat automated attempts to read the image using OCR. As the designer of a CAPTCHA system, I’ve been trained more than the average web user to reading them. Still, I’m surprised by how often I miss the correct code on the first try. A high level of image obfuscation may be needed for very large websites like Google or Yahoo, for which it is realistic to believe some people would be ready to invest a lot of effort to break the system, given the potential payoff. But it’s very unlikely someone will try to break the CAPTCHA of the average website. So those should at least be easy-to-read and short, if CAPTCHA there has to be.
Not every web user downloads images. More and more people browse the web via cellphones, on which web usage is charged per megabyte. Users are then inclined not to load images to reduce costs. This is even the default setting on some low-end cellphones. Those users won’t see the CAPTCHA.
Audio CAPTCHAs are commonly accepted as a good complement to visual CAPTCHAs for the visually impaired. Besides the technical reasons for not being able to listen to an audio file on a computer (e.g. no sound support, no loudspeakers or earphones fitted), there are also social reasons. First, there are social environments where it may be rude or prohibited. For example in public libraries and open space offices. Second, the web is global and non-native English speakers may not be able to understand what is said in the audio CAPTCHA.
What’s specific about FormSmarts form handler? Compared with other web form handlers, FormSmarts may not offer yet the richest set of features. We currently only deliver form results by email, although other form delivery methods are under development.
We believe our Ajax-based form builder allows our users—including those with little technical knowledge—to get an HTML form ready in very little time, and that’s something we wanted. Simplicity, efficiency and usability were our primary design goals.
That being said, FormSmarts is best viewed as a web spam blocker with form handling features, rather than a form handler with form spam prevention features.
Form accessibility is another strong point of FormSmarts: our web forms are usable by anyone, using any HTML-capable browser.
Unlike most other form handlers available today, FormSmarts was puposedly designed to block form spam. We didn’t simply add a CAPTCHA to an old formmail script. The same applies to our form builder: our care for usability and accessibility didn’t come as an afterthought.