Hi there, this is Pedro. Today,
I'm going to show you how to build a website pricing calculator, using Piotnet forms.
Piotnet forms is a WordPress form builder you can see it here it's pretty advanced, it
has plenty of features. It's one of the most complete form builders that I have ever
tried. Right now, the price for a lifetime license unlimited it's only 99 so it's really
a no-brainer. This form builder is compared to fluent forms and let's take a quick look at the
pricing for fluent forms let me see pro-addon as you can see for unlimited sites lifetime
it's 799 so you will save about 700 dollars which is huge. They are
always improving the plugin and this is the form builder that I use in all of my websites so let's do this! I'm also using oxygen which for me is the best WordPress
builder out there and oxygen is also with a discount price right now for the
agency. It's a lifetime deal as well it's only 199 it's a huge huge huge deal, you should
grab it as soon as you can okay so let's do this. Let's close this for a second, right here I´ve
already installed oxygen and Piotnet Forms Pro, which adds the Piotnet Forms free plugin as well.
I'm using the new version of oxygen 3.7 that was released today, so it has a lot of amazing new features, such as CSS grid and composite elements. I have already created here a template. Created the main template, let's edit with oxygen just to see it in a second. we can close this, this as well and this. Okay, so here's the
the template that I'm using, just as the header and the footer and this inside, in this section, is the inner content. Let's save this go back to the admin, and here on the pages, I've already created this page, that's the page we are going to work on. It has this pricing and I have this modal. It's empty right now. Let's edit this with oxygen and
see how I´ve built this page. While it's loading, we can come here and open the Piotnet Forms. I've been playing here with
some examples, let's delete all of this. Okay! Empty trash, add a new form, like I
said, let's call this pricing calculator. Save, publish and edit with Piotnet. So here we are on the page. On this page let's open the structure panel. It has a simple heading, then we have the switcher, which is
a composite element from Oxygen. The switcher, has two pricing tables
one for the webstore and one for website. This is just an example, only to have something there.
What we are working, is in here there is another section with another heading and
a button that will trigger this modal. Okay, now let's save this so we can close it for
now, and let's start building our form. This is the Piotnet Form builder, it works
really good with Oxygen and let's start. First, we'll add a section this is a drag and drop A few things you need to know
before we get started. Every time, we add a section, let's put this full width for
now. Every time we add a section, we have this blue box over here where we can grab
and push the section wherever we want, we can duplicate it or delete it. Over here every time,
I hover it appears this other box, that´s this, so let's see if we duplicate, it we see that
this controls the columns. If, we duplicate it again, now we have four columns that's great.
Let's delete this, we don't need that for now. Now, let's add a field, let's add the
field here. This field, first of all let's give this form a name,
or an id it's required. Every field that we add to this form, needs to have
the same id. So, let's add the id pricing calculator. And it's always good, um good practice to give the field itself, an id that you can recognize. So, this will be the name field. Let's call this
name okay on the label here, let's put name, uh.. placeholder we don't need anything for now. Let's
make this required, and with the required mark. Okay, now let's start this a little
bit go to style, so we can style the label and the field for the field. Let's do
maybe 10 pixel padding all the way okay and give it a 25 pixel border. So, it looks sweet
like this okay. We have the first field ready now, a pretty cool uh thing we can do, it's to just
duplicate this row and now it will duplicate the field inside so that the new field
already has the styling that you created. Never forget, to change the new field id. This, will be email and change here the label to
email and the field type it's on text, because that's what we were using in the name
and we'll change it to email. Okay, pretty awesome! Now, let's duplicate
this over here, let's add, we can delete this, and delete this column and
delete this field as well, and add here some text. oops and this text we'll write personal
info, let's give it an h2, okay? Pretty cool, now let's duplicate this one more time, and push it down over here so we can write. Let's build you an awesome website. Okay, now let's duplicate this one more time, delete what's inside and let's give this a little bit of padding. Oops,
let's add maybe 20 and let's give it a background color. I have this color already, here we can
use the same color that we have on the footer, and let's paste it here okay, now
let's go here and add another field. Don't forget, every time you
add a new field, you need to put the form id on this on the field.
This is really, really, really important. Without this, in every net where that same idea, on every field same form id on every field,
the form will not function properly. So now, on the field id, this will be a kind or a
type of website. Okay, let's make this radio, and i'm sorry, on the label, let's write what
kind of website do you want. Let's go, to style on the, on the label. Let's put this white so you can
see it and on the check box radio, let's put this. Let's make this first. Now we can go, we can come here
to style and make this a button. Okay, let's add an item let's call this website the value, let's right website as well Hmm, for the icons i'm using the icon wizard which is when,
unchecked i'm using the times icon. It's this one, maybe time circle, okay and when it's
checked i'll use the check circle check. check circle this one, okay? Let's
see if it's working, Yes, perfect now let's add another one, and
this one will be for the online store. The value, will be online store and the value we will be using later. So this is
really important, for the uncheck. It will be the same, will be times circle, this one, is checked, will be the check circle. Okay, now over here we choose inline, so they go next to each other, and we choose send data by label. Okay, now that we have just created,
we can style this a little bit. Let's see when it's checked, unchecked the text
color is white, you can color, and when it's checked, I want just to
change the background color, and let's use this one, this lighter shade of
purple space, this one right here. Perfect, you can now change the background as well. I don't like this blue border, so let's
come here, on the border type let's make it solid, and put the same color here.
Yes, perfect the styling is okay, let's save this. Always keep saving it, because bayonet doesn't have the ctrl z function, return function, or redo function, which is unfortunate, so always keep saving. Okay, now let's duplicate this, put it down here and here, let's write the website features... and this could be, an h4. Okay, let's duplicate once again
over here, let's delete this. Duplicate the column, the first column
to choose a column, just by clicking on this icon and the column width. Let's put
35 percent, and this one let's put 65. All right, now we can add more fields. Let's
add one more field here. Let's come here just to copy the form id I
keep forgetting, the name of the form id. Let's put it here, and this field will be pages. Let's call it, it's right
here on the label how many pages, let's make this required mark. Now, this field needs to be a range slider on, and on the range slider we will change the options. Over here I'm just
copying from my, oops sorry, i'm just copying from my, my website, and you can see here on the demo
that pionet, is using the range slider gs framework. They have a bunch of examples here, and how you
can customize your own range slider. You can do a bunch of stuff with this, which is
pretty awesome. Okay, let's close this and hmm, it's the skin is round we're using,
single to have just one option here, hmm. The max is 50, the minimum is 1 and the grid
number, is the steps so it's five steps here okay. Let's save this. Don't forget, always
keep saving! Now, let's duplicate this. Here, we're going to change this, to instead
of a range slider it will be a hidden field, and here we will call it the pages price. We're gonna need this, for the calculations
later, and here you will in the default value you will choose how much each page
costs for you. So let's make it 100 for example, this is just an example, okay? You
can put whatever price you want. Okay, looking good so far, let's save
this here, let's duplicate this again and push it back push it down. Hmm, the hidden field if you don't have it selected, maybe you don't
know where it is but you can always remember that, that, you should always put it in the bottom,
so you can know what it is. Here, instead of pages let's do how many languages and here let's write languages... Okay, hmm 50
languages is too much so let's put maybe 6 languages. Okay, one, two, three, four, five, six perfect! Hmm... okay, let's now duplicate this hidden field,
and let's choose a price for each language. You can keep it you can bump this maybe to a 300,
maybe you will need to hire someone to do the translation, or not. It's just an example,
here let's change the name to language price. Here let's change the name to language price, make it consistent. Okay, so far so good. Let's
save this over, here let's add another field. Hmm... okay, let's grab it let's drop it here
in this field, it will be also a radio but, let's call this contact form. It will be required as well, the required mark and as
always to come here and copy the form ID. Perfect!! Let me just check if I
have the form idea here. Yes, okay... Now that we have the form ID, we
can give the field ID contact form. It's a radio and here let's in this
style choose the button as well. In this button we'll have two options,
one is yes and we'll return the value, and this value is the price for the
contact form. So maybe, let's put this 100, 100 euros to build a contact form not
too shabby. Okay, for the icon let's choose, let's choose the check, this is the check. because, this is the yes we don't have
the unchecked it will be always the same. Let's add another and here, will
be the no and you know we'll have to now we'll have the, times icon this one. Okay, looking good... Now what we need to do is make
this in line and send the data by label as well. Okay, all is good so far, let's style this a
little bit to change the background when the user clicks, let's go to style and
when it's unchecked let's leave it as is. One is checked, let's change the
background color to this one, this lighter shade of purple... okay, and
let's do the same for the border, okay... So, what you need to do is check the
change, the text color to white as well and the icon color to white.
Okay... perfect. Looking good, now that we have this designed, what we can do is, we go to advanced and change the
width. Now, this is using 100 width by default and if we make it 33.33 we can have three columns,
now let's duplicate this a bunch of times so we have six options in this one let's change to instead
of contact form, let's change to custom or four paid. Oops, for a full page,
okay, here let's change the ID to custom. Let's save it, here. Let's call this... this will be photo gallery, let's change the ID for the same photo and i'm not changing the values. Yes,
everything will be 100, but of course you can you can give each one, some type of value. Let's move along in this one,
let's call this lead capture, okay... and here as well, location and here it's google map, okay this one, let's call it... multi-graded block and let's
give it a name, an ID of block. Perfect!!! Now, let's take a quick look on the front end, this is how our form is looking so far, pretty sweet... Okay, now let's duplicate this, this section is where we're going to put our calculated fields, let's
grab a field over here let's copy the scoped form ID, forget this and here
I'm not sure, but I think that these calculated fields in order to work,
it has to have the ID of the total. Okay, here in the type, let's change
this to calculated fields okay in the label we can write total we're not seeing because, it's
dark. Let's change the label color to white. Perfect, now what we can do more here...
we can put the after content. I will put, the euro symbol because I'm in Europe
and you can maybe insert the dollar. If you're in the USA
hmm, the dollar or pound sign if you ´re in UK... Hmm Now we are not seeing anything, because it's
still quite the field I think it's here that we change, hmm, no. The placeholder it's not here, ah.. it's here, the calculated fields. Let's change
the text to white, okay that's working now... Now let's start doing some calculations, uhh... in this calculated field so go to
settings, and we can see here, the calculation and we have an example, it's one field
ID and the operator here in this case is an "x" for multiplication. Let's just
copy this and paste it up here. Now, we need to go and see the ID´s of our
fields. This one, is pages and this one is page price... this one is languages, and this is language
price. Okay, let's see if I remember the pages and then, page price, now let's save this quickly
and see in the front end if it´s working. Exactly! It's working, 50 pages 5.000 not too shabby... Now, let's keep adding this. What you need
to do now, is come here and add a plus sign and let's copy this so we don't have to write
it again and paste it in front of the plus sign... ...and now, we only need to change here
for languages, and language price.... Okay... Let's save and see in the front end. YESS, it's adding up... Pretty cool!!! We have our basic, form already... It´s working, let's just keep adding these
fields and then we'll do the conditional. Uh option here to only show when we click on
the online store... okay, here let's keep adding, now, what we can do is just copy this and a plus sign and paste. Here,
I'm pretty sure that this is the contact form... Let's just confirm that, contact form, YES!! This one is custom 4.04, this one
is photo gallery and it captures the google map and blog. Let's see if I remember all of them.. I already have the contact form let's copy, including
the plus sign. Okay, let's paste and change here to custom under score 404, paste
it again and change this to photo calorie... Paste it again, and change this to lead
capture past it again here is the google map, place it one last time and here, is a block. Okay, let's save it and let's see if it's
still working or if, we broke something.. Okay, this is working, it added 100,
100 more another 100... okay. Perfect!!! AWESOME... It's working the calculation.. now
what we can do is simply, grab this hmm this uh, let's first, duplicate
this one because, this is for the let's put it here sometimes it's
hard to arrange things and you can put columns inside of columns, so be careful!
With that now let's duplicate this one, and drop it on here... Here we change to online... store features, okay perfect!! Now this is where start to get interesting, let's choose this, this section and go to advanced, and conditional
logic, which is enabled and we need to use the form ID. So don't forget, the form ID from energy must always be the same... Let's add a condition, if what kind of website do, oh... I have a typo
here. Hmm, I just realized that!! Let's change this quickly. Hmm, what kind of website, or what
type of website, oops you want?! Okay, type of website... Let's go back here to this section, and let's
choose what type of website this field equals string, and here is where we write on line store.
Where we go to get this value, this value is the value for this button. If you remember, we
added on this item the value "online store". Okay, let's save this and let's see if it's working... Okay, the title is not showing as you can see and
if you choose "yes" it shows. If we click here let's see if everything's still working... YES... pretty, pretty good! Let's go back to the to the forum and let's do the same to this section, let's hide
it as well, advanced conditional logic enable... Let's see if i have this... Yes, I have it
on place. Let's add another condition... What type of website do you want, equals string...
online store let's save it and let's view it again. It's not showing when we click,
it's showing and is already adding... All these prices because well this is not
adding because we haven't changed this yet. But this is okay let's go here and start changing this content, because this is different it's not going to be how many pages is going to be, but
how many products, because products are specific to an online store. Okay, let's leave it at 50. You can change the quantity for whatever you want. Here, let's write products and don't forget that we have here
also the hidden element for the price of the products. Let's change this to ...
Okay, so this here is how many products, and let's put here... product price... Product price! Okay, here let's change this,
start languages we already have on top, let's put how many payment options, can
be another good option to have here... Your club, your customer might want
just one payment option, or six, or even more. I just have six over here,
uh here let's write payment options, and in the hidden field let's change to
how many payment options. This doesn't have to be exactly the same, I´ll just make it the
same, so I know that this refers to this. Okay, here we can put payment price let's confirm...
What we put here product price, payment, price okay! Here we will not need as many, so
let's start deleting some of this ... Let's leave it just three, you can keep it six
if you have more options but i'm just using three in this example. uhh... okay sorry hmm,
now here let's add custom store design... Here we can custom... design, and this one let's put... just pages, because it will be custom client pages okay?!
The last one let's put: email design... Here in the label let's write "custom
email design"... Oay, let's save this and now that we´ve changed all the values we just need
to add this to our calculation, in this field. let's add these multipliers first let's go here, to
the beginning and copy this let's multiply here next field let's go to the end and add the plus sign and paste that. Over here... Now this will be,
products products and here will be, product price. Not sure how to save this...
Let's just confirm products ... Yes, and here is product price okay... Here will be
language, now payment options and payment price. Let's add that again, let's go to the end copy this and paste. This will be payment options
and in the end it will be payment price. Payment price, let's save this and let's test
it out let's see if we didn't brake anything ... Okay, it's showing now it has 800, because it's
adding all these four because one is the minimum. It's working, it's adding over here as well.
Pretty Awesome, everything works let's see. That's good pricing, this still works... okay, we just
need to add these three more and we are set to go! Let's choose this to see the field ID, custom design this one, custom
pages and this is email design... We just need one of these fields option, let's
go to the end add a plus sign and it will be custom design, another one, this will be
custom pages... I think ...and here will be, email design let's save and let's
just confirm here custom pages here ... Let's see in front end if it's working, okay... Perfect!! All is working, we choose
online store and it's still working. Okay, okay... So that's it, all we have to do now
is add the submit button. We can do that, over here let's just duplicate this column... Let's
delete this field over here and add a submit field. This submit field, let's make it alignment right, center now, right and let's go to advanced
padding 10 or maybe 20, just to make it centered. ...okay, looking good. Here in the submit
button we can style this a little bit, let's make the background this beautiful, beautiful color here... and on over, you can use the same color, but we can make it lighter, so it just has a subtle
effect... Okay, let's save and one thing that I forgot, You already guessed it, it is
the form ID. It must be the same and that's it! You can change the button text
here too. uhh, submit is okay, but you can also change it for whatever you want to. You can add an icon. I´m not doing that here... Action after submit is email, we can add email to to receive... uh to
send one for you and one for the client. I'm just adding one for me, and then here on the
email, you change the where. The submission go and that's it... We save this and now the only thing
that we need to do... You can save this and now let's go back to WordPress.. Let's go over here and copy this short code and let's go to our page oxygen added with oxygen...
We are almost in an hour, it's taking too long hmm.. Now we are here in the oxygen, in
the model and we can add a shortcut. Let's add a short code here and paste that
short code, inside it will look broken, but trust me it will look great on... on the front end. Let's take a look here we go let's click yes, we have some we need,
to give it some padding but yeah it's working... Okay we need to solve this, my website... I'm not using a model I'm using
an off canvas but I think, of course this is an exclusive to roxy extras... Let me see that
of canvas, here we don't have enough canvas built-in in oxygen so let's try to
fix this with the model. To model content styles let's put this line to the left and then let's add some sizing and spacing. Let's add some
padding, 30 pixels let's see if this worked. Now you can see here in the back end,
yes we have the padding, but we have one problem over here... Let's make sure our short code has 100. Okay... Now what we need to do is, go to the
model and I think we need to go to layout, and overflow scroll... Yeah, I think that's it
that will do the trick! I'm hoping... Let's refresh, click here and if we yes we can
scroll if it goes bigger than this ... Okay, that's it now let's just do one
more test, uh... let's close this and let's inspect it... and make this mobile view, not mobile.
Let's see in iPad pro... Okay, when we click here this, is all messed up... So, let's fix this...
We can go back to Piotnet forms, uh let's edit with Piotnet, and Piotnet is so awesome, that it helps you be responsive...
and so let's see what we can do here, we can this element... on the tablet view instead of having 33 percent let's make it 50 and let's do
this to all of them. Advanced sizing 50, the same here that's size 50. I should probably speed up because
this is this will be boring for you... You already know what I'm
doing so, the same on these ones, 15. Here 50 as well advanced with 50 and
right here just 50. Okay, looking good... Now let's see in the mobile view, on mobile review, what we can do, we can make
this column 100 and now everything looks fine. I guess we could make all
of them 100, but uh it will not do it. I´m not going to do this right now, you can do it if you want to. Let's put this 100 okay?! So far so good, everything is looking fine on
mobile version, maybe these fields can be 100 as well... and that's it. I hope you´ve enjoyed it... Hmm, let's
see on the front end again, let's refresh this, uh... click calculate price and here it is! A little more feasible, let's make
this 100 so we can see it better... Yeah... Okay, guys this is it. uh... Thank you for watching and make sure you subscribe to my channel. I will
try to do at least one tutorial per week, it will be only tutorials for oxygen and for other
WordPress plugins, some design tutorials as well... and that's it. Make sure to subscribe please and click the the bell icon, so you get notified every time I drop a new tutorial.
Thank you and enjoy the rest of your week
