How to Customize Webflow Forms with Select.js

please don't give up me

as i'm walking to your place i'm shaking

i am picturing the worst in my mind

i cannot stand in my please don't give up on me it's like you almost know it cause you're the best cause you're the best this thing so how hey hello do um

unmute your mic nelson thank you

lucy here probably colleen said

check sound thank you colleen

thank you everyone in chat room let's

start this again shall we

and go hey everyone welcome to another

weekly pixel geek live stream i'm your

host nelson thank you for joining me

um yeah it's been a

busy busy week for uh for me

and the rest of the pixel geek team but

before we get into that

how was your week um how are you and

um more importantly where are you

watching from

uh so i want to say hi to people in the

chat room right now we have sean

john junio and um

oli w adele benjamin

christian is here uh pablo is back

20g creative is back christian

yes yes welcome welcome uh where are you

all

from where are you all from and how was

your week

so if you're watching live stream thank

you so much if you're

uh if you don't want to chime in a live

chat that's totally fine at least you're

here hopefully you're learning something

and if you're watching a recording of

this

thank you thank you for clicking on the

video and supporting this channel

uh let's see here we got dallas texas

brazil's in the house

two people from dallas hey john 20g

creative you guys should

work together on a webflow project or a

challenge or something

um we have toronto here

austin texas okay texas is in the house

three people

nice awesome awesome

london sorry i didn't mention before

uh adele is from france welcome

that's awesome

los angeles okay french dude living in

los angeles

nice scotland well i hope you are

all are doing well staying safe

masking up and um staying healthy

i mean we're all gonna get this through

this together

and we just need to you know help each

other out india

dernam durham yeah durham

welcome okay so what are we talking

about

today uh we'll be going over how to

customize

your webflow forms i i still

see some of these questions pop up on

twitter and on

um other social media and other uh

webflow

communities so i'm like okay might as

well make a video about it just to

to help people with this knowledge um

let me see here

all right so but before we get into that

uh let's talk about what happened this

week

and what happened was

we did our visual dev course beta

and um so what it was

is uh a whole

week of teaching people who

aren't really uh familiar with webflow

yet

haven't used it um completely or they

would like

so i had one student who'd never opened

it ever before i had another who was a

marketer

or who she was a marketer um

and uh she would tell developers

she would tell developers what the specs

are and what to do but then she wouldn't

do it herself and she wanted to learn

how to do stuff

herself and another person who is a

graphic designer who's

dabbled with webflow but still didn't

understand the concepts and so

the whole point of it was to teach

people

how to use webflow but first starting

with the concepts of what is html really

what is css

all the way to now you understand

how to build things in webflow with

um collections and make it responsive

and when to use these certain css styles

and they were able to understand that

and it was very amazing and empowering

and it was just

so so fun and

um i really i can't wait to see what

they build

so now that we've finished that we're

going to look through our own notes

and polish the course and

open it up to more people so it's a live

course

four hours a day monday through friday

that's 20 hours

of of live learning where i teach you

live and if you have any questions i

will answer them

live with you all right so this is not a

pre-recorded course

this is just like my live streams but

it's an intense

five day 20 hour course

and we're going to open that up to

around i think 20 seats

sometime in february all right so it's a

beginner course to teach you

all the concepts the basics of web

design and web flow

in 20 hours all right so be on the

lookout for when we open those seats

and if that works we're going to do

another one for advanced stuff like

webflow e-commerce webflow integrations

with zapier

um webflow integrations with member

stacks so you can make a membership

site and how to connect that with circle

um a community chat board

um and how to start um letting people

pay for memberships kind of like on

pixelgeek.com

right now everything that i know oh

including

webflow interaction that'll be the

advanced course so what i'm trying to do

is

show you give off the knowledge of

everything that i've learned in my past

20 years of web design and past seven

years

of webflow give that all to you

in a live format 20 hours

so um that's what's happening that's the

roadmap and if that works

how do you do how do you run a business

using webflow

um yeah so there's the roadmap

and i hope you will join us for

the first live course when it comes out

in february all right so yeah that's

