Posts Tagged ‘form builder’
What’s the Return URL of a Form?
When creating a new form with FormSmarts Form Builder, you’re asked to provide a return URL for that form. The return URL is where visitors will be invited to go to, after a successful form submission.
In practice, the return URL is only used when the form is accessed by URL, not when it’s embedded into your website. When visitors fill out the form directly on your site, they won’t leave the page hosting that form, and there is no need to send them anywhere else. The only thing that makes sense, is to display a “thank you” message right there.
We also use return URLs to compute the list of websites in Settings > Websites.
If you don’t have a web page, simply use “http://formsmarts.com” as the return URL.
Return URL & Form Ownership
To prevent abuse, the link to the return URL is now only displayed on the confirmation page if the form owner is verified or is a FormSmarts Pro user. Visit the Settings tab of your account to verify your sites.
Want a Customized “Thank You” Message on Your Forms?
Publishers can now personalize the “thank you” message on the confirmation page. An initial version of payment integration discussed in the comments below is also available.
Redirecting Visitors to a Page of Your Site
You can set up a form to skip the Confirmation page and automatically redirect the visitor to the form’s Return URL. Note that the visitor will then not get the FormSmarts Reference Number of the transaction. Redirection cannot be activated from the form builder at this time. Please contact customer support. FormSmarts Pro and Business customers only.
Posted on July 11th, 2008 in HTML form.
20 Comments »
Tags: form builder, form owner, payment integration, return url, web forms, widget
Form Color Settings
Like many FormSmarts users, you may sometimes want to customize the style of your web forms. This may be because you want the forms to match the rest of your website, or because you want a form to stand out on a web page.
The form builder now allows you to change the text and background color of your forms. Visit the Form Details window in the Forms tab to set color preferences for a particular form.
Things to note:
- color settings only affect embedded forms, not forms access by their FormSmarts URL
- because your color settings are stored in our servers, you can change settings and see the result immediately. You don’t need to update the form code on your website.
How to Change Form Colors
- By default, form text is black, and form background is transparent. This should fit the needs of most users, and if you’re happy with this, you don’t need to do anything.
- If you do want to change a color, the easiest way is to choose one of the popular colors we’ve preselected. Just click on the color you want.
- If you prefer to use your own colors, you may type any valid 6-digit HTML color code directly. For example, 808080 is a shade of gray.
Usability Note
It’s important to preserve the accessibility of your forms to visually impaired visitors, and their usability under poor reading conditions (e.g. bright sunshine). Always keep a high color contrast.
Posted on July 6th, 2008 in form builder.
7 Comments »
Tags: embed, form builder, usability, web forms, widget
Form Owner Verification with Google Page Creator
To verify you own a website, we ask you to create a file with a specific name on your web host. If you use Google Page Creator, proceed as follows to verify your site:
- create a new page
- enter the verification file name (e.g. syronex8800…2523.html) as the page title
- publish the new page
Form ownership verification is optional but recommended to build trust with your visitors. It is required you intend to advertise a web form URL by email.
Recent Issues with Google Page Creator
Although hundreds of Google Page Creator users have successfully verified their site, we’ve had a few issues in the last few days. Google was redirecting some of the requests to googlepages.com to the same page on google.com, thus preventing us to check the verification file exists. We obviously have a limited scope for action, but we identified a likely cause and took technical measures that seem to have solved the problem. Leave a comment if you experience any more problems.
Posted on July 2nd, 2008 in form builder.
1 Comment »
Tags: embed, form builder, google page creator, widget
How to Lay Out Form Input Fields
Your goal as a web publisher is maximize the number of (legitimate) respondents to your forms. A first step towards this goal is to lay out your forms in a way that is intuitive to users, makes forms faster to fill in, and minimizes form validation errors.
It follows four points you should consider when designing a web form:
- choose the most appropriate input field widget for the situation
- group fields together within logical sections
- place multi-line text input fields (textarea in HTML) towards the bottom of the form
- group optional fields together at the bottom of the form
The first point is discussed in details in FormSmarts documentation.
The second point commends, for example, that when you ask people about their contact details, you group all relevant fields (first name, last name, email,…) together. We found that most form designers tend to do that right. The form builder will in the future allow users to define different logical (and visual) sections within web forms.
Multi-line text input fields obviously tend to take longer to fill in than other input fields. They require more effort, thinking and typing, so place them after other fields. Visitors will be less inclined to abandon the form altogether if they have already spent time completing the first part of the form.
The last point is about grouping optional fields together at the bottom of the form. This allows people to quickly review the remaining questions, and skip the fields they don’t want to fill in or don’t apply to them. This may of course conflict with grouping fields within logical sections. In that case, place optional fields at the end of each logical section.
We’ve now enabled comments, and we warmly welcome your thoughts and feedback about this post. if you’re reading this by email, just click on the title to post a reply.
Posted on June 29th, 2008 in HTML form.
4 Comments »
Tags: form builder, form design, howto, input field, web forms
Ever Wished You Could Reorder Fields?
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.
Posted on June 20th, 2008 in form builder.
1 Comment »
Tags: form builder, form design, input field
Managing Form Recipients
You can manage the email addresses registered on your FormSmarts account in the Settings tab, under Form Recipients.
Adding an Email Account
Before you can start using an email address as a form subscriber, you must first add it to your FormSmarts account, and verify it. We verify that the email account owner agrees to being added to a FormSmarts account by sending a verification link. Once the email address owner has visited the verification link, the status of that email address will change to Verified (Note: you will need to refresh the list of email accounts if you opened the verification link in a new window). You can use any verified email address as a form subscriber or as your FormSmarts login.
Changing the Recipients of a Form
When you create a new form, results are sent to your login email address by default. To have a form sent to other email accounts:
- Add the email addresses you need to your account as just described (Form Recipients option in the Settings tab).
- Edit the details of each form in the Forms tab, checking or un-checking each email subscriber as required.
A recipient must be verified before it can be used as a form recipient.
Changing Your Login Email
You can set any of the verified email addresses registered on your account as your FormSmarts login. There is one restriction: you can’t set an email address as you login if it’s already the login for another account.
A key icon is displayed next to your login email address.
Note: any email addresses that you use as login or form recipient has the Active status, and can’t be deleted.
Give Feedback!
We welcome your feedback about this feature. This will help us improve it in the future.
Posted on June 16th, 2008 in form builder.
15 Comments »
Tags: form builder, form recipient, form results
Changing a Form’s Recipient Email Address
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
Learn more about upcoming features. We welcome your feedback and feature suggestions.
Posted on June 10th, 2008 in form builder.
No Comments »
Tags: email notification, form builder, form recipient, upcoming
How to Embed a Form Into Your Site
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
To embed a form into your website, visit the Forms tab, and click Embed to see the form code.
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.
A word of warning: do not try to save the form as an HTML page, and publish that page. This will not work. You must paste the code exactly as given. Do not attempt to alter, remove, or hide the mention “web form by FormSmarts”, or the link to our Privacy Policy. This would be a breach of our Terms of Use, and your account would risk to be terminated without notice.
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 Form Height and Width
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 against our terms of service to embed more than one form in a given web page.
Posted on May 21st, 2008 in HTML form.
23 Comments »
Tags: embed, form builder, howto, web forms, widget
Building Successful Web Forms, Part 1
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
contact XYZ” - 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.
Posted on May 6th, 2008 in HTML form.
No Comments »
Tags: form builder, form design, howto, input field, web forms
Form & Input Fields Now Editable
The form builder now allows the modification of input fields and web form details. Click on the 
icon to edit a form or field.
Posted on April 16th, 2008 in form builder.
No Comments »
Tags: form builder, input field, upcoming, web forms
