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 SecureForm interface.
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.
Here we're back in our SecureForm 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.
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.