Tip:
Highlight text to annotate it
X
Forms on web pages are used for letting your guests
submit information to you.
The form could be for signing up for a contest, tipping a friend
on a cool page, or perhaps just for sending in a question
or comment along with your name and e-mail.
In fact, with Tangora's form module, you can build a form
based on any grouping of questions that you can come up with.
You have total power over the configuration
and the configuration is all point and click.
Forms can be an element in a complex chain of functionality.
But in its most simple aspect, forms with Tangora's form module
are very easy to set up, and a straightforward approach
to gathering data.
In this video, we'll be creating a page for a contact form.
The form itself has already been created centrally, that is to say
we've already created each question. So what we'll be doing
now is taking the form into use by creating a form page and
positioning these questions.
The contact form we'll be using was created
under the 'Modules > form' area, and right now I'm in the interface
where I'll have an overview of my submissions, though we can see
that there are none so far.
To create a page to allow visitors to submit their
contact information, I'll go into my page tree, and find a page
that I actually created beforehand called 'Contact', right-click
and choose 'properties'. Here, I am brought to the same interface
that I got when I created the page.
Under the 'change page type' setting, we'll see that I can
change the page type to 'Form', and this option appears because
I've already defined one or more forms under the 'modules > forms' area.
Then I'll just hit okay, and now I'll notice that there's a point
called 'settings'. On any given function page in Tangora, we'll
find the settings for our functionality there where we've
placed our 'primary' section in our page layout.
When I click on 'settings', I get an interface where I need to choose
which form I want to base this page on. You may have several
to choose from. And then I'll hit 'okay'.
The interface I see now has changed. There are four tabs
where the display of my form is configured. Under the 'General' tab
I have among my choices 'layout > edit layout'.
When I click on this, I get a new window where I define my layout
and I'm met with the layout wizard which will help me
to make my layout.
There are three steps.
So first, I'll just choose the relevant fields I want here.
If, for example, I didn't want to collect information on
the visitor's company, I could skip them over, but I actually want
them all, so I'll just hit 'Next'. Then, I'll choose the order
by dragging and dropping. Now, actually the order happened
to be just fine in this case so I'll just return the order
to how it was and hit 'Next'. Finally, I need to choose which
layout I want to use. These layouts determine where the label will be
positioned in relation to the fields. I'll choose 'Labels in front'
and then hit 'Exit', and as you can see, my layout is now created.
I could by the way run the wizard again by choosing the Tangora button
and 'Wizard'. So at this point I could actually save the layout
close the layout window, and if I view the page live now on my site
I'll see that I can submit some information.
In fact, I'll do so now
and then we'll see that we get
a thank-you screen, which we'll configure in just a bit.
Back in Tangora then, I can return to the 'modules' area
under the specific form in the 'form' area.
And we can see the information displayed here, that I've just
sent in, and I can double click to view all the information collected.
So in just a few short steps and a very short span of time
we've created a complete functioning form page. We're now ready to add
a little finesse. First off, I want to show you how to send
the visitor's submission as an e-mail to your organization
to the form's sender, or to you both.
Here back in my form page under 'settings', I have a tab
called 'e-mail'. I activate the feature by writing a sender e-mail
in the field here at the top here.
This should ideally be a real e-mail at your organization, though whether
or not you use this e-mail for further correspondence with
your guests is your choice and can just be indicated
in your communication.
You can add a name by just adding the name in parentheses.
So, for example here, I'll just use info@frezz.com, and put 'Frezz'
in parentheses like this.
The next two fields are 'external recipient' and 'internal recipient'
which are your visitor and your organization respectively.
In order for your visitor to receive an e-mail, they need to submit
a valid e-mail, and the e-mail field is defined centrally in the
module area in the given form. Internal recipient is just
handwritten, and you can add various addresses simply by adding
a comma between the addresses.
Field-dependent distribution is an advanced feature which allows
e-mails to be sent to different internal recipients depending on
the nature of your visitor's submission.
We'll skip over this feature for now.
Then we have the heading, that is to say the subject line of
the e-mail that is sent, and finally the contents of the e-mail.
Here, the system automatically generates a suggestion to your text
which you can modify. And here, you'll notice a bunch of words
with curly braces around them, like 'name', 'e-mail', and 'position'.
These are so called merge fields, which are stand-ins that get
replaced by the actual data which has been submitted by the sender.
I can automatically conjure these merge fields by right clicking
and choosing merge-fields, which would be relevant if I were
rewriting the whole message from scratch, or perhaps if I wanted
to just repeat 'name' for example.
And now I'm done.
There are a couple of other functional details that I want
to adjust here. I want to give my visitors feedback in the event
that they've made a mistake in their form submission, and introduce you
to the concept of required fields.
And then I want to show you how to modify on-screen messages to your
visitors that they receive after they've submitted a form.
Back on my form page, under 'settings' and the 'general' tab
I have a point here for 'error text', and one for 'after submission'.
'Error text' is to indicate that there's an error in your visitor's
form submission. An error occurs when a field has not been filled in
correctly, or that a field has been designated as
required and has not been filled in.
The process of checking for errors is often called form validation.
Let me explain by returning to the front-end display of my form page.
A classic example of a field that might not be filled in correctly
is an e-mail which doesn't comply with the rules for e-mail syntax
and Tangora can automatically see if it does or not. So let's say
I entered a name, and then entered my last name in the e-mail field
by mistake, and try and submit.
Well the system gives me an error message.
If I correct this and hit send
then I still get an error message, and the reason for this is
that there're some fields which I need to fill out in order
to submit the form. Once I've filled in all of the required fields
I'll then get a thank you message.
Back on our form page under 'settings', I can configure my
error message by clicking on 'edit section' next to the
'error text' option, and here I have an interface where I can modify
or add sections which you'll be familiar with from page editing
and page layouts. In order to modify the existing
system default message then
I'll just hit the pencil icon and then modify the text.
Maybe I want it bold and red.
Then I'll hit 'Ok' at the bottom, and then I can simply
close the window. To change the thank you text
the visitor gets after submission, we'll repeat the same process.
A little tip here is that you'll often want to have the same
or a similar message to the e-mail which you've configured, so we might
just copy and paste that content.
Okay, so now we're actually done with our basic configuration
but allow me just to round out our discussion and mention a few more
options, and quickly give you a little context about the centrally
defined form in relation to form pages, before later on we'll look
into the topic of designing our form.
Okay, just quickly here, the 'Security' tab here refers to what
kind of data can be sent, specifically if html or scripts
can be submitted. Just leave it at the default, unless you know that
you have particular needs one way or the other.
The 'Fields' tab allows you to change the attributes of a selected field.
So if I wanted to change the heading of a given field, I could choose
to do it here. I can also change if a field was optional or not.
So let's say that we wanted to change 'notes' to be optional.
I'll just remove the asterisk, which I've opted to use to indicate
a required field, and then remove the checkmark from 'mandatory'
and the deed is done.
I can actually access the same on-page settings through my layout
if I prefer. If I open my layout and then click on the 'notes' field
which we just adjusted, then we'll see that we can access the
same interface by clicking on the fields button. This is the same
setting, so if I changed it here again, it would be reflected in the
'fields' tab settings, though not in the central settings in the form's
definition under the 'forms' module.
Now this interface we've gotten when we adjusted is actually
the same interface as when you define the fields centrally
in the forms module. We can access the form, by the way, under the
'general' tab under the 'form' setting. So that'll bring us back
to our central submission's overview. Here I also have a point called design
where I can centrally define the same settings that I've
just shown you, as we've adjusted locally on the page.
So now that we've finished with our discussion of the form page
configuration, let's modify the layout of our form slightly.
In our discussion of form layouts, I'm going to introduce you to
Visual Designer templates, which control the way your field headers
behave in relation to your fields.
The form we've created using the wizard is quite nice really
but there are a few details here that I want to sort out.
First off, I'd prefer the send button to be in the lower
right-hand corner. And then I have a little problem here, and that is
that the 'Area of interest' header is on two lines, and I'd actually
prefer to have it on one.
So to modify our layout, here under the 'general' tab of our form page's
settings, I'll hit 'edit layout' by 'layout', and then we access
our layout. And here I can do any number of operations with
Visual Designer. So I can reorder my fields, add margin and padding
and what not. So for that send button, I can just take a hold
of it, and give it a margin-left. If I wanted absolute
pixel perfection, I could do a bit more research as to exactly how many
pixels this should be, but as you can see here, I can adjust
the number of pixels visually using the apply button.
And that will bring me to the same place.
So now I have that 'area of interest' headline, which I want to get
on one line. To tackle this problem, I'll need to change the
Visual Designer 'template' being used. I'll click off to the
gray background, and then I'll click in the area of my form, and you'll
see that there's a blue box that appears here. This is a
Visual Designer 'template' which was automatically created
when I ran the wizard.
Under the context sensitive 'template' tab that appears then
I can make my adjustments. Here, we have a list of different
configurations in our library which you'll recognize from step 3
in our wizard, and if I wanted to modify one of these, I'd need to
choose 'create new > create copy of selected template'.
Or we can do it from scratch if we'd prefer.
What I'm presented with then is our template designer. Here under
the first tab, I can give it a name, and then I can choose whether
to keep it local, so it can only be used on this page, or global.
If I choose global, then I can also choose to make it accessible in
my wizard, as one among the choices in our global library.
Then I have 5 more tabs. I won't go into details here, but I will
mention that 'panel' relates to the entire area of our template
'box' relates to each field, both the header and the field itself.
'Heading' relates to the field headers.
And here's where I'll change the width from 10 ems to maybe 15
and you can see that that solves our problem. 'Content' refers
to what's in the fields.
Finally, 'advanced' gives us some typographies, so-called CSS
where we can modify if we have some advanced needs.
We've just gone through a basic form page setup, and we've see
that you have complete control, and that it's super easy to use.
To master the topic of forms, you'll also need to learn how
to create a central form that can be used to create form pages.
You'll also do well to learn about how the forms module works together
with other Tangora modules, such as, for example, the 'external users'
or 'database' modules, and indeed with Tangora's
'Application Constructor'
where forms are an important building block for creating
more advanced setups.
There are also several modules that have their own built-in forms.
So it will also be important to know, for example, that you use
the newsletter built-in forms to make newsletter sign-up pages.
But as you learn about each module, you'll be tipped off as to
whether there are built-in forms or not.
Thank you for watching.