Click on any phrase to play the video from that point.
Hi, let's take a quick look at how Muse now includes
the ability to add a contact form natively within the application.
Here I am in Kevin's Koffee Kart.
I'm on the contact page.
I'm going to scroll on down. I'd like to add a simple Contact Us form here.
What I'll do is come over to the Widget Library,
and you'll notice we now have a forms section there.
What shows up here will probably change.
We're in the process of kind of updating some of the sample forms.
I'm going to go ahead and press and drag the simple contact form onto the canvas.
Now, you'll notice with this object selected
I'm going to have some interesting new capabilities around
how Muse interacts with the components.
With the widget selected I'll come up here in the control panel.
I see that the form is selected.
I can click on the blue icon here, which is going to expand
and show me specific options for this form.
I can come in and assign a name to the form.
Now, by default it's going to look to the active page name
and give it that.
I'll go ahead and call this contact Kevin.
It's also going to by default look at the Adobe ID
I use to log into Muse and associate that
as the default email address.
That's fine, but I also want Kevin to be able to receive
emails that come in to contact him,
so I'm going to send that to Kevin at Kevin's Koffee.
Additionally, I can make some decisions about what happens
once the form is sent, so after sending
it could either stay on the current page, and I can just put up a message
saying "File sent successfully"--I'll show you how that works--
or in the drop down I could actually choose from another page on the site.
Well, I've already gone in and under my contact page
I've created a confirmation page, so I'm going to have the form
resolve basically, redirect to that confirmation page
to let my user know that it was successfully submitted.
I also have Edit Together checked down here.
This is kind of interesting, especially around forms.
We'll try to see how that plays out a little bit.
From there if I click not just once but a second time
so I'm no longer selecting the entire form, I'm selecting a form field grouping here,
so I'm one level deeper, when I go to the Flyout menu
I get a different set of options.
Just to be clear about that, I'm now at a form field level.
If I hit Escape and go back up to a widget level,
the entire form level, I have the broader options.
I'll go on in and select that again.
In this area I can come in and decide
do I want to have a label?
Do I want to state what type of field there is?
And do I want message text around it?
Do I need a descriptor that talks about what's there?
You'll notice I have "Show Prompt Text When Empty."
This is kind of nice.
This allows me to give just some default hints
in the fields so that people know how to complete those fields appropriately.
You'll notice that name is required.
This form is going to blow into the Business Catalyst platform.
It is bound specifically to Business Catalyst's back-end database.
The HTML form I generate in Muse, that's pretty generic,
but we also include scripts that are appropriate to send the data
to the Adobe Business Catalyst platform, so this form is really
just going to work on Business Catalyst,
but it will allow you to have that streamlined workflow.
I'm going to go ahead and leave that default.
Actually, I probably want to come in and turn off message text.
I don't really need that.
Now, there's some interesting ways I mentioned around selection.
If I make changes to one sibling, one field,
it's going to apply to the other fields as well.
If I don't want that to happen I come up that level again,
and I disable Edit Together.
That will limit it for me.
I also can come in--I'm kind of experimenting with this.
If you come in and select an object, so this is considered a text input object,
if I right mouse on that object we now see "Select Same," and we let you know.
Select all the input fields.
Notice how it's selected just that type of form element.
Now, I've done a little bit of playing on my own with skinning
and styling this contact form.
That's truly the most exciting part of what we're talking about here.
There's no need to go in and mess around with any CSS styles.
There's no need to do HTML embedding,
any graphic styles, any text styles.
Let me just show you some of this, if I wanted to start fleshing this out.
Let's say I select--I'll go in and do that again, select all the input fields.
I know that I have some graphic styles, a tool tip rollover.
It's got a funny shadow. It's got a fill color.
But I could apply that to these fields.
Similarly I could come into the entire object, the entire form element
and go to paragraph styles and choose maybe body small,
a text style that I've created that would apply to all the components.
That ended up jumbling up things a little bit.
Let me undo, and we'll leave it with the default set.
Come on back here. Okay.
We'll let that--whoops, now I've really done it.
There you go. Okay.
But the thing that I do want to point out as you play a little bit
I could come into--for example, let's just look at the submit button.
It's a Muse component, so it's very flexible.
I could choose, for example, to not have a stroke, to not have a fill.
Instead I might want to choose--of course I'm going to have to put
my bicycle wheel from Kevin's Koffee Kart because
what do I ever put in the background of anything?
We'll grab that top nav over for a submit button.
It's a bit silly, but I just want to illustrate the fact
that this is like any other component you would expect within Muse,
and all of that flexibility is there, so as I'm working
I can come in and play with text.
I can play with the spacing associated with that text.
I can move this to content down.
I could come in and change it to be white, for example,
and I could even change it to be web font.
I could use Ubuntu, my favorite font,
and continue to fiddle around here a little bit.
Other things that are important to note about this form
that are different than things you've seen before.
I'm going to have to just let that be just like that.
If I come in and select an object here, let's go up to the root level,
we've now updated some of the information that is available
in the control panel, and one thing that we reflect in the control panel
is the states panel, so I'm going to show you a little bit of both of those there,
but let's go ahead and get the regular states panel open here as well.
Now, you'll notice that for this form I have a number of states,
so there is normal.
Submit is in progress.
See how it's going to let you know as the submission is taking place
that I can add some text there, that form message?
You'll also notice that my submit button sort of by default
greyed out, so there are states as with any other object in Muse.
When it's successfully submitted I can say "Thanks for submitting the form."
"It was successful," or "There was an error."
And I'm allowed to come in and visually
customize the look of this any way that I choose.
Back to the basic tenets of Muse, as a designer
there is structure we need to have you adhere to, but whenever possible
we allow you to have as much creative expression as possible.
If I come in to just one item, let's say my message field here,
I've got the empty state which is--
I could say "Tell Kevin how much you love his coffee."
And again, I could put a proper typeface on it if I'd like to.
Notice how that changed all the containers,
and that's because Edit Together has been selected.
That's good. I don't mind that.
But I've got that empty state.
When it's not empty whatever they type I want it to appear in black.
That's good.
Rollover doesn't do anything, but focus is nice.
This allows you when the form is live to have your viewer
tab between fields, and that focus will let them know
where they're actively entering, and then if there were an error
I can come in and indicate that it's a required field
that they haven't defined yet.
Now, these are all options to you.
You can disable many of those pieces if you don't want so much information,
but we do give you all those controls.
As you're working, if you go ahead and publish this up to Business Catalyst
it will bind to that database.
That email will get sent to both myself and to Kevin of Kevin's Koffee.
I'll probably take myself off the list after a while once I know it's all working well,
but I do have that control.
If I come in and change fields, rename fields,
the database is going to keep track of that,
and it will all be contained in the system.
That's it just for contact forms, a brand-new introduction for us.
Look forward to some additional explorations
with additional graphic designed contact forms coming soon.
Okay, thank you.
