Coffee Cup Form Builder Tutorial

Coffee Cup Form Builder is great tool for creating form quickly. It sends the form input to email or a data base. This tutorial demonstrates how to use it. Coffee Cup Form Builder was created by Mike Lively Director of A&S Instructional Design at Northern Kentucky University NKU.

---

Closed Caption:

hello this is Michael island from
Northern Kentucky University and today
we're going to talk about building web
forms we often have instructors come to
us and ask to put a form up on the web
and they can take a long time depending
on what they want us to do sometimes
days maybe weeks but there's a new piece
of software out there created by coffee
cup allows you to build forms a matter
of minutes and it's called coffee coffee
cup web form builder and it's a
relatively inexpensive you can buy for
about thirty nine dollars and it is a
drag-and-drop form builder and it will
send off an email or put that data into
an SQL database someone actually show
you the software and will produce a
small form with it it is intuitive which
means you look up here you can see
there's just a row of buttons and you
click and drag right on the state
whatever you need is a flash-based
system which builds an XML back in so
let's start a new form i'm going to go
ahead and just create a simple name
email gender input form bring a few text
boxes out on the stage just by clicking
the button you have text boxes and we'll
change the names here in a few minutes
let's just get our forum setup let's put
in some input box boxes and let's go
ahead and put in the robot buttons for
the gender
and finally we're going to want to have
a submit button so if you scroll over
here you can see at the top there's a
submit button
ok up i had damaged by accident let's go
ahead and submit and there's my spife
button lets go and put one more label up
here and now we can actually start to
change the labels and everything has
changed over by the left side of the
control panel here and I'm not changes
to some to my forum and let's go ahead
and increase it to 18 and put some
italicize on it
let's put an image in there just as soon
as it up a little bit so there's an
image button here and it just opens up a
file search and let's choose this image
right here a nice thing about images is
actually go behind the form elements so
if you want to have a large nice-looking
background you can just bring it in as
an image and set it behind the form
elements we won't do that in this case
so let's continue a little bit with this
form i'm going to change this name here
to name
let's move that over so you can see it
and the next one just click on the label
and over on the left side here i just
type in email and bring that over so you
can see it
let's work with our gender butts will
change this one to mail
excuse me female and we're going to name
it so that the database for the email
sees it as a female input peace and the
next one will change to mail
excuse me the text goes here
ok and the database late label or email
label goes here and notice both of those
are in Group one so it's actually
automatically group those together for
me now let's change the form elements so
the name i'm going to put his name and I
can actually require it to be filled in
by hitting the required button and the
next one is a email and I don't want to
validate this if i click that email you
see the coffee cup gives you automatic
validation almost done with our form we
can actually view and see what's going
to look like so lets it preview and that
will be our web form there and we just
built that in a matter of minutes so
that's really nice piece of software
just one more thing to do
let's go ahead and go to edit and go to
forum settings and this is where we can
actually set the email so i want to be
sent to me lightly m1 at nku de tu and
we can actually put a subject line here
and we just put my form you can also do
a copy or also blind copy on this tablet
you can also set to go to a my sequel
database and by checking this right
button right here it'll take you to a
database that you set up on your server
so what we'd have to do here is actually
go to your server create a database and
give it a name and a password and
username and we'll show you how to do
that in a upcoming video tutorial we
won't check that for now we'll just get
back off of that and go back to email
and we've got an email address in there
and hit OK and looks like our forum is
almost ready to go let's go ahead and
save it
and I'm so-called my form and i'll say
it right into coffee cut now right here
what coffee to cut those which is really
nice it gives you the ability to upload
the form director of the web from the
coffee cup softwares you don't need an
ftp program like dreamweaver filezilla
you can just use coffee cup nice feature
especially when you're making changes to
a form and you keep uploading new
versions so we won't use it right now
but i do want to open up and take a look
at the form that we created so I'm going
to my uploads folder and I'm going to
look in the coffee cup form folder and
there's my coffee come for right there
and now what's really unique here and I
think it's a great idea is that coffee
cup has produced this XML back in and
what this is actually doing its try to
open this up in wordpad or notepad it's
actually created all of the form buttons
in terms of xml so the flash will pull
that XML end and actually read what the
buttons are in place it on on the page
where they're supposed to go this is
really a great idea it we had a thought
about this and universities and we're
building our portfolios and coffee cup
has actually mastered this approach and
great piece of software i encourage it
you buy it and use it it'll save you
tons and tons of time