that's what happened and man

that was a great week so yeah listen

here bca hey nelson

welcome rage my dream made it to a live

stream yeah

you made it uh where are you from rage

camilla is here

abdul nice nice

another announcement uh

just want to sit shout out to

mackenzie child who launched a

free clonable framework

called hatch dude is

so good with um

he is so where am i there i am he's

really really good when it comes to

illustrations i'm looking at that bird

i'm like

that is so cute that is so cute

and it makes sense why he's calling it

hatch because his brand is flo

flowmingo.co

so i mean you can clone this right now

i strongly suggest you clone it right

now like open up a new tab

clone it right now um if colleen you can

put the link in the chat

clone this right now because he's going

to lock it down

sometime soon and it'll be a paid for

cloneable template so get it now just

and so that way you don't have to pay

for it

all right and so it's a nice style guide

a nice framework

to help you um you know

help you get started faster with your

with your webflow projects

so let me see here project setup so yeah

he already has class names for you

um if you go to documentation you can

see everything

uh mckenzie okay so

here we go so it takes you to a notion

page and it shows you

how to use all the class names

man he got really oh wow that's really

detailed

this guy worked he worked

what is going on okay yeah

so even if you're not gonna use it just

clone it still and you may use it in the

future

so big ups to mackenzie

check out flomingo.co

really good person really really good

person

all right we're done with announcements

let's get into the tutorial let's go

and figure out what are we doing i don't

know

just kidding we're playing around with

webflow forms

all right so what is the first thing to

talk about hold on gotta go to my notes

ah okay so

there's uh two ways to get a form onto

your page

the easiest way is

going to layouts right here

so add elements panel layouts and

you have your contact form drag that in

cool you're done publish your site go

home

do whatever you're done all right

there's that

or if you want to further customize it

as far as the layout goes you can

go to add elements panel and drag in a

form block

and so form block compared to

a pre-built layout form is

very baseline it's like you you get your

form block

you get your field label your text field

yeah so there's two ways to start on

your form

obviously the pre-built layout way

is much much much more better

right so we have this here and

as far as this pre-built layout goes it

has

a section a container and then all this

content

that you can just double click and

change all right

as far as the layout goes for this it's

actually

inside of a grid and that's how you have

these

two columns so you have first name last

name email phone number

and why does this message take up

both columns it's because it's spanning

two columns so with grid you can do call

spans

okay column span two

or if i wanted to go one i can just drag

that

uh corner handle and there you go

all right and the cool thing about this

pre-built layout is

it saves so much time especially when it

comes to responsive

because if i go here boom it's already

responsive

so let's preview

so yeah

all right so there's that um

yeah and also if you have any questions

during this tutorial ask them in the

live chat

and colleen will jot it down for me and

i'll answer it after the tutorial

or if you have a project that you're

working on

and you need help with it share your

read only link

okay share your read only link or your

finished

uh website link and i will review it or

help you out with

whatever you need help out with in in

your project

all right so we have that contact form

and that's all done and if you want to

add

more fields like for example

if you want to add another field you

have a bunch of

options right here so another label

input or even a select field so if i

drag a select field

in here there we go

okay so i have this select field here

and that select field

to edit the choices for that drop down i

would go

on the element settings element settings

page or tab okay

so that's that now

there's still some people who do not

know that you can play around with the

styles of the placeholder

so what is a placeholder so it's usually

text that is inside

of a text box input text box

that you can overwrite so for example if

i click on the cog

i can say type your first

name here okay

and as you can see it's

like the opacity is kind of faint

compared to

this black and so if i start typing

it goes away if i delete it

then that placeholder comes back but

what if you want a different

type of placeholder style you can go to

your text field

and give it a class name we're going to

call it

text input oh sorry

you call it text input and then

this drop down because it's a form field

it has this new state called placeholder

so i can click on that and then i get

this green class

so it's a special class a special combo

class

and then i can style this however i want

you know like what if i want

the text input to be red you know or

faint red something like this

you know or make it big

for some reason i don't know why

and so if i start typing inside of it it

goes away

