Learn how to create beautiful forms, with the ultimate drag & drop WordPress form builder. No coding. Complete control.
In this tutorial you’ll learn how to:
✔︎ Control your form layout, spacing and structure
✔︎ Collect any type of data using 15+ different fields
✔︎ Have pixel perfect control over fields, buttons, backgrounds and other form elements
✔︎ Use actions after submit for redirects, 3rd party marketing integrations & CRM services
✔︎ And much more!
hi-oh zip from Elemental today I’ll show
you how to use elementals visual form
builder a powerful tool that helps you
build complete and beautiful online
forms in minutes without using any code
use it to collect different types of
data by using dedicated fields and
integrate it with powerful marketing
automation and CRM services to help
streamline your workflow you can even
add advanced form fields allowing you to
create dynamic forms extremely fast so
let’s dive in and check it out go ahead
and search for the form widget then drag
it to where you like let’s start off in
the form field drop down and the content
where we can give the form a name and
have a list of all the fields in the
form you can easily duplicate the fields
or delete them like sir and drag between
them to change the order
add as many fields as you want by
clicking here
to edit a field simply click on it and
all its settings are displayed here you
can change the type to collect more than
just names emails and text you can even
add a step field turning it into a multi
step form will soon go over all of them
change the label and placeholder text
over here make sure to fill in the label
field even if you decide to hide it for
design purposes because it’s displayed
in the mail you receive when someone
submits the form the placeholder text
appears inside the field to help guide
the visitor I’ll leave it empty for my
design here we can set the field to be a
required one and switch on the required
mark like so indicating it must be
filled out before submitting the form
you can also control the layout of your
form by using the column width setting
to set the exact width of the field by
percentage let’s place the first two
fields next to each other simply set
their column width to 50%
you
cool
as you can see for the textarea type we
can also set the amount of rose I’ll set
it to three
each item also has an advanced tab where
you can give it a unique ID and see the
shortcut if you need it
and over here we can change the input
size which sets the size of the fields
now like I mentioned let’s briefly go
over all field types before moving on to
the buttons drop-down we already went
over the text email and text area types
let’s check out the rest we have the URL
field type where the user can insert
their own link which is a standard fuel
type that also includes the label
placeholder required and column width
settings the tail type is standard too
and allows visitors to enter their phone
number the radio type allows you to give
visitors a list of options to choose
from simply enter each option in a
separate line
you can also set them to appear next to
each other like so
select is similar to the radio type only
the options appear as a drop-down
instead you can also allow the visitors
to select multiple options
set the rose
checkbox simply gives visitors multiple
options to choose from with the
acceptance type you can get a visitor to
opt in to your newsletter for example
you can also set it to be checked by
default
the number type is pretty
straightforward it allows your visitors
to enter a number in the field
you can also set restrictions on what
numbers are accepted if you want to
receive values between one and five set
the min to 1 and max to 5
make sure the label text makes things
clear for the visitor next we have date
which allows your visitors to choose a
date in a special date picker interface
you can set the date range over here
you can also choose to set the interface
to be native html5
time is similar to dead and gives the
option to choose a time
here you can also set the native html5
interface
the file upload type lets the visit to
choose one or more files from the device
storage you can set the max file size
aloud file types and the max amount of
files if you allow multiple files to be
uploaded next we have the password type
also pretty straightforward it defines a
password field where the characters are
automatically masked and for best
accessibility practices adding the label
here is advised
the HTML type allows you to add custom
HTML to your form simply paste it in and
you’re good to go you can also use
dynamic tags for more advanced settings
Hidden defines a hidden input field
which lets web developers include data
that cannot be seen or modified by
visitors when a form is submitted the
step type adds multi-step functionality
to your form making your long forms less
intimidating and easier to complete and
submit check out our multi-step forms
tutorial to see exactly how it works
okay almost done with the taps recapture
and recapture three help prevent spam by
adding an extra layer of security to
make sure your visitors are human to use
it you need to add the API key in
elemental integrations and complete the
setup process
lastly we can add a honeypot field to
the form which is a hidden field also
meant to prevent spam but they don’t
inconvenience users like with the
reCAPTCHA basically if a honeypot field
is filled in then the form is
confidently rejected as spam because
valid users can’t see the field meaning
a spambot try to get lucky
time to move on to the buttons drop-down
where we can choose a size
set its column width
and alignment
next we have the steps buttons so if you
are building a multi-step form go ahead
and change the button Texas over here
the submit button you can change the
text choose or upload an icon
set the icon position
and the spacing
in actions after submit you can add
actions that will be performed after a
visitor submits the form choosing an
action will add its setting below for
example you can redirect to a certain
page or connect to a third-party
marketing platform such as MailChimp
there are multiple options to choose
from you can even set it to open or
close a pop-up
simply remove the actions like sir next
we have step settings which you can use
if you are creating a multi-step form
you can choose a type and a shape lastly
we have some additional options where
you can set a form ID and add some
custom messages okay now for the fan pot
let’s start styling in the form
drop-down you can set the columns gap as
well as the rows gap you can also
increase the label spacing
and change the text color
in typography you can style it even more
set the font family size wait transform
and a lot more here you can style your
HTML field if you set one before in the
field drop-down we can style it to our
liking for example we can set the
placeholder text color and typography
and here we can give it a background
color I’ll go ahead and drag the opacity
all the way down so it’s transparent
play around with the border color width
and radius to wreak ustym eyes the look
time to style the buttons we can set the
typography
add a border by setting the type and
width
set the background
and text colors for the submit button or
the next button in case you’re building
a multi-step form then you can style
your previous button as well
you can customize the button even more
with the border areas
and text petting settings
next if you are using custom messages
like I showed before you can style them
over here
and lastly play around with the styling
options in the steps drop-down to really
make your multi-step form stand out and
convert much better well that’s it now
you know how to use elementals powerful
visual form builder and use it to build
complete and beautiful online forms in
minutes without using any code have fun
playing around and don’t forget to
subscribe to our YouTube channel for
more tips and tutorials ciao for now
