Building a web form – Web design tutorial


Forms of course can capture valuable information
— and their design and functionality can easily make or break the user experience. Five things we’re covering: adding a form,
anatomy of a form, configuring form elements, success and error messages, and finally, form
submissions. We’ll start with adding. We’ll visit the Elements Panel and go down
to grab a Form Block to drag right into our project. And the Form Block comes prepared with some
essentials. A good starting point. And the reason we start here when adding a
form, rather than just going to grab an individual form element, is because the Form Block itself
is required to capture this data: the data that’s collected when the form is filled out. You can delete a lot of these elements inside
the Form Block and start from scratch if you’d like. But the Form Block is our starting point. Let’s look a little closer at its anatomy. And to do that, we’ll ensure that the Navigator
is visible. The Form Wrapper is the top-level element. It’s going to take up the full width of its
parent element. In this case: the Container. We can see in the Navigator…that the Form
Wrapper contains three elements: the Form, the Success Message (what a user sees when
they submit the form successfully), and the Error Message (which displays if there’s a
problem submitting the form). Under Form, these are the elements we can
see right here on the Canvas: A Field Label and a Text Field for Name, the same two elements
for email, and of course, a Submit Button. These are the elements that are included by
default in a Form Block. Now let’s talk about configuring specific
elements. If we double click on any field — for instance
the one that corresponds with the name — we can take a look at some of those input settings. In this case, we have a number of input settings. The first one’s a big one. Any time we see the Name field on our Input
Settings? This is how we’ll identify the field internally,
which will show up on form submissions. Users won’t see this name directly, but it
still shows up in the code, so be careful not to include something you wouldn’t want
users to see. Next we have Placeholder, which is the text
that displays before someone types something in the field. Then the type of text, like email — which
will only accept email addresses. Then the required option — whether or not
the user can submit the form without filling this out. And Autofocus. When a user loads up this page, this text
field will already have focus — it’ll already have a blinking cursor. We also have options for our Submit button. Double click that. And here we can change the text to something
thrilling like Execute. Or Engage. And we can change the Waiting Text. This is the text that will replace the button
text temporarily when the form is being submitted. Each form element has different options; various
input settings based on each element type. But that’s how to configure form elements
inside our Form Block. Let’s take a closer look at success and error
messages. And to access these, we can select our Form
Wrapper, under our Element Settings. And we have Show State. What we see on the Canvas right now is the
normal state. Success shows us what happens when a user
successfully submits the form. We have some placeholder text, of course you
can do whatever you want here — add an image. Or double click to change the text. We can even style it. We can change the font color to a really strong
green. Because people always associate success with
a strong font color that sears their retinas. Let’s select the success message again, and
go back to our Element Settings Panel. We can now show the Error state. And this is what will show if there’s a problem
submitting the form. Same type of control here that we had for
our success message. Back to normal state, and we have full access
to our normal form. Those are the success and error messages. Finally, let’s bring this all together into
receiving these form submissions. And we can control these aspects through our
Project Settings. Let’s navigate on over to the Forms tab. And this will give us all the options related
to what’s done with the data that’s received on a successful submission. Now the collected data will be emailed by
default. And our options start with the From Name. When that email is sent, what from name do
you want displayed? Next we have the Email Address or email addresses
you want submissions sent to. The Subject Line for that email. The Reply To Address — this’ll be the email
address that’s used if you receive a form submission email and hit reply. You can copy the Name and Email variables
to the right of this field, and paste them right inside here. And this will ensure that replies to this
email go right to the email address that’s captured on the form. And finally, we have the Email Template. You can leave this as is, or you can write
your own version using any of the variables to the right, and you can even put custom
HTML in here. When someone submits the form? That submission data will be listed below. You can access it right here, or you can even
download a CSV file. So, we’ve covered adding a form to our project
using the Form Block element, we went over the basic anatomy of our form with fields
and labels and our submit button, we double clicked to configure and change our input
settings on our elements, we explored success and error messages which display when a user
goes to submit a form, and finally, we covered form submissions. What happens when a user submits that form. Those are some of the basics when it comes
to adding a form to a project.

2 thoughts on “Building a web form – Web design tutorial

  1. when submitting a form, the creator of the site is receiving an email with the filled data ? or does the owner of the site have to go to a specific page to see forme submissions ?

Leave a Reply

Your email address will not be published. Required fields are marked *