so this style of the placeholder

will not be the same style as the type

that is actually being added into the

box

okay so placeholder

really simple all right let's see here

okay um another thing

uh you can do with your forms

is you can have so we have a drop down

field right if someone wants to select a

choice

they can but then

webflow has this option right here where

you can let people select multiple

right so people can select multiple

in that in that field so

if i click on one

that's the problem though i can only

click on one

the only way to click multiple to choose

multiple

is to hold control or uh or command

on your keyboard but like that's such a

that's such a bad user experience you

know

so how do we fix this with custom code

now don't worry i'll break it down for

you as simple as possible

i know that uh webflow is a no code tool

but there are times like this where low

code

can really help the user experience all

right

so what i'm going to use is this thing

called select

two okay and select two

is a way to um let me see here let me

get an example

select two is a way for multi-select to

make it look

better so for example see we have a

bunch of

states okay and um

what if i want to choose multiple states

okay so let me just choose the first one

one

two that much that's much better rather

than having to hold control

or sorry um yeah control or command

and then users can actually

deselect or remove certain items

all right so i will show you how to

add this to your webflow project right

now

okay so we got we have our select field

and we have allow multiple selection

turned on

now let's go to our select field and

let's name it let's give it a name

we'll call it um my

select field

okay why does it do that

so my select field is the name of this

that's the

the name of this box so what i'm going

to do

is go to select2.org

and then

copy this code right here so i'm gonna

copy it

these two lines and i'm gonna paste it

into my pages

header tag okay so in the custom code

i'm going to paste it in the header tag

save so what does these two lines mean

it's basically bringing in their own

custom

css and the javascript the magical

javascript that'll make this happen

all right so yeah save

we're done with that part and now

uh we're done with that we're gonna go

basic use

usage and multi-select box and

um right there the last

part right here so this is saying

when the when the web page is done

loading

that's what this means when the page is

done loading when the page is ready

do something okay and so what is that

something that something is

find a class name

um find an element with this class name

and then do the magical javascripty

stuff

that makes this happen there it is so

when the page is ready

do magical things to this element so i'm

going to copy this

oops

so i'm going to copy that piece of code

go back to my pages panel

and paste it at the end body tag oops

yeah paste it at the end body tag

and i need to wrap this with the word

script

the reason why is because we need to

tell

the the computer hey i have some

javascript right here

and so the computer be like okay cool

tell me what that javascript is

well that javascript is when the page is

ready

do something and what is that something

well

find a thing called my select

field and do that

beautiful magical javascript stuff that

someone already coded and i don't want

to do

cool save publish

and you're done let's take a look

and it didn't work yay why

select two is not a function yeah it is

uh yeah it is

great stream nelson thanks

oh wait did i no no that's right

i pull this in

wait my script is in there yeah just

deliver

select two is not a function

i did it on pixel geek website

uh what

all right fail stream

let me go look on the pixel geek website

i

uh i'm pulling up the pixel geek

community website right now

hold on pixel geek

pixel dash geek dash community

let me see here where did i

do it on i forget is it content

submission

is it this cat yeah it's the tags so i

have tags

oh okay so i put the javascript at the

end okay

there's my problem so this part right

here that they told you to put in the

head

it's supposed to be in the footer so

the css is the only thing that goes into

the head tag

and then right here in the end body tag

that's where i would put that magical

javascript

hopefully this works

yes it did work okay

cool so if i click here

into this box there we go now it's

much easier much much more easier and

more

friendly to the eyes okay so what did we

learn

we learned that you need to name your

field

your multi-select field name it

something

then take that code from select2.org

and paste the css line that css

line right here in the head tag you

paste the javascript line

right here in the end body tag and then

you own your own

then you add your own javascript which

is the

when the page is ready find my select

field

and then do the magical javascript stuff

and that's it

publish your site and you're good to go

cool

all right we got that one done let me go

into

chat and see what's going on

whoa that's a lot of people okay um

okay let's see here camille watching all

your videos and learning so much from

you and the webflow community

thank you i'm glad you're you're

learning

