Configuring the right form for your website has never been easier. With Unstack's Form builder, you can build the form that you need with ease.
In this guide, we'll walk you though the form-building process, from inception through deployment.
Step 1: Where do I need a form, and what information should I collect?
This goes without saying, but it's an important step all the same. After all a "Request a Quote" form is a lot more useful if it's collecting the right information.
For the purposes of this article, let's imagine I need a "Request a Quote" form to go in the red box below.
So I know where my form will go, now I just need to decide what information I'll collect. Based off my business needs I know there are a couple services that I provide...
- Car Repairs
- Boat Repairs
- Plane Repairs
- Misc. Vehicle Repairs
(Yes I'm really that handy.)
Therefore, in addition to the standard contact-info fields I'll want to include the following in my "Request a Quote" form:
- A field for vehicle type (Car, Boat, Plane, etc.)
- A field for the user to enter their vehicle information (Model/Brand/etc.)
- Another field for the user to describe the issue they're having with the vehicle.
With this information in hand, I'm ready to move on to the next step: building the form.
Step 2: Building the form
To build the form, I first need to select Forms from under Customers on the main menu.
Doing so takes us to the Form Manager, which is where we'll see a list of any Unstack forms that we've previously built. It's also here where we can create a new form, or edit existing forms.
In our case I'm going to select New Form in the top right because we need to create a new form.
Clicking New Form takes you into the Form Builder. It's here where we are able to add/remove fields to our form to make sure it collects the right information.
The builder is an intuitive "drag & drop" styled editor, so if you want to add a field - drag it in, if you want two fields next to each other - drag them next to each other.
Below you'll find a brief description on deleting, adding, and adjusting the fields of your form.
Deleting a Field
To delete a field, you need to select the "Trash Can" icon next to the row of the field you want to remove. Keep in mind that if you have multiple fields in a single row, clicking the "Trash Can" icon will remove the all the fields in that row.
Adding a Field
To add a field, it's as simple as selecting a field and dragging/dropping the field where you want it on the form. You can even drop fields next to each other if you want them to be in-line with one another.
Adjusting Field Settings
To adjust the settings of a field, all you need to do is click on the field you're trying to adjust. Doing so will allow you to edit the Label, Placeholder text, Help text, and whether or not the field is required.
For custom fields you also have the ability to adjust the "name" of the field, which is an internal ID associated to values entered in that field. For standard "Contact Fields" you are not able to adjust this internal ID.
Once you're satisfied with the form fields, head over to "Settings" at the top of the editor. This is where you're able to name your form and where you choose which of the following should happen "On submit":
- Show message
- Redirect to page
- POST to URL
- GET to URL
Step 3: Adding Your Form to Your Site
Once your form is ready to go, you just need to jump back to the page where you want to add your form, click the "Add Action" button in your component, select Form, followed by Unstack, and then your form.
Step 4: Styling Unstack Forms
Included in Unstack is the ability to customize almost every aspect of your form, with very little effort.
This is done through Design > Styles in your Unstack Admin. Here's a list of the various things you're able to adjust:
- Field Text (Font/ Font Weight/ Font Size/ Font Color/ Placeholder Color)
- Field Shape (Padding X/ Padding Y/ Border Radius/ Background/ Border Color/ Focus Border Color)
- Field Labels (Font Family/ Font Weight/ Font Size/ Font Color)
- Help Text (Font Family/ Font Weight/ Font Size/ Font Color)
- Spacing (Form Width/ Horizontal Margin/ Vertical Margin)
Congrats! Having made it this far you're now an expert in form-creation in Unstack!