We’ve seen how to do the basic editing and how to edit field properties. We’re now going to look at how you can reorganize your web form by deleting, copying or moving form elements.

The Outline

If you’re familiar with the older version of our form building tool, you might remember that those three operations could be done with the Outline.

The outline is still here, and still a great way to work through long forms. You can use it to reorder form fields with drag&drop, or to quickly jump to any part of the form.

It’s no longer visible by default though, since all tasks that used to require the outline can now be done directly in the preview area. To show the outline [2], go to the “view” menu [1] and click “outline”.

TIP: Your preference is automatically saved, so next time you open a form, the outline will be visible.

Copying & Deleting

The copy option [3] is now available in the sidebar – which can be accessed by selecting a form element and clicking the blue “options” icon. In some browsers, you can also use a right click in the preview to bring up a contextual menu with the “copy” option.

The delete option is available in the sidebar and on the floating toolbar.

Moving Elements

The sidebar [3] offers two additional options to move the selected form element up or down. You can also simply drag&drop from the preview to any new location in your form. Check out the screencast below for a quick demonstration.

Play “Moving Form Elements” Screencast (52s)

If you are wondering how to place fields side-by-side, we’ll cover that and more in the next post. Subscribe to our RSS feed or follow us on Twitter to be notified when it is published.

In the meantime, click here to play with the form builder.

Today, we’ll show how to access and edit every property for fields and sections.

A single click on any form element in the preview will place the element in “edit mode”, revealing the floating toolbar [1].

In this mode, as we previously covered, you can edit the text directly and set the ‘required’ validation rule. For any other feature, click the ‘options’ button [2] to reveal the sidebar [3].

TIP: If you find yourself needing the sidebar often, you may want to check the “keep the sidebar open” box [4]. This will save you the extra click on the “options” button.

In the sidebar, you’ll find all possible configuration options for edited elements: validation rules, conditional rules, calculations, etc.. A click on each category will expand the relevant property panel [5].

Some of the less common options are hidden unless you check the “show advanced features” option [4]. Again, once you’re comfortable finding your way through the many features offered by the Form Builder, checking the “keep the sidebar open” and “show advanced features” boxes will be a big time-saver as you work on your forms.

Click here to continue to “Part 3 – Reorganizing your form”, or try the form builder right away.

The new interface is a radical departure from the previous version, but it’s simple, intuitive, and very easy to learn. Let’s start with the basics: Adding form fields and editing field labels – in 60 seconds.

The “Add Content” menu [1] lists everything you need to build a form.

The preview area [2] is where you lay out your content and do most of the editing.

When a form element is selected for editing, a floating toolbar [3] appears, giving access to basic formatting options. You can edit text directly, and when finished, another click anywhere on the screen will apply your changes and remove the toolbar.

Here’s a short screencast showing things in motion.

We have much more to show you, so check out Part 2 – Access and Editing Field Properties.

Throughout the years, we tinkered with it a great deal – addressing usability issues and adding features – but we reached a point where we needed a fresh start. So 8 months ago we started planning out an entirely new version.

Rebuilt from the ground up to provide a better user experience, faster form creation, and exciting new features, this new Form Builder is designed for the latest technologies on the latest devices (HTML5 on mobiles, tablets, PCs).

Today, we’re ready to make it publicly available for the first time.

A brand new interface

One of the most noticeable aspects of the new form builder is that editing happens in the preview (there’s a cute acronym for this: WYSIWYG). You can type text, drag&drop content and resize elements directly. It’s like working with a word processor. It’s intuitive and very fast.

Another thing you might notice is the clean and streamlined interface, despite the wealth of features. We’ve iterated through many experiments and usability tests to ensure that we only show the relevant tools for a given action. The two features that need to be obvious to first-time users are highlighted in blue and orange: ‘Add Content’ and ‘Save’. Other features are progressively revealed as content is added.

We didn’t forget our expert users either. You can use keyboard shortcuts, set preferences to save clicks, and use the outline to quickly navigate through even the largest forms.

New and Improved Features

Here’s an overview of the new features and other improvements. We’ll cover them in more details in the next few posts.

General Editing

• Rich-text editing on field labels, section and form titles.
• Easy resizing of labels and inputs.
• Reorganize your form with drag&drop.
• Undo/Redo on every step.
• Recovery from auto-save.
• Preview your form with iPad and iPhone screen emulation.

Field-level features

• New validation rules: time, ranges, url, length.
• Input auto-formatting with masks.
• Placeholder text support.

More layout options

• Likert scale / matrix questions.
• Easier multi-column layouts.
• Hint text can be placed below the input.

Form Management

• Form title and form name are now separated. You can have a meaningful name for internal use, and show something else on the form.
• Field labels can be hidden. This is useful when the label is not needed on the form, but you need something to work with when configuring post-processing features.

Better internationalization

• Support for right-to-left languages directly in the Form Builder.
• Preview form with localized messages.

Finally, we’ve also improved the inline help and templates can be accessed directly from the Form Builder. There are a few features that didn’t make the cut for this release. We’ll mention them in a blog post so you know what’s coming next.

We’re excited and impatient to get your feedback. Please take a minute to fill out our survey after you play with this new form builder for a little while.

Thank you and happy form building!

With our FreshBooks.com integration, you can now turn your web forms into a powerful business tool and automatically send invoices or estimates and set up recurring billing.

Here are a few examples of how web forms and invoicing can work together to make your business more efficient.

Configure, price and send custom estimates or invoices.

Imagine going through this form with your customer on your iPad. You select options and customize the quote as you discuss your customer’s needs. Once you’re done, a click of a button and FreshBooks receives your custom invoice, ready to be mailed out.

Take orders directly from your website.

You want to sell a particular product or service on your website but setting up a shopping cart seems like too much trouble. With FormAssembly you can take your orders or registrations directly from your website and get paid via FreshBooks – with just a simple form that you designed to your exact requirements.

Complete work orders and initiate billing.

Here’s another possibility. Your technician completes a work order, fills out a form to indicate the operation’s been performed, consumables have been used, and then perhaps adds a few notes for your records. Once submitted your client is automatically invoiced for the work done.

More detailed information about how to set up FormAssembly’s FreshBooks connector is available on our documentation page.

Requirements:
You’ll need an account with FreshBooks.com and a Professional account with FormAssembly.com.

Our job is to make it easier for you to get the data you need, so let us know how we can do better. You can also contact us at any time via email and on twitter.

Thanks!

This tool will let you pick any Salesforce object, including custom objects, and select which fields you’d like to see in your form. The form will be created as you go and will be ready to use as soon as you click ’save’.

You can check out the instructions here or try it for yourself (FormAssembly Professional Account and Salesforce account required).

If you tried this tool before, we just updated it today to ensure that it works with our latest Salesforce connector and the latest version of the Salesforce API, making the newest Salesforce field types available to the tool.

And if you’re familiar with our Salesforce integration but haven’t used this tool before, check it out, it’s a great time saver as it builds your form and set up your connector at the same time.

Example: Create Opportunity records with a simple web form. (field selection)

Example: Create Opportunity records with a simple web form. (form preview)

As always we welcome your feedback. Leave us a comment below, send us an email, leave a suggestion on our UserVoice forum, or follow us on Twitter. Thanks!

Restrict Form Availability With Response Quota

We’ve redesigned the ‘Display and Processing Options’ tab to add another way to control your form availability.  It is now possible to restrict the number of responses you’re willing to receive. Once the response quota has been fulfilled, an error message will be displayed to the visitor and they will not be able to submit additional responses.  You can of course customize the error message as needed. Use for instance to handle registration for an event with limited seating or for selling raffle tickets.

Search The Template Library

It is always nice to have ideas to build on when making something of your own. It is also nice when you are proud of the form you have made and would like to share it with everyone. Our template library is the place for both and we’ve made it easier to use with two recent updates: First, we redesigned the page to facilitate  browsing and previewing. Secondly, we added the ability to search the library by template name and language. We are still working through our to-do list, so expect more updates in the next few weeks.

Manage Your Themes

If you are anything like me, you play with the themes and save them all until you finally get what you are looking for. This is also how I end up with theme 1… theme 2… and so on. Luckily, our team has now addressed an oversight in the Theme Editor (while fixing some other bugs and usability issues): You can now rename your themes. Whether you’ll remember 1 and 2, red and blue, old and new, it’s all up to you.

The FormAssembly team is always working to improve your user experience. We love to hear about how you use FormAssembly and features that you would like to see added in the future. Visit our User Voice Forum, hit us up on Twitter or send us an email.

Export Your Payment Receipts

The payment details are now included in the standard export (CSV/Excel) so you can easily see who paid you and who submitted an order without completing the payment.

Note: If you already have a form set up, you will need to save your connector settings one more time to enable this feature. No other change is needed. Payment details already received will be available for export.

Custom IPN Processing

You now have the option to send the PayPal Payment Notification (IPN) to an address of your choice (where you can do your own custom processing). This is an optional feature intended for users with a more complex payment flow.  Other users can safely disregard this option.

Other changes

Unit Price and Quantity fields now accept formulas. We also refreshed the design a bit and fixed some usability issues to help you get your setup right the first time.

Note that these changes do not affect your existing forms and connector settings. If you’re already using the PayPal connector to process payments, your form will continue to work as usual.

We love to get your feedback, so let us know what you think, here in the comments, in a tweet, or send us an email. Cheers!

Self-Service Password Reset

We added a “Forgot your password?” link to the resume screen to facilitate the form submission process for the respondent. Previously, if the respondent forgot the password used when saving the form, he or she would have to contact the form owner to have the password reset. The new password reset will streamline the process for both the respondent and the form owner.

Multiple Response Management

Based on feedback from form owners, we noticed that respondents sometimes end up saving several versions of a partially-completed form before submitting it. We’ve created an entirely new interface for returning respondents who have more than one saved response.

As you can see, the page includes a list of all responses saved to the respondent’s email address, as well as the state of completion for each response. Completed responses do not appear in this list, as respondents cannot edit responses after submission. The completion states are:

• Response incomplete: The respondent has saved the response, and has not yet attempted to submit it.
• Response incomplete, submission not confirmed: This can only appear when the form in question has a confirmation step before final submission. This message indicates that the respondent has reached the confirmation page but has not yet successfully submitted the response.
• Response incomplete, submission error: This message indicates that the respondent attempted to submit the form, but was stopped for some reason. This could happen because of a failed CAPTCHA attempt, because a connector failed, or another processing error.

Note that these messages are visible to the respondent, so he or she can see the status of the response. As the form owner, you will see saved, unconfirmed, and responses with a processing error in the “Incompletes” tab of the “My Responses” page.

Email Confirmation on Save

When a respondent saves a partially-completed response, they now receive an email notification reminding them that they’ve saved the form and where they can resume it. The system also now checks that a valid email address is entered, to ensure that email communications will be received.

“Finalize” Sends Auto-Responder

In a previous update, we made connectors run when a response is manually finalized, but did not have the auto-responder go to the respondent. Several users helpfully informed us they would like the auto-responder to send after manually finalizing a response, so we have added this behavior.

Localization

This update adds many new respondent-facing messages that needs to be localized. We’re in the process of updating our translation application. If you find that some texts are not localized in your language, you can contribute your translations here.

Many of these changes were based on feedback from users. We value your opinions and want to continue making FormAssembly more convenient for you. If you have comments, ideas, or suggestions, let us know! You can leave a comment here, send us an email, say hi on Twitter, or leave a suggestion on our UserVoice Forum.

In the Salesforce Connector (version 2), it is now possible to use multiple choice fields as a parameter in lookup and update queries. For instance, if your form contains a drop-down menu, named “Color” with the possible values “Red”, “Yellow” and “Blue”, you can now ask the connector to find a Salesforce record where the Color field matches the submitted value.  Moreover, you can map each option to a different value if needed  (if, say, ‘Blue’ actually corresponds to ‘Navy Blue’ in Salesforce).

We’ve also made a significant update to what was previously called the HTTP POST Connector. You’ll notice now, if you look at the “Connectors” panel, it’s now called simply “HTTP Connector.”

We changed the title because the connector can now handle both the POST and GET methods. POST is still the default setting, but GET is available in a dropdown selector.

In addition, when set in “Interactive” mode the connector will handle errors from the remote service as if they are form submission errors. The respondent will see the error message that the remote service returns.

We’re working on a separate post that includes an example of using the new GET capabilities of the HTTP Connector.

If you have any comments on these updates, we’d love to hear them! Leave a note below, throw us a tweet, or send us an email.