that's the whole point so actually

that's half of the point

if you can do me a favor please whatever

you

learn pass that forward to someone else

especially if you speak a language

either than english there's so much

opportunity out there

for tutorial for webflow tutorials to be

created

in different languages so kamel if

you speak something else do it

please pass that uh knowledge forward

all right uh sebastian hey what's the

best platform to pair up webflow forms

to get multiple responses

sent to multiple email addresses

i'm actually gonna go through that the

next step of this uh

form customization i'm gonna go into how

to connect

this form with zapier so yeah

yeah i will get into that i have some

questions about form integrations what

is the best way to link a webflow form

with hubspot zapier integromat or just

style the embed directly from hubspot

oh cool uh i'm gonna be talking about um

zapier uh not hubspot or integromat but

maybe you can take

these uh concepts

to hubspot in integromat

cool so i guess i'll just

move on all right

so let's let's go into that next part

zapier so let me pull up zapier real

quick on my computer

um login okay um

yeah we'll do that later hold on okay so

what do i need to do

hold on i'm thinking uh okay cool all right so we're here

with our form and what we want to do is

whenever

my apologies i don't understand quiet

you

um that was funny so whenever you

submit whenever someone submits

this form the form data by default

gets saved into your webflow project

okay it goes to the project settings

forms and your forms are saved

here in the form submission data you can

also have that form

send that data over to

uh any email address or multiple email

addresses

as you can see here where it says a

comma separated list of emails to send

form submissions to

so you can just be like something

at example.com something else

at example.com so you can put as many

email addresses as you want

the problem with this is

no matter what form if you have like

multiple forms

on your website no matter which form

that

um gets submitted all of that data will

go to all of these people

it doesn't matter which form you can

have a form for con for general contact

you can have a form for um uh

for business inquiries or press

inquiries like say you have three

different forms on your site

on three different pages once someone

submits

any of those forms it goes to this same

batch of people

you cannot reroute it um so yeah you can't reroute this

inside of webflow natively you can

use web webflow with a zapier

integration and that's what we're going

to go through right now

if you're not familiar with zapier

zapier is uh

the middle it's the middle platform

between

two platforms so from webflow you can

send that data to zapier and then from

zapier you can send it

to almost anywhere

like if you go to explore and you just

look at all the

there we go um over 2

000 apps that you can send your data to

sheets gmail slack i mean

it it goes on and on even as

sms you can send like

if someone submits a form send that data

to zapier and then have that data sent

to

your mom's phone as a text message i

don't know

or to your own phone as a text message

like uh

there's so many things you can you can

do

insta what's close trainerize

huh yeah just so many things

that you can you can send that data to

so zapier is really cool

all right so let's go ahead and um do

this

so before you start using zapier you

need to

submit you need to submit

fake data so that way

zapier has something to work with right

now you have an empty bucket

and so if you were to start zapier

zapper is gonna be okay cool where's the

data

and then you're telling them um you know

what

i have no data but do something it's

like

and zapier's gonna be like no all right

so uh give zapier fake data to work with

so

first name uh be like um

sarah last name connor

all right email address um

from the future at

example.com phone number

uh five five five five five five five

message i'll be back cool

submit

all right awesome i submitted it and if

i go here to my forms

uh settings in my project and press

submit or refresh

scroll down yay i have my data

cool sarah connor from the future first

there i'll be back

sweet wait i have extra fields

hmm i'll have to look in that later

anyways

so we have our fake data now we can go

to zapier

and zapier's free it's a freemium so you

can create zaps right now for free

and i would strongly suggest learning

zapier because it'll

such a great tool to have

right so i want to connect webflow

with uh an html

oop i want to do email

let's see here email by zapier

okay okay so

now it's like well okay what's the

trigger

when this happens okay so when a new

form submission happens

send an outbound email through zapier

okay use zap

let that load and so now webflow's like

okay cool

so which webflow account do you want me

to use

and i'm i'm going to use

the one that's what i named it

and so now after you connect your

connect connect your account with

zapier your webflow account with zapier

then you can search through

um your sites so

