Wl_Form_Free_1280x720.mp4

00:00:00

In this tutorial, I'm going to be discussing the freeform widget

00:00:03

The freeform widget is a way to add forms with a variety of different fields and ask just about any question

00:00:09

you can want

00:00:10

Users can fill in those forms and submit them to you and you can use integrated auto responders or even email management programs such as MailChimp

00:00:20

And if you want to ask users specific questions,

00:00:23

you would want to use freeforms

00:00:24

If you want users to be able to send you a message or to contact you with email or phone or another contact method, you would want to use the form contact

00:00:34

However, if you want to customize what you're asking the user, then you would want to use the freeform because it is a lot more freedom

00:00:42

So once you create the freeform, it's going to ask you to choose a new field

00:00:51

So once you create the freeform, it's going to be blank

00:00:55

You can add a title on the top here

00:00:59

And for the form and field options, you would simply click add a new field in order to create a new field

00:01:05

The label is going to be the label of that particular field

00:01:10

And that's determined by the field type usually

00:01:12

We have multiple different field types to choose from

00:01:14

So text field would basically give them a text box that they can type in, very similar to this right here that the label is in

00:01:22

So you would simply type text

00:01:24

And the text help is going to be below the form, which is used to help describe the form

00:01:31

So you could say enter text here, and then let them know they can enter text there

00:01:37

And the placeholder, that's not really going to be visible directly on the website, but if you're viewing the HTML, you can use placeholders to locate particular fields easily

00:01:50

But once you've filled in all of the information, you would choose the field type, the label, the help text, which will appear below, placeholder if you want, and whether or not it's mandatory

00:02:01

If you choose no, that means they won't be required to fill it out before they hit the submit button

00:02:05

If you choose yes, that means they will have to fill it out and it won't let them submit before all the mandatory boxes are filled out

00:02:12

So once you have all that set, you can click save, and you can see on the right there, it has now created our little text box with our text right on the top

00:02:22

The label is the text, and the help text is right below that

00:02:25

That says enter text here, and you can enter text

00:02:28

And then if they were to send the form, then that form has now been submitted

00:02:34

And it's really that simple

00:02:36

You would just simply add all the different fields that you want for whatever question

00:02:40

you want to ask

00:02:41

So let's say if you wanted their name, you would put name here, and then they would enter their name

00:02:46

All sorts of different field types

00:02:49

The email field is specifically for emails, so that'll recognize if it is an email or not

00:02:54

So you would just simply ask someone for their email with that

00:02:57

The text area is just like the text field, except it's bigger, a much bigger box that people would be able to enter more text in

00:03:07

So you can see it's a much bigger box

00:03:10

As for the select, this allows people to select an option

00:03:17

So let's say you had like sizes, for example, and you wanted them to select one size

00:03:23

You would enter one option per row, such as small, and then you hit enter to go down into a new role

00:03:32

And once you enter your options, you can save this, and those options will then appear in a little drop down box, and they would be able to select one

00:03:42

If you want users to be able to select multiple options, you can use select multiple, and then that'll let users select multiple options

00:03:59

Now when I save this one, users would be able to hold down shift or control to select multiple options

00:04:06

Control will select, let you select individual options, and shift will select everything in between those two points

00:04:13

You can click somewhere, click shift, hold shift, and click somewhere else, and that'll select everything in between, or deselect, and control selects individual items

00:04:24

So that's an easy way to select multiple items, and for select numbers, it'll automatically generate a list of numbers for you, so you can type the numbers here, and you can enter where it starts and

00:04:36

where it ends, so if you want this to start, you know, on one, an end in 50, it'll just generate a list of one through 50, that then they would be able to select drop down

00:04:47

and select the number, and if you wanted to skip numbers, you can use this step here, so if you wanted to do skip every other number, or every two numbers or something, you can do one

00:05:01

through 50, and if you wanted to skip three numbers, you can type step three, and now when we scroll down to the skipper, you can see it skips every three numbers, so one, skip three, goes

