Transcripts
1. Introduction: Welcome back to another awesome
Skillshare class with me. It's always a pleasure to
have you here. In this class. I want to show you how to build an awesome multi-step form
for your WordPress website. And not just any
multi-step form, but a multi-step form with a payment button at the end
or at the very last step. So that you can find
out people through those different steps
where they can select different inputs
and configurations for the service you're offering. And at the end they will be presented with the amount
they're supposed to fake and are very
strategic Payment button placed at the very last step so they can place their order. Will be looking at
that in detail, and I'll be showing
you how to do all that with free tools. You won't be paying for any plug-in or service whatsoever. Just in case this is your
first time seeing me. I've been teaching right here on Skillshare for the
last 1.5 years. But I've been using
WordPress for the last four years going
into the fifth year now, again, quite some
experience using the different tools that
WordPress has to offer. The one part that I liked
majoring in is looking for the best and most affordable
and preferably free tools to use to build websites. So if you be looking
for a way to build a multi-step form that accepts payment at
the very last step. This is the class for you. So without wasting
any more time, Let's get started. All right.
2. Installing the Plugin: So here we are. This is a brand new
installation of WordPress. Of course, the first thing
we need to do is to add the plugin that will
help us create the form. And we're going to use an
awesome form plugin called formulator because it's free and has very powerful features. So let's go inside. Logins, Add New. Then we're not
uploading a plugin. We're installing it from
the plugins repository. So I'll do a search
here for formulator. Here it is created
by WPA AMU dev. So as you can see right now, it has 200 thousand plus
active installations. I'll click install now. It's now installed,
so I'll activate it. Here it is now active. These are the two
plugins that come by default with every new
installation of WordPress. So I'll select the two of them, and then I'll delete them selectively from the drop-down
menu and then apply. Now they're gone. We only have formulator as the
only install, the plug-in. The next thing we want to do
is now go inside formulator. You'll find it
somewhere almost at the bottom of this
left side menu. So I'll click in later. There we have it. So
this is the dashboard of formulator within your
WordPress dashboard. In other words, this is
where you'll be seeing summaries of how your
forms are performing. And you also have shortcuts
to create new forms, polls, and basically
admin stuff. That's how to
install the plug-in. In the next lesson, Let's see how to
create the forums. I'll see you shortly.
3. Adding a Form Input: Welcome back. So
to create a form, what we need to do is go right here while we're still
inside the dashboard, scroll to create forms. And we can click
this and we'll be taken to create a new form, or we could go to Forms, will also have the option
to create or import a form. So first of all, let me close this down. We don't need that. I'll
click create a form. Because this is a multi-step, a very customized
form we're creating. There is no pre-made template that we can use
for that purpose. So let's go with blank. Starting from a blank slate. Let's give it a name. I'll call it step performed. Now click Create. Now our form is ready to
be populated with fields. So this is where we'll
be inserting fields. You'll notice that
the name shows up up here and we can
change it from here. Now that we call
it step perform, we can change it to now the name will automatically remained to be multi-step form. So let's go ahead
and insert fields. The first field will need
these a drop-down menu because we need
someone to be able to select and that's called select. So I'll click that and
then insert fields. And it'll bring up the settings for that specific type of input. So here we can add a
label for that field. So let us say website type. Let's assume we're running
a web design company. And let's assume we're
creating this type of form to allow people to choose a different settings and configurations they
need for their website. And then get a price
depending on the features they choose for their website
and then pay that amount. Website. Let's assume here we want to add a placeholder asking them what type of website. Then. Now here we have two
options pre-populated already. Let me just apply that
for a second before we make changes to that apply. This is our field. As you can see it
now reads website. And if we preview it, this is the placeholder we
just added what type of website and our
label YS website. If we click the drop-down menu, it has option one
and option two. Let me close that. If we open it again. Now you understand why we
have these two options. We can change that too. Because this will be
the different types of websites someone
can choose from. E-commerce, maybe personal blog. And we can add as many options as we
need by clicking that. I'll add a third one. Magazine website. Let me add one more option. What type of website? Online school. Alright. Now that we have
these different options, let me just apply that quickly. If we preview it now. Now we have these different
types of websites in the drop-down menu and someone
can select it or right, Let me close that down, opening it up again. Now we need to give
a price to each of these options
because each type of website might cost
a different amount, will go inside calculations. And then we'll say enable, choose whether to allow
these fields would be used in calculations or not. The value in calculations is the same as the input
value of this field. So let's enable that. And as you can see, our different options
show up here, waiting for us to input the specific cost of
creating each option. Let's say we will charge $80
for an e-commerce store. Let's say $15. For a personal blog
and magazine website, let's say $53 for an, for an online school.
Let's say $45. Now what we need to do
is go inside settings. If we go inside styling, this is just a place
to add additional CSS, but you don't really
need to add any CSS here because we'll see how to edit the forms appearance
in the next lesson. Going back inside settings, this is where you
set things such as if this is a
required field or not. And of course, this
is a required field. They have to choose the
type of website they need. If we select required, we will input an error
message that will show up in case
they don't feel it. So let's say, for example, these field is required. We don't really need
these other options here, but you can go ahead and play around with them and
see what they do. Now that we have that, I'll go ahead and apply.
4. Creating the Form Pagination Steps: What we need to do next is add additional fields for our form. So let me duplicate this
instead of adding a new one. This one might be whether the customer
needs hosting or not. So Hosting. Do you need hosting? Of course the options will be just two options, yes or no. So let's delete these two for the calculations now if they need
if they choose it, yes, I need hosting. Of course, let's put
the price for hosting. Let's say $2424. Know, of course
that should be 0. We won't charge them if they
say they don't want hosting. Let's go back in here. I think we're good,
so apply that. And now we have
these two fields. Preview that you need
hosting yes or no. I'll go ahead and add
two more fields here. Our field is still
a select field. I want to say insert fields. The label could be something
like number of pages. How many pages do you
need on your website? 510. Let's add one more, 1515 plus. Alright, let's enable the
calculations here for five pages will charge maybe
training for ten pages, 3038 for 15 plus 45. And let's apply that. Now we have those three fields. Previewing that are
right, looks good. These three fields will make up the first step of the form. Now let's create,
now let's insert fields that will go into the
second step of the form. I'll insert field. Maybe we could add
something like text area. And then insert field. Now we have a text
area inputField. Let's change the label to remarks so that in case they have anything to
add as a comment. Add your message
or comments here. Apply that. And now here we have it. Remarks. If we preview that, you'll notice that we
don't have any steps yet. We've not created the
second step of the form. To do that, what we need
to do is insert field. We can insert it
from here or here. We need a page break. So I'll click that and
then insert fields. I'll drag this page
break right above remarks until that blue
line shows up above it. Now the page break is
right before remarks, meaning the second
step starts from here. If we preview that, you'll now notice that
we have two steps. And if we click
maxed, first of all, because we said these
fields should be required, this is the message we
typed as an error message. So that means we need to select at least one option,
personal blog. Yes, I need hosting. And now we can click next. And this is our
remarks text area. But I want to make this
a three-step form. So maybe we could insert
a few more fields. So let's click insert fields. I'll go ahead and select this, select input because
it makes sense for me. Of course we haven't touched
on these other input fields. We will touch on a few more. But the homework or project for you will
be to figure out how these other input
field types are used and where they can
apply on your form. So for now, let's go ahead and select that select field type. And let's give it a label. Payments enabled. Then. Do you need payment
options on your website? No, of course. Now let's input two options like PayPal and
let's add stripe. Stripe. There we have it. And now if we go inside
calculations and enable that, NO will be $0 PayPal, they'll have to pay an
additional $13 stripe, maybe an additional $17. Let's apply that. The payments enabled
option will be on the second page because
we have a page break. But I want to add a
another page break. And instead of adding
a new one from there, I'll just duplicate this one. And now we have two. And I'll drag this to
the end, to the bottom. Then I want to bring remarks
right after the page break. Because we have these three
website hosting number of pages and then we have a page break, then
payments enabled. Yes or no. Let me bring
this number of pages. The second step. Let me put it right below there because there's something
I want to show you. Now we have website
hosting, then Page Break, number of pages,
payments enabled, and another page
break then remarks. Let's view that in action. So the first page has, what type of website do we
need personal blog hosting? Yes, we need hosting. Second step, number of pages. How many pages do you need? Maybe ten. Payments
enabled on the website? Yes, you need PayPal
enabled on the website. Then next step, we have
the remarks field. Then finally, what
we need to do is add the payment
on the last step. So let's see how to do that.
5. Adding the Form's PayPal Button: So let's go ahead
and add more fields. And of course, on
the payment page, we need to have the
name and email. So name, email and PayPal. I'll go ahead and insert
fields, the three fields. Of course now it
comes after remarks. We have name, e-mail papers, so that means we need a
page break right here. I'll duplicate that. Now we have two, so I'll drag it right after remarks that now it's
name, email and PayPal. After that. Let's preview the changes. Now we have that. Let me select that. No, max, number of
pages, five paper. Next, we have our remarks here. Next, we have name, email address, and I have noticed PayPal is
not showing up. So let's go inside our paper. And now you'll notice
the reason it's not showing up is
because we have not connected to our
PayPal account with formulator connects
PayPal account here. And that's what we're
doing in the next lesson. Before we go there, quick recap. All we need to do in
order to populate our form with fields ease, insert by clicking this button here or this button right here, and then selecting an
input field, inserting it. Let me close this down. One more thing I
haven't mentioned is you can rearrange and put these fields side-by-side
like that so that when you preview
them side-by-side. Let me close that down. Let me also put this right
on the let me also put those side-by-side name
and email address. And if we preview them,
personal blog side-by-side. The name and email
address are side-by-side. Let's see how we're going to add payments to this
final step here so that someone is able to
just click pay now and pay. But before we do that, let's make sure we
publish the form. Otherwise, if we
navigate away from this page without
saving the changes, without publishing, we will lose everything and have to
start from beginning. Let's go ahead and
click publish. Now, the form is
successfully published. The form is now ready
to be embedded into a page or a template
or our choice. So I'll close that. And now let's see how to
connect PayPal to our form.
6. Connecting to PayPal: And welcome back. So now it's time to connect
to PayPal so that we're able to show the paint button right
here on the final steps. So let me close that down. And if we open up PayPal, you have not connected
to PayPal account, connect to PayPal account here. So let's go ahead
and click here. And it'll open up in a new tab. Will be taken to the
Settings area of formulator, will be taken directly
to the Payments tab. So we have two options,
Stripe and PayPal. Let's connect to paper. By clicking that will
open up this pop-up. And as you can see, enter your PayPal rest API keys to connect to your account. You can create a rest API app. Here, as you can see, formulated is really making
things easy for us as users. And that's a great thing. So let's go ahead and
click here to grab the credentials will
be taken to a new tab. So that means you need to
have a PayPal account. Here we are. This is where
we'll get our credentials. I need to log into my dashboard. So I'll click login
to Dashboard. If you don't have a
PayPal developer account, you need to create one. I didn't put my password login. And he just needs to
check if this is me. So of course I'll click Yes. And this is for
security matters. So you might get that prompt or not if you do provide
what's needed. Overrides. So we're
inside already. As you can see, my
apps and credentials. We have a sandbox
and we have a live. And if I can go back
inside this area, inside my dashboard
on the WordPress tab, we have the sandbox client
ID and sandbox secret. Then we have the live client
ID and the live secret. So going inside here we
have the sandbox and lives. So let's start with a
sandbox credentials. What I need to do
is simply click Create app, give it a name. For example, new app. Then we have these
two types here. To choose from. Accept payments as
a merchant, seller, move payments to sell
us as a platform, of course, we need to accept
payments as a seller. Sandbox business accounts. So I'll create app. You'll be presented
with your credentials. Now what we need is to
grab this client ID. And now because this new
app that I've created, these not a real business, I will not connect to this. I'll just click my
abs and credentials because I want to
use this app that I had created called Ken visa. But you can use the app
you've just created. And I'll connect to
that with my paper out. So now we have my client's ID. So I'll select my
client ID in here. I'll paste it in there. Then I'll show my secret. You can generate a new secret, but I'll use the one that
we've already generated. I'll put it in their
sandbox secret. And the next thing
we need to do is click My Apps and
credentials again. Just click Back to go back
to select the live mode. So I'll select live because
we've just picked sandbox. And I'll select Ken visa again because that's the
business I wanted to connect PayPal to
select my client ID. This is the Live ID now. So we'll put it in
the live client ID. And secret. Make sure you don't
show it to anybody. Paste it in there,
then click Connect. Now we're connected
as you can see. And if you want to disconnect, you can always disconnect here. So Save Settings. Now payments settings have
been saved successfully. And basically that's how to connect formulator with paper. In the next lesson, Let's see how to configure the PayPal payment field
on our formulator form. I'll see you shortly.
7. Configuring the PayPal Form Field: And welcome back. In the previous lesson, we've just seen how
to connect to PayPal. Let's see how to configure the PayPal payment form field
on our formulated form. Going back inside forms. The first thing
you'll notice is that our form name has not been
updated to the new name. We changed the two while we were editing
the form and that's because we published the
form with the new changes. So let's go inside and edit. And of course this is where we changed the name of the form, but now scrolling downwards, remember we added
the PayPal button and when we clicked it, we had an error message
before we connected to paper. Now that message is
nowhere to be seen here. So the first thing we need
to do is set a currency. So you go ahead and
say your currency, I'll leave that at dollars. And so our amount is not fixed. It's variable, it depends on the fields that the
user has selected. So we will have to
select a variable, but now we don't
have a variable yet. We need to select
a field that will show the total amount of cash that they use
a house to pay depending on which fields
they have selected. And I will show you
how to add that field. First of all, let's
close this and preview our PayPal button. So I'll select that
e-commerce. What's happening? Let me select that
personal blog. No, next. Let me just go Next. Next. Now we have a PayPal
Checkout button right here. And someone can also
pay with a debit card. But now, let's go ahead
and insert the field that will show how much money
the customer needs to pay. And that's called the
calculations inputs. So I'll select the
calculations, insert fields. Then of course, let's give
this maybe a different label. The total amount ease. Let's go inside calculations and this is where we'll create a simple formula to
calculate the total amount. And of course, the simple
formula is the addition of whichever option the person selects on every single field. So what we need to do is select the different
fields we need here. So for example, the first field, YS website, That's where
we have an option. Let me just close
this for a second. We have the website and
we have them hosting. They have an option there. Anywhere where there is an
option that involves money. We will have the option
to select that selector. So we have number of pages, payments enabled and all that. So going back inside
calculations, calculations, we have website. Then whichever option they
choose on the website field should be added to the
hosting selection they make. And that should be added to the number of
pages they select. And that should be added to the payments enabled
option they will select. So here's our formula. Websites choice. The last hosting
choice plus number of pages plus payments enabled. And then let's apply that. Now that we have
these calculations, let's put them above
the PayPal button, right below the name and email. Now, going inside
the paper variable, Let's select calculations
and apply there. These two are connected. Now, PayPal will accept the payment of the amount that the calculations
film will show. So if we go inside review, for example, select
e-commerce store. Let's say we don't need hosting. Next, let's say we
need ten pages. Do we need payment option? Yes. Let's say PayPal. You don't have remarks. And then the calculations show that we need to pay a $131, let's say PayPal Checkout. And it starts opening
up our paper. If you have a PayPal account, if a customer has
a PayPal account, they can log in and
complete the payment. They can click debit
or credit card. Now they can input
all their details here and paying
now through paper, this error message
has shown up because I've counseled the paper
pop-up that was showing up. This is just to tell us that the payment process
was not completed. The user aborted the
PayPal payment process. So let me close that down. Now that that setup,
I'll click update. Our form is now ready to be displayed in the
frontend of our website. In other words, on our webpage. So how do we display these
form in the front end? Will do that in the next
lesson. I'll see you shortly.
8. Displaying the Form on the Web Page: And welcome back. Now that we have our
form ready to be displayed in the front
end on a webpage. How do we do it? I wanted to show
you two methods. One of them is using the default WordPress
short code method, and the other one is using a
page builder like Elementor. Let's start with a
built-in WordPress method. So going inside pages because we're displaying
it on a webpage. Because I mentioned this is a brand new installation
of WordPress. These are the two
default pages that come with every new
installation of WordPress, I want to create a
new page, so add new. Right, Let's give it a name. So let's assume this is the service page or
something of that sort. And because we're using the
built-in WordPress tools, I'll click Add to add a block. And in here I'll type short. Short code will show up here. So I'll just select short code. And now we need to write
a short code here. So I will right-click open this link in a new tab so
we don't close this page. We need to grab a short code from the formulator
form we created. Let's go into this new tab. I'll go inside formulator forms. Of course this is our form. What do I need to do is
click this cogwheel here. The second and the second option will be copied short code. I've copied it just in case you are already inside the form. You can also go to this
cogwheel and copy short code. Now, let me switch back
to our tab where we have the short code block and
paste it in there. That's it. So next, let's publish the page. Publish it. Let's view the page. There is our page and our form is displaying
properly right here. It's working as usual. Our checks are working
because as you can see, before we can go
to the next step, the form does the
checks and if there is anything wrong, it notifies us. Let me just select that. Nope. Next, these don't have checks. There is our paper button. Let's select paper. Now someone can login and
complete their payment of $15. Remember I mentioned
this error message appears because we closed that payment process
before we completed it, before it was complete. We can also click the debit
or credit card method. The details will appear here and we can go ahead and
finish our payment. That's the first method. Going back inside our dashboard, I want to show you the second
method using Elementor. So basically it's
similar because we'll still be using a
short code element. But of course, I don't want
to assume that everybody watching this class has
used in the mentor before. I just wanted to make
sure everyone is covered. So go inside plugins. I want to add new. We need to add Elementor, elementor website
builder, and install now. Alright, let me activate it. This is the setup, this is the new Elementor setup wizard, so we have to go through it. I just want us to
keep this. Skip that. I don't want to select a theme. I don't want to give
the site a name for now because this is for
illustration purposes. I don't want to add the logo. Skipping all these. Alright, so we can
select to edit a blank canvas with
Elementor editor. So I'll click that. Here
we are editing our page. So all I need to do
while I'm on this page here with this edit with
Elementor editor available. I'll go inside this search
widget and search for short. In automatically, a short
code element appears, but we need to add a section, so I'll click that. And then I'll add maybe
a double column section. No, maybe let's add a single column section,
single column section. And there we have it. Now,
the moment we add it, it brings up the settings
for the section. But we don't want that. We want to add the short code. I'll click this Elements icon
to bring up the elements. Again. I'll type short
and short code elements will be one of the
options there. I'll drop it in there. And now we have a field
to enter our short code. So I'll go back to our
form on the other. On this other tab, I'll click this cogwheel
carp short code. Go back in here, and I'll paste it in here. Then I'll publish the page. The post is live. Let's preview. There we have it. Second method on how to
display just in case you're using Elementor Is
your page builder. So that's how to display
the form in the front-end. And by now I'm pretty
sure you're wondering, what if I want to
change the colors? What if I don't want this
border on the entry fields? What if I want to change
the name of this page one, page two, page three. How do I do that? In the next lesson, we'll see how to change
the appearance or the form to fit
your brand colors. So see you shortly.
9. Customize the Form's Pagination: So we're back inside
our dashboard. We now want to change the
appearance of our form. And to do that, we need to go
inside the Appearance tab. And you will notice
by scrolling, it's the next step after we
added all the fields we need. So we can either click
that or this button here, and we'll go to the
Appearance tab. But before we do that, I want to change these titles here to read
something different, like step two or anything you want them to
say instead of page one, page two, page three. So we change that by going
inside pagination here. So click that. And when we open this pop-up, the first thing
you'll notice are the four steps in our forum. So we can change
these two steps. Step one, step two, step three. And then complete or anything
else you wanted to save. Let's see what that looks like. Apply. And let's
preview the changes. Now it's changed to step one, step two, step
three and complete. Let's close that. Let's see what else we
can do about our form. Going inside settings. We can change it from
steps to a progress bar. So that means we
won't have step one, step two, step three or four, selecting progress bar, it'll just continue filling
up until the end. Let's apply that and
see what it looks like. Clicking Preview. Now that's how it
looks like and it keeps filling up nowhere
at twenty-five percent. If we go onto the next step, we're at 5075, 100%. Going back inside there. Let's see what else we
have at the footer. We can change what
the buttons on the steps of our forms say. So right now we have
Next on page one, we have the Next button. On page two, we have the
Previous and Next button, page three, Previous
and Next button. On page four, we only have the previous button because
we don't have a next button, we only have the PayPal button. You can change whatever
you want this to say. I'll close that, end up date the form because
we've updated it. Let's go to the front end
and refresh the page. So I'll hit Control
R or just reloaded. Now our form has been updated. Alright, so that's how to
edit the steps on the form. Next, let's look at how to edit the actual
appearance of the form, how to change the colors of the different inputs and these progress bar right here and the buttons See you
in the next lesson.
10. Customize the Form's Appearance: Air, welcome. It's now time to work on
the forums appearance. So let's go to directly
incite appearance. I'll click that. And as you can see, we're
inside the appearance. The first change you can make
here is the design style. And we have a few design
styles here to choose from. The default has a border. Then we have flat that
doesn't have a border. This is the one I like. But let's look at the
others board and then none. So you select these if you
want to use custom CSS. So if you know how to code
your own form styles, you can just enable this and now start
styling it yourself. But because I want
to assume that not everybody taking
this class and knows how to work with see how to write CSS code will not
go this direction. We'll go back to flat because I like it
without that quarter. And then the next
part is colors. So right now we're using
the default colors, but we can switch
to costume colors. And this is where we can edit
every aspect of our form. Going inside here, we
have border colors, we have the button colors. Go to previous, previous. Let's go there. You will notice we have
the form container. This is the container that's
holding the form itself. Right now it's invisible, but we don't need to touch that. Right now. I'd like to focus on the
parts that we actually need. For example, the Next button, the button Next, this
button right here. So let's go ahead and
select a new color for it. Let's say, for example, some aqua color or
let's say green. Let's say a green
color on hover. We want to make it. I'd say, let's say that orange. Let's copy that. Because unfocused, we also
want to make it that color. Typically the hover and
focus colors are usually the same like that. Now if we update that and go to our form and
refresh the page. Now has a green and on
hover, it's that orange. Next, we want to edit
the back button. In other words, the
previous buttons. So if we go to the next page, so now we want to edit
the previous button. So we can just copy
these these values. Copy that, go inside
the back button, click that, paste it in there. Collapsed that expand that. Flip the color box here. Copy that. Let me scroll here. And hover. Wanted to be
that orange and unfocused. We also want it to be
that orange. Update that. Now if we refresh this page, select and then move
on to the next page. Now both of them are consistent. So if these are
your brand colors, now your form buttons are
matching your brand colors. So how do we change this
progress bars color? Going back in here, let's collapse the back
button and the button next. Then we have a progress bar. Let's see page
nation progress bar. Here we can change the color. Let's say that green. I want to go back
in here and save button next. Click that. Let's copy that. Then let's crawl to pagination
bar. Paste it in there. Enter. Let's update that. Let's refresh that. Now, our progress bar is matching our website
green brand color. Nope, personal blog. Next. Next. Next. We can't edit the
PayPal button color because it's coming
straight from paper, not from four minutes. Let's go back in here
and collapse that date. We've already updated it, but no problem, let's
just update that. Let's see what else
do we need to change? Let's go to the previous step. For now. Those are the parts we needed
to change on our form. But of course, as you can see, we have different parts
of the form that you can customize until you're
satisfied with your form. I will leave these spots. Do you play around
with all these parts? Change a setting here, then go to the front page and refresh the page to see which
part has been affected. But I'm very curious to see what you'll be able
to come up with. It's all about how
creative you will be with all these parts. You can also edit the fonts
on the different parts of your form by enabling custom
editing on your fonts. And of course, open
every single field or element you want to
change the texts to. But we're not going
to do that because we already like the font
that we're using because the form is currently inheriting the font that
is set on the website. That's how to customize the
appearance of our form.
11. Set the Form's Behavior: Welcome back With
our forms appearance now updated to match
our brand colors. It's time now to
look at the behavior after the form is submitted. So we can click this behavior here or scroll all the way
down to the bottom here. Any of them can do so
let me just click that. And of course you'll notice it's gone automatically to this tab. And now submission
behavior configure what should happen when a
user submits this form. After submission, we can select whatever behaviors we want
the form to have right here. So if I open this one
that comes by default, you'll notice we have
three options here. Behavior we can have an inline message that
comes right below or above the form after the user has successfully
submitted the form. And I'll show you how it looks. We can also redirect
them to a URL instead. So https, once they click
Submit and the form is successfully submitted, they'll be redirected to Google. We can also hide the form
immediately after they've submitted it and
show them a message, right where the form was. So let's go back
to Inline Message. And right here we have a label. This label is visible
only to us right here in the dashboard to enable us to identify the specific behavior. Because it might have different settings from
a different behavior. So let's say for example,
website design forum. And let's apply that. And the message will auto
close after five seconds. Remember we've selected
Inline Message. Thank you for contacting us, will be the inline
message that will appear above, below our form. And this is the
label that we will, we will be identifying it by. Let me apply that. And now you see it's right here. Only we, as the admins can see that it's called a
website design firm. So going back inside
our field for a moment, I want to remove the PayPal. I want to remove the
paper inputs so we're left with a send message button. So you can see how that
inline form message looks. So we've updated it. Let's go to the front-end
and refresh the page. Reload. Now let's select that personal blog. Nope. Paper. Comment there, max. So we have this send
message button. If we also add a name at gmail.com
and we're paying $66. So if we send a message, this is the behavior we've selected right here
in our behavior. If we open that, thank you for contacting us, we will be in touch with you shortly. That's
the same message. It's disappeared
after five seconds because that's
what we have here. Because this is a sales, but this is a sales form. We can have something like thank you for your
purchase and apply that. Let's update the form. Let's go let's go
to the front end. Refresh the page. Now if I select these here. Next. Next, Mike com and send message. Now it's thank you
for your purchase. And we can change this
background color of the response by going
inside the Appearance tab. Response success. Change it to maybe these
orange that rhymes with our website or maybe let's say these
greenish color here. Then let's update that. Now if we go back here and
refresh the page, reload it. Next. If you need a name. As you can see, the background on the message has changed. The message has disappeared
after five seconds. Basically, let's go
back inside behavior. And there are more
settings here like method, do we want to use adjuncts to send this form
without reloading the page or use the
more traditional method of reloading the page. Now, I'll not go deeper into
all these settings here, but I recommend you go check out the official YouTube channel
of the formulator team. It's called WPA MU Dev. Here is the link to the channel. Check them out and learn
as much as possible about the different ways you
can work with formulated. This was only to show
you how to create that form and make it
a multiple step form. So we can't go into all these
details because that would mean this class becomes too long and that's
not what we want. So basically that's
how to build a form. Let me just go to the front-end. So this is how the form looks. What we've done is
understand how to create the different fields
and how to create multiple steps that
leave the user to select different
options depending on what they want to do. Then finally, make
their purchase. Of course, this is just the
beginning of the journey. To learn more, you need to interact with this
plugin further. And you need to watch
as many videos as you can about the other settings
we've not looked into. At least you've
learned how to create a multiple step form using
the formulator form. And as you can see, we have more options here that
we have not explored. And the reason is
we don't want to deviate from the main
aim of the class. Once you've learned how
to create this form, you need to understand
how to place the form on a beautifully
designed webpage. And I have several classes right here on Skillshare showing you how to design beautiful
landing pages using Elementor. So you can use those
skills to design beautiful web pages and
then use the skills you've learned in
this class to add these multiple step form
right on that page. So I recommend you check out my profile and see the different
classes I had there and see if you can learn something about Elementor and if you have any questions
or comments, please type right below this video in the
discussions tab. And I'll be sure to answer
you as soon as I can piece. I look forward to
hearing from you until next time. Peace.
12. Outro: And that's all from me today. That's all I have for
you in this class. I hope you learned how to build a multi-step form for
your WordPress website. And above all, I hope
you learned how to apply these to your
actual website. And as I mentioned earlier, you can go ahead and check
out all the classes are published before right
here on Skillshare, open up my profile and see which class
you're interested in. I'll teach you how to build awesome landing pages and fully working website using
WordPress and Elementor. Otherwise, for
now, I have to say goodbye and I'll see you
in the next one piece.
Ken Mbesa, Web Designer | 3D Artist