what's this one called nelson stunning

project

so that's the name of it

so i need to find it there we go

so i found the site that i'm working on

in the form name contact form

continue test trigger

and that part right there when i clicked

on test trigger that's when zapier is

like okay cool

let me look through this site right now

and see if there's any form

form submissions that i can work with if

you don't do that then

zap your zapier again will say i don't

know what to work with

so this is the part that i'm talking

about okay

so it has all my data that i just

submitted

cool now we can continue

so step two send an outbound email

so email by zapier

send outbound email continue that's what

i want and now we just connect the dots

we can send this data to someone

at example.com

okay and the subject line will be

whatever you want

and then this data right here in the

in the body of the email you start

making up an email hello there

here is the data from

the contact form that was just submitted

okay

and so now you can just put in whatever

like i want to put the name the

email of the person and then

the name of the per up the first name of

the person

space last name and so you're just like

making a template okay

and then also let's put in

um this field right here which is the

multi-select

and then lastly let's put a phone number

oh and the message

there we go so we have all of that and

so

all that information will get sent to

someone at example.com

and you can just press continue

and you can send a test test and

continue

and then once that's done you would turn

it on

okay and there you go so that's how to

send basically do the same thing that

webflow's doing right now

but through zapier but now we're going

to add

another form okay

so here's how we're going to do that

um let me go back to my designer

all right and let me copy and paste this

form

so i copy and paste this contact form

and let's call this

business

business business form okay

and so it has all the same fields

but the only thing that's different is

if i go to

the form block right here

and i look at the form name i want to

change this to

business form okay

now that that's done i'm going to

publish

refresh my page and now i have two forms

let's go ahead and start typing

something

johnny business email

uh i don't know

at example.com phone number

and then select fields we'll just do

third

and hey there for the

for the message i'm going to press

submit and there we go my business form

has been submitted so i've made

fake uh data so what i can do with this

um with this exact

uh zap is i can go back

press back

uh hold on i have to name it huh hold on

okay send outbound email okay cool

i have to know the name of my zap

where's that send outbound

i have so many zaps

there we go so what i can do is i can

just

make a copy of this

okay so i made a copy

wait send there we go

so i have two of them let me rename this

so this one we're gonna

ah i didn't want to do that sorry i just

wanted to rename

so i want to rename this to um

contact form

and then the copy i'm going to rename

this to

business form i'm going to go into this

zapier

and for the form submission the first

step

i'm going to set up the trigger and see

how i have the foreign name

contact form i'm going to change this

to business form continue

test the trigger it found my new data

then for this outbound

instead of this going to someone at

example.com

this one needs to go to business

inquiries

i don't know if i spell that right

whatever at example.com

so as you can see if i change the name

of the form let me show you where again

if i change the name of the form by

clicking on form block

and then going to the form name

i can tell zapier hey based on this form

send it to this one person if it's a

completely different form

use a different zap uh use a completely

different zap

that will send data to a completely

different person and so you can make as

many forms as you want

and have it routed to the right person

all right so that's

the that's the three things placeholder

styling styling your uh multi-select

uh drop-down field and connecting

multiple

web flow forms send and sending that

data out through zapier

to different people all right

cool let's go to chat

junio this tip on how to customize the

placeholder text

helped me a lot i broke my head so

already

broke your head huh well i'm glad to

help i mean see there's

like you'll never know who you'll help

even if you think

oh this information this knowledge that

i have about this one thing

like i'm not gonna tweet it out i'm not

gonna help

um i'm not gonna say it out loud or make

a tutorial about it because

it's so basic people already know no

there's a lot of people who don't know

so throw that knowledge whatever that

knowledge is

that will that might help you never know

so i mean placeholder to me was very

basic

but i felt like i needed to tell some

people because i saw that one person

didn't know about it

so how many other people don't there you

go

glad to help junio luke

welcome back luke pixel geek you've been

giving to the webflow community for

years and years

uh thank you for your efforts

i appreciate you you're welcome

unanswered question here we go so

sebastian hey

what's the best platform to pair up for

webflow forms to get multiple responses