00:05:17

to four, skips three, goes to seven, skips three, goes to ten, so that's an easy way to do like patterns if you wanted to select multiple numbers with skipping numbers, you can also do a check

00:05:27

box, so you would just simply say yes or no, or you know, you know, whatever you want for the label, and then they would be as well as file upload, so you can actually ask someone

00:05:49

to upload a file, so let's say you want them to upload a picture, or something, you can select file upload, and then this will actually let users upload a file from their computer, and they would

00:06:03

be able to browse their computer system and actually upload a file, so that's an easy way to upload files or get files from people, you can also do dates, so this is going to basically create

00:06:19

a calendar, and they would be able to select a date, and you can ask whether it's only future dates, yes or no, so if you select no, that means they'd be able to select a date

00:06:28

in the past, or if you're like asking for future reservations or something, you can select yes, and they will not be able to select a past date, only a future date, you got to give this

00:06:41

label, and then that way there's a little calendar they'd be able to select a date that they want for like a reservation or something, as well as rating, so you can do star ratings, the standard

00:07:01

is five stars, but you can generate all the way up to 10 stars if you want, and ask them how many stars they rate that, as well as gender, it'll ask them for their gender with

00:07:09

a little drop down box, and you can even do country, where it asks for the little country, would ask which country they're from, and it can even show the flags right next to them, so once

00:07:20

you have all of the fields that you want to create, you can organize them easily, you can determine the columns on the desktop, so normally they're going to take up a single column on mobile, because

00:07:32

that's easier to see on mobile, because it's a lot small on screen, but on desktop, if you wanted, you can see this is two columns, you can see it actually takes up two separate columns there,

00:07:42

but you can change that if you want, so you can do three, and you save and update that, you can refresh the page, you can see it is now three columns, or you can do one,

00:07:53

where it'll just be all down the line, just like the mobile as well, so that's better on mobile versus desktop, and down here below for the form data and options, this is where you would choose

00:08:05

where that information is sent, so you would type your email here, and that's where it would go, it would go to that email, and you can enter more than one email address if you separate them

00:08:14

with a comma, and you can even post them to a form as well, so if you have a URL or a form data, is located, you can post that there, and this is the text for

00:08:24

the submit button, this is going to change what that submit button would look like instead of send form, and here is the help, slash explanation text, here's where you can enter like a brief description, you

00:08:34

know, please fill out the information, and we'll get back to you, and then I'll let people know to fill out the information below, and that's going to appear above everything, you can see that just appeared

00:08:42

right there below the title, and that's the help explanation text, and for the auto responder, if you want to enable the auto responder, this is going to automatically respond to anyone, if they enter their email

00:08:56

address, so in order for this to work, you'll have to actually have an email address field, and ask for their email address in order to actually use the auto responder, and for the auto responder to

00:09:08

actually respond to them, they have to enter a correct email address, so once you have that field, the auto responder will work properly, and you can enter your from address, and this will be the email

00:09:21

that it appears that it's sent from, as well as the from name, so if you want to do like an actual name, it'll appear from this name at this email address, and that's the subject, so

00:09:32

always make sure you put a nice subject, and that's the body of the auto response right here, so this is the text, you'd say, you know, thank you for messaging me, however you want to do

00:09:42

it, and whatever you type here is what's going to email to them, you can also integrate with MailChimp, you'd simply log into your MailChimp, find your API key, and you can simply paste that right there,

00:09:55

and it's very easy to use, and we are going to be adding more integrations as well, and once we add more, we're going to make some tutorials on that as well, so you can see the

00:10:04

free form, it's pretty easy to use, the additional options are just like all the other widgets, you can determine whether this is mobile only or desktop only, and the additional styles, let you determine the background

00:10:17

and some of the custom classes, as well as animations as well, so it's pretty obvious, the free form is very easy to use, you would simply click add a new field, choose what field it is,

00:10:29

and enter the text, once all of your fields are created, make sure to put your email address in the send to, and you're all set and ready to go