Additional Information
Video Transcript
Welcome to LuxSci's FormBuilder, version 2.0. In this video, I'm going to give you a brief tour of this tool and show you some of its cool features.
Let's start by looking at how the FormBuilder is laid out. Here we have tabs that allow you to toggle between editing the different pages that FormBuilder provides for you, your full form itself, and the pages that you can send your users when they successfully fill out your form or when some type of failure happens.
Below is the form editor, showing the actual contents of your form, as well as a toolbar that allows you to mark up that content. Over here, our drag and drop elements that you can grab and drag into your form to add various things from responsive layouts, to your regular form fields, to other special things like signatures.
Up here is the toolbar, where you can save your form, view the form, access special settings and custom advanced options, and get detailed help on this tool, and exit the FormBuilder, going back to your Secure Form interface.
Basic Editing
Let's start with some basic editing. Here in your FormBuilder editor, you can just click and start typing. You can highlight with the keyboard or the mouse, and then go up here to the toolbar and start modifying. Changing sizes, changing colors, changing fonts, adding links. All of these types of things are available here. You can click on the maximize button to make the FormBuilder editor full screen, giving you maximum amount of space. You can click on the Source button to access the raw HTML that corresponds to your form. You can edit this, making any changes that you like, and then go back to the full visual interface. For most things, editing in the visual interface will not step on manual changes that you make. For example, adding IDs, adding custom HTML and so forth is perfectly fine. You do want to stay away from adding JavaScript and Cascading Style Sheets directly in this content. There are better places to put that, which we'll get to later in this video.
Responsive Layouts and Tables
Next, let's add some things via drag and drop. I'm going to make some space in our editor area here just by pressing enter, and I'm going to add two kinds of elements. One is a two-column responsive grid where I'm going to have the left column be 33% of the width. We'll have two rows, and we'll have it so that it's responsive at 768 pixels, and we'll see what that means in a minute. Okay?
Here it is, and you can see this two-by-two grid with left column is one-third the width, and the right column is two-thirds the width. We'll enter some content here, like Name, Date. Below it, for comparison, I'm going to drag a table, and I'm going to make this also two-by-two, have it take up the entire width of the page, and have some cell padding. You can see that here, this two-by-two item versus that two-by-two item. I'll put Name, Date.
One thing you'll see is that the width of the cells in a table and lets you go and edit it. They're dynamically determined by the content inside, so as you add more and more content, their widths change. With the responsive layouts, the widths are fixed. The widths change as you make the screen narrower, but otherwise, they don't change. Let's add a responsive text input field to each of these objects. Here, we'll add a 50% wide field, give it a name. See, it takes up half of the available space. Over here, we'll also make one to the right column of the table, 50% of the space. Once again, 50% of the space is determined dynamically by the content in each thing dynamically by the browser. The responsive layout gives you a much more concise or easy to set up grid than the table does. The table has a lot of flexibility for you as well if you go into the source and specify the dimensions.
Now, let's look up here at the disk object that's now in blue and yellow highlights. This is the FormBuilder's way of saying, "Hey, you've made changes. You better click me to save them. Otherwise, you're going to lose them if you go away." Let's click this, save the form. Let's reload the form over here, and let's look at it. Here is our form live, with these two different objects embedded in the middle of them. Here is the responsive two-column. Here's the responsive table. Note that the grid lines are now absent. Those are only visually there for you when you're editing your form in FormBuilder. They don't show up on the live interface unless, of course, you add CSS to make your own grid lines.
Now watch what happens when we shrink the width of that page, simulating someone who has a narrower screen, or maybe simulating someone who's using a browser on an iPad or a phone. As we get narrow enough, we see that the responsive two-column format has gone from a side-by-side mode where the column one is here and column two is here, to a stacked mode, so column one, row one, column two, row one, column one, row two, etc. This is very good for a very narrow screen, because you're not forced to use the full width. The table never does that. The table always stays in a two-by-two grid, where the cells just keep getting narrower and narrower as much as they can. These are both responsive. They both scale to the width available, but depending upon what you have in them and what you're trying to accomplish, they're better for different types of interface tasks.
Back to Drag and Drop
Here we're back in our Secure Form builder. Back in the drag and drop area, we also have other things that you can drop. You have images that you can put anywhere you want and upload them to your hosting space. You have all the usual suspects for form fields, from text inputs to buttons of different kinds, and different looks, and different actions. Checkboxes and radio buttons with labels, multi-line text areas, select lists, pop-up date pickers, file uploads, hidden fields, and even some special ones, such as a canvas area for signing the form with a mouse or a stylus to get a written signature, or a tool to capture the geographic location of your users. Whenever you make changes, be sure to press save before you're done. Otherwise, they're not going to be committed. Whenever you want to see your form, what it actually looks like live, click on the magnifying glass.
Form Field Commands in your Toolbar
You will notice that all these form fields here are only visible in the drag and drop area. They're not in the toolbar. Some people really like to have the form fields also in the toolbar. Well, that can be done as well. If you go into your settings and click on that, you'll go to your web interface settings page. Go down to the bottom, show Advanced Settings, and see the setting here. "Secure Form: Show all possible controls." We turn that on, save the changes, and when that's done, when you reload the FormBuilder, you'll now see there are more options here, options for all of the normal form fields and some of the special fields. Some things, like multi-column layouts and other advanced settings, will never be in the toolbar, but you can get a lot of the regular ones here. For example, just clicking on a text field and adding it in, and there it goes, and you can now do it either through the toolbar or through drag and drop.Advanced Features
FormBuilder has a lot of features for advanced usage, so if you're someone who has experience with JavaScript or Cascading Style Sheets, if you're a web designer, Secure Form Builder is really built for you.
If you go under the settings menu, click on Custom CSS. Here, you can see the default styles that come with FormBuilder for various things, and you can add all of your own. These styles are automatically published in the head of all of the pages in your FormBuilder configuration. You can add as much as you want there and be as thorough and detailed as you want, and even include size-adaptive rules. Click Reset here to change settings back to their defaults whenever you want.
Even more powerful than Cascading Style Sheets, go to your Custom JavaScript. This is a block of text that gets added to the bottom of your page between script tags, and you can include any JavaScript that you want here. You can even use tricks to include external libraries. You can add events to your form. You can call jQuery and jQuery UI functionality. You can really use the custom JavaScript to make your forms do anything possible. Run Ajax commands, custom validation, pulling data from third-party servers. Whatever you need, you can do in the Custom JavaScript area.
Under FormBuilder Settings, you'll find a whole host of other options. First, you can enable "Save & Resume", which is a feature where you can add buttons to very long forms so that your users can save their progress and get a link that they can follow later on to come back and have the form refilled in to where they left off, even with password protection added on for security. You can have custom success and failure pages. Rather than having them built into FormBuilder, you can send people to pages on your own existing website, if that's appropriate. You could have jQuery UI automatically include it so that you can add functions in your custom JavaScript to enable things such as accordions, and special buttons, and other types of actions, menus, and so forth. You can have Bootstrap version 3 CSS automatically included, or even load in your own external style sheet. If you're not the kind of person who wants to really dig into styles, you can set some of the basic styles yourself, such as colors, and sizes, and paddings.
There's a lot more that you can do with Secure Form FormBuilder. Just check out our help for detailed instructions on all of the tools, and for additional instructions on the JavaScript APIs for managing things such as the signatures, hooks so that you can lock in to events that happen just before things are submitted. Look into, also, our API for accessing submitted data saved in databases. If you have any other questions, feel free to contact LuxSci Support, and we'll be happy to help you out with Secure Form FormBuilder.