sent to multiple well there you go

use zapier and pablo yeah that's how you

use zapier

um let's see here michael i know mubarak mubarak

could you perhaps show how to customize

a radio button

sure sure thing here we go all right so radio button for this

business form

let's go ahead actually on the contact

form because at the top

yeah you all can see now all right add

elements panel

radio button drag that in

to the this part right here this cell

and there we go

so you can

you know customize the text label

however you want

change font make it bigger

something like that um i can even set

these

to center oh nope not the grid child

uh set this to flex and have them

vertically

sent to note there it is vertically

centered

let's move this away all right so

there's

playing around with the layout and

playing around with the text but this

right here maybe this is what you're

talking about

there is a custom style i haven't used

this much but if you

if you click on c uh custom you can play

around with

some css stuff like let's see here

um radio button is there any extra

ah there we go so when you give that

radio button

a class name just like in the select

wait yeah just like in a text field form

how you get that placeholder and you can

style a placeholder

you have to give the radio button a

class name and then you

reveal this extra special combo class of

checked

so what does this look like when the

radio button is

checked so as you can see there it looks

hold on let me preview

oh man it looks like nothing because i

didn't style it

checked all right i mean let's make this

bigger hold on i can't

can't see what i'm doing let's make this

like 50 50.

there we go a big circle all right

we have a big circle and when it's

checked

what happens is webflow gives it

a border of four pixels

in that blue color so i can make this

even bigger

like that and give it a background color

of orange

because it's complementary complementary

to blue

preview and wait let me uncheck it

there we go so if i preview

it doesn't work why

hold on let me publish it and try it

again

there we go so it doesn't work inside of

webflow preview but if you

publish it you'll be able to see it

all right so that's how you customize

radio buttons

hopefully that makes sense so just to

recap

we gave our radio button a class name

and then we styled that class

um we styled that class with a width and

height of 50 pixels

ah geez sorry with my zooming

okay so we gave that with a height of 50

pixels

and then we revealed the special combo

class of

checked and then we played around with

that

with the background color and borders

okay and because this is just basic css

i mean i think

you can do gradients okay cool yeah you

can do gradients

you can do radial gradients or add in

a an image you know it's your world you

do what you want

but yeah so that's radio

hope that helps

okay michael collins do you have any

suggestions for getting around the

form elements do not have associated

labels accessibility error

when adding inputs in labels to the form

select and field label

okay so webflow has a new

um accessibility audit

feature which is really really good

because a lot of websites

aren't accessible um so

this is what i'm talking about right

here this is new so this is the audits

checker beta

so if i open it it shows you um

if there's any issues for

um accessibility so the

labels are already done for us

so i'm wondering

because i haven't used it yet i haven't

used that auditor yet

so i need to see that um

i need to see that issue happening oh

okay cool

colleen says she just got the link all

right let me copy that link

copy link

nope nope

that's not what i want

there you go

that's what i want cool

okay oh okay so but

is this the label okay

if i do accessibility checker look it i

i don't see anything wrong everything's

fine i don't know do you not see the

do you get an error in here

because it looks fine

yeah that would be something that i also

need to explore because i

haven't used the odd um auditor yet just

came out

um but yeah i need to use that

ooh for this one client project i'm

working on right now

and they have a lot of images

all right moving on next question how do

we prevent

fake email submissions uh

like from bots and whatnot you would use

you would use recaptcha

era is in lighthouse

according to okay uh yeah

sorry michael i can't i can't answer the

question

yeah i need to look up more about select

fields and labels

because when i first started making

forms inside a webflow i'm like okay you

have a

label that's on top of a or

right before a input field cool but

maybe i'm doing it wrong

so i need to look that up all right last

two questions and we're done

with today's quick stream and the reason

why this was a quick stream

is because uh we started at 11 but at 10

o'clock

i did a private uh google meet with

um some pixel geek pro and pixel geek

members

so these are paid members of the

community and once or twice a month

i do a private uh sessions to help you

with

any questions you have or would help you

with any client projects you have or

just answer questions about web design

webflow in general

so i'm here to help you um so thanks

again to

those who are supporting the community

and for

you all um for being here so that's why

the

stream is short but yeah last

last questions here we go brian how do

we prevent

fake email submissions so webflow has

a integration or component

with recaptcha right recaptcha is that

thing

where where um you know

it checks if you're a robot so

yeah so all you would do is drag that in

to your project usually right above

yeah usually right above form cannot

have more than one recaption

there's none in there

that's strange try it again

huh okay well let me

no idea let me drag in another

a fresh form block and drag in a

recaptcha

okay that worked so when you're dragging

a recaptcha

you'll get this component all right and

then this

red thing that says site key must be set

in project settings forms

and so what this means is you need to

connect

this website with your google account

so that way you get a key so if i double

click this

go to form settings and so this is where

you would

put your site key and your secret key

for uh recaptcha

how to get those you can just register

for a key right here

and once you get that all squared away

paste those two things in here

and then enable it so the thing about

recapture though is

if you have multiple forms all over your

website

each form all of your forms need to have

that recaptcha component

in there if you only turn it on for one

then the other forms that

have uh that do not have a recaptcha

they will not work they will get an

error okay

but the one that does have recaptcha

will will work

so once you turn this on it has to be on

for

all your forms another thing about uh

recaptcha is you cannot style this

this is it you can't change the colors

you can't

even font doesn't nope you get this

style

you got to live with it all right so

just one of those things like do you

want spam mail

or do you want this that kind of breaks

your style

you don't want spam mail so just put it

in all right

all right last one last question giving

it to

20g can you show the new block

options the ones where each choice is a

button like for different variants

new block options what do you mean

are you talking about the thing i just

did earlier in the stream

with select two not sure

okay i'll take your question if you can

uh respond right away

um but let me go to hg web designs

question

is there a way that webflow verifies two

specified fields

email addresses contain equal values

oh no that would be javascript you would

have to do a javascript where it's like

hey if whatever is

inputted into this one text field is it

exactly the same as the one in the

second one

if so do something

so um i would

suggest looking for something like um

javascript checking

field checking form fields or something

like

that because in my head i'm thinking um

like if form field one

if form field one value

is equal to form field 2

value then do something

if not do something else

yeah so there's a way but there's custom

code and i don't have time for that

but bring that question next week and i

will answer it

if you still have that question all

right

um colleen

20g might be asking about e-commerce

oh 22 are you talking about e-commerce

it's different options like drop down

list

instead of buttons

um

yeah not sure what you mean

but also bring that that question

can you show the new block options the

one where each choice is a button like

for different variants

yeah not sure not sure in that question

okay so it is ecommerce so i haven't

played around with that new e-commerce

feature where

different product variants

have

different different buttons

but it is webflow.com

updates so this is what you are talking

about

came out last month so yeah you can

if you're doing webflow ecommerce and

you have a bunch of variants

it used to be you can only use a

drop-down

but now you can set it as buttons

yeah so um i think they have

do they have on webflow university variants oh yeah okay right here

so you yeah so right here

so when you drag in your options list

you can uh have either

a select field which is that drop down

or buttons

so that's all it is and

you can only add it to e-commerce forms

you cannot add it

to any other regular form okay

all right that's all the time

we have for today again i want to say

thank you to everyone who

who watches these streams who supports

this channel who supports the community

you all are wonderful and there's so

many great things

that lie ahead for pixel geek for

this community uh starting with the live

visual dev course i'm very grateful

that i had three students to help me i'm

very grateful that i had

uh three wonderful volunteers to help me

organize it it was so fun to do

very tiring but still so rewarding for

everyone involved

i hope if you want to learn more about

web design

and you're starting from scratch

or you you need to understand the

concepts of web design

the next courses opening in february

2021

will have around 20 seats available

so be on the lookout for my tweets

follow me on

uh the pixelgeek on twitter uh subscribe

to this youtube channel

uh i will announce more information

about that when it

comes by but uh yeah that's

it

appreciate you all so i'll see you next

time and as

always make the web beautiful together

see ya um you