Forms

Let’s explore how to add, edit, customize and manage forms on Editor X.

Forms let you collect the information you need from site visitors. They’re super versatile—for example, you can use them to collect contact info, subscriptions, payments and more. Plus, you can fully customize their design and functionality to work exactly as you need them to.

Let’s get into how they work in detail.

First, we’ll just drag one of these forms onto the canvas from the add panel…

…then we’ll adjust its alignment and its size in the Inspector panel.

All the fields you see in this form are in grid cells, so we can easily customize each of them.

To remove any of the fields that appear by default, just select the field element and delete it. The grid layout will update automatically.

You can add additional fields to your form by clicking here. Once you do, this list of field types will appear. As you can see, there are basic options, advanced fields—which you can access if you have a subscription to Ascend business tools, more on that later—and anti-spam fields which let you add reCAPTCHAs to forms.

For this example, we want to let site visitors choose a response from 2 or more options in this field. To allow that, we’ll add a Radio Buttons Field from the Basic Fields menu here.

You can change any field title by opening the Edit Field option. This is where you can find more settings for the field, including the option to make a field required.

For the Radio Buttons Field, we want to add two options, so we’ll hit Manage Choices, then Add Multiple Choices. In this menu that opens, you can enter the different options you want to associate with the field.

It’s worth flagging that each field type has slightly different input settings. Say for example we want to adjust this email field. If we go to the settings for this field type—notice the placeholder text here. We’ll uncheck this box to make this field optional for now.

As we touched on before, the form is based on a grid that’s made up of columns and rows. Each field is placed in a grid cell, or across multiple grid cells. You can check and edit how each element’s positioned and which grid cell it’s in in the Inspector panel. To change a field’s position, just select it and click on the grid cell you want it to be in, in this indication.You can also do this directly on the canvas.

At the moment, each field takes up just one grid cell. However, if you’d like to stretch a fie

ld across the width of the form, you can simply hold shift and select two grid cells beside each other, like this. For this design, we’ll choose to keep it as it was.

Great, our form layout is all set for desktop so let’s move on to customizing how it’s styled. From these blue breadcrumbs we’ll select the form and open up the design options.

These options are predesigned, but we can go much further when it comes to tailoring the look and feel of this form. Let’s click Customize Design.

To remove the background color of the form completely, we’ll select it and set the opacity to zero percent.

Moving on to the input fields, we can adjust their fill color like so. Here we can also change the text color and theme. We’re using a theme we’ve already saved to our Site Styles—a convenient tool that lets you save and reuse design properties. Of course, you can always adjust the font itself separately, if you prefer. For the placeholder text, we’ll change it to a darker grey to help with contrast.

Then there’s the submit button. We’ll recolor that, adjust the corner radius to round it out a bit and change the text. We’ll also apply some changes to the hover state to make it pop a bit more.

You can make design changes like these in the Inspector panel too. In this example, we’ll adjust the appearance of the Radio Buttons Field choices.

Next, we’ll take a look at this Success Message. This message will appear once a site visitor sends a response. You can edit the text here, and customize its design. We’ll cover more detailed options for changing its appearance a little later on.

If you want to customize things further, under Layout you’ll find options to show and hide the form title, and to add title padding, spacing, alignment and more.

Of course, you can also adjust the form layout per breakpoint. For example we can add another row on tablet and change around the position of the phone and email fields like this. For this example we will stretch these fields across two grid cells so they take up the whole row.

Right now we don’t want the text to wrap, so we’ll stretch the element across the whole row instead of cramming it into the left grid cell.

If we resize the canvas you can see that these changes also applied to lower breakpoints because of the cascading rule. For the same reason, the design didn’t change on desktop.

Now that we’ve covered design and layout, let’s dive into form functionality. To get started, we’ll click Form Settings.

You get to the submission table from here. That’s where you can find all the answers submitted by site visitors. If no submission table is readily available, you can also add a new one from there. Just make sure the submission table is available before you publish the site.

In this menu you can set a form name to help you keep track of it in the submission table, and in your notifications. You also have an option here to get email updates when new submissions come in. Plus, you can manage submission limits and deadlines, toggle on autofill, and more.

You can choose what happens when visitors submit a form here. You can change the success message or use one of the other options you see here. However, the last option—showing a link to download a file—is only available if you have an Ascend subscription.

For our example, we’ll keep the message as it is, and show it for 10 seconds after the form’s been submitted.

Ascend subscribers can also collect payments through forms. An Ascend plan will also give you more options, like adding an unlimited number of forms, and an unlimited number of fields. You can read more about these plans under Upgrade.

You can add conditional settings to forms from this menu. Using these, you can add if/then options to specify the behavior you want. In this example, we’ll add conditions that say, if the email field is not filled, then the phone number field will be required. Then we’ll hit Save Rule.

Here you can choose which field submissions to save to your contacts. Plus, you can set up automated responses and send triggered email flows using the templates provided.

Alright, time to check out the final result. To do that, we have to publish the site before any submissions show up in our submissions table. You can publish your site again at any time to update it after you’ve made changes.

To see how the data looks in the submission form, we’ll just fill this out real quick with some test info and click submit. This will also trigger the Success Message, letting us preview its behavior.

Now, to review the submitted content, we can access the submission table from the Form Settings.

Great, everything came through perfectly. We just have one submission at the moment but this is where you can filter and sort submissions as your collection grows. From here we can still manage the fields on the form, including which ones we want to show or hide. And, of course, you can also import and export data here. With that, you can now go ahead and add, edit, manage and update forms on any site.

Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.