Lessons

Lesson Info

Adding and Formatting a Contact Form

We really don't have a lot going on here. It's kinda sad, but we're going to put a map on the page. So, I'm going to fit the page in the window under View, fit page in window, come to the Widgets library and scroll down. Make sure you can see the social category. If you look in there, you'll see that we have at the bottom, we actually have YouTube and Vimeo. So if you have your videos hosted on a social site, YouTube or Vimeo, you can just drag the Widget out and point it to that actual URL, and that's just going to put it out there. It's gonna be responsive, too. Now it's not gonna let you do things like put a full screen background video, that type of thing. These are just videos on the page. In the advanced class actually it showed you how to do that, but if I scroll up a little bit you're gonna see we have Google Maps. I'm gonna drag that out. So I'll drag it out, drop it on the page. All it's gonna do is say, "Where's the map? "What address do you want to put for the map?" I could...

just type in an address. It's gonna put in that map, and you're done. Whatever you see at this point, that's what it's gonna show the user to start with. They can go in and adjust and move and do all kinds of things, but these are the starting points. We could change the map to be like a hybrid satellite type thing. You could do just about anything you want here. Alright, there we go. Now once we get that out there, this Widget is also responsive. It's gonna scale, and just to try it out or look at it, here's what I wanna do first. I wanna stretch it to kinda fit here in the columns. There we go. And you guys, if you decide later on, you're like, "You know what? "I want columns to have a little bit more padding, "a little more push from the edge," 'cause maybe this stuff is too far to the edge or too close to the edge. You can come over to Page and come to Page Properties. If you look in there, you're gonna see there are all of your margins. We just talked about them in the beginning. But I could come in here and I could say, "You know what, let's do this." I'm shift clicking to crank these up, but you can actually pull in the margins from the edge, can you see that? And that way it might make it a little easier for you not to have content all the way to the edge. And you can also take, if you want, we've got that column set up, you could take that gutter and make that bigger. I'm shift clicking to go faster here. If you notice, they're together. So that could be kinda neat, you could do something like that. That's just all it is, is a way for you to line stuff up basically, make it easy on you. Alright, that way I can put the text there. I'll drag it over. Put the map there maybe. Line it up using smart guides, it's just gonna do it for me, so that's kinda cool. Alright, now if I want to we can just try it out. We gotta make sure that we got this content out here. We wanna see that it's gonna work. So if you drag this scrubber to the left you're gonna see what it does. It is responsive. So you're gonna see that the map is probably gonna get a little narrow. So at some point we're gonna look at it and say, "You know what? "We probably need to make a design change." And you'll probably notice that it actually... See how it crept in? See these two right here how they crept in towards the edge? That's because of that percent. It keeps moving it over. If we wanted them to stick on the edge of the column we would pin them before we start all this. So if I click back to get back to the large size and then you click on this object, and I'm gonna make sure it's on the column there. There we go. And then come up and pin it to the left. Pin the map to the right. You need to be careful here. They are responsive; they're gonna change, but as I drag when I do that, let's see what it does. The middle is still gonna do it. That's just because that's the nature of the beast, the way it sizes. You're gonna get to a point and you're gonna say, "You know what? "It might be better if we have the text up here "and the map down here maybe," or the map is just getting small. So at that point you would create a new breakpoint. You'd say, "You know what, let's put the map down here. "Let's put the text up here." I wanna make sure that we keep them in the center. So in other words, we're gonna do what? We're gonna pin them to the center. So I'll select this one, the text, I'll say Pin to Center and I might center align that text actually. So with it selected, I'll go to the text panel and center align it, and it's not bad. Now we gotta make sure here that the box doesn't keep stretching and squishing, okay? 'Cause at this point, I want to keep it about that size. So we're gonna turn off any responsive movement. So if I come up under Resize, yep, it's gonna keep getting narrower the narrower we go, 'cause it's responsive width. Choose None. And the map, all we're gonna do with that is we're just gonna make it stretch all the way across. So, come up to the resize. We don't need to pin it, watch. If we choose Stretch to Browser Width, that's it, no pinning necessary. And if I drag, we got it. There we go. Not too bad. So I'll drag this up a little bit 'cause we don't need that overlap. We don't need it quite as much anymore. And we could if we wanted to put a heading up there, that type of thing, but that looks pretty good. I'm gonna save the file. So there's a lot we can do with Widgets, a lot of different things we can work with. The next thing I wanna do is I wanna talk to you about working with a Form. Alright, if we go, let's see here... We are on the Contact page. That's actually where we need to be. We're gonna add a form to this. Now you notice that I already went out and I already did the whole responsive thing and I told you before, I said, "Get all the content out there first "and then do it," right? Well, we're gonna pay that due in just a second here, but bring it back out. Come back out to the large size 'cause once again, when we add content I like to do it on the large desktop size. So you can clicK in the breakpoint bar, the purple bar up there, to get it to stretch, and we're gonna add a nice form right down here. Come to Widgets Library and you'll see in there that we have the Form option. Now we have two forms. We have Detailed Contact and we also have Simple Contact. They're both the same thing. What they do is they actually just email somebody or a bunch of people, whoever's email addresses you put in there, and they email the information. This is not meant to sell anything. You're not gonna do registrations with this necessarily. It's just contact. First name, last name, information, that kinda thing. Now, if you choose Simple it's just gonna have a few fields and you drag it out. You can always add more to the Simple to make it look like it's a Detailed Contact Form, but we just need a Simple Form. Drag it out onto the page, drop it out there, there we go. The cool thing about Forms they should work just about everywhere. You don't have to worry about anything on your host, etc. They just have to work with PHP forms and just about every host works on these, works with these. If it doesn't work, you can always talk to your host if you're hosting it somewhere. Okay, now you got the form out there and let me show those options again. Don't forget, if you click on a Widget and then you click on the blue circle right there for the options you'll see all of it. We can go in and we can name the Form if we want and the Form name could be cool. If you only have one form on your site, Contact Form works, you know what I mean? If you have like 16 sites and you wanna make sure you know which site it's coming from just by looking at the title or the name, you could say like, you know, Creative Site Contact Form, or something like that. If you have, and some people will do this, they'll take a form, a really small version of the form and they'll stick it in a footer that way every page has some kind of Contact Form, and then on the Contact page they'll have a larger form. They'll actually name them something different like one's called Footer Form, Footer Contact, and the other one's called Contact Page Form or something. Once you get the email, you can see which form it was and you can actually track that and say, "Oh, people are doing the Footer Form a lot more "than the Contact Page." So it could be helpful information for you. You'll see Email here, you can actually type in anybody's email. What it's doing is it's actually using the email associated with Muse, so the Adobe ID that you signed in with essentially, which you could change in Preferences, but we don't need to. And if you want to you can actually use semicolons here. I believe it's semicolons. If you hover over it says, "Should be separated with a semicolon." So, you can put multiple emails and all of those people in there will actually receive this email, the information. Alright now after sending, I love this, you could say, "You know what? "If we send the form, "submit it rather, somebody submits it, "it's gonna come up with a message "that said hey, something like form received "or something like that." Kind of a letdown, 'cause it's not really like a, "Thanks, you're awesome," that kinda thing. It's just a, "We're done." You could if you want to, after sending the form, send the user to another page. We already created that page. It's called Thanks. So if you come in here, you're gonna see all your pages, and you go to Contact Thanks. That just means if you see the colon like that and two page names, it just means that's a child, Thanks is a child of the Contact Page out in the site map. We'll choose that. That's cool. Once I hit Submit, once it actually submits, it'll take them over to that Thank You page or that Thanks page. That's why we want to have something on there that makes sense. And down here we have a ton of different types of fields we can work with. If you wanna do something like company phone number, address, we even have like check boxes and radio buttons and all that kinda stuff you can go just nuts with. If you wanna make this a big form that they could use, you could do that, there's a lot. We can also work with a Captcha. We have reCAPTCHA 2.0, reCAPTCHA, and BC CAPTCHA. Now, BC CAPTCHA is an Adobe Captcha. This is Adobe hosting, okay? It's called business catalyst essentially. So, BC CAPTCHA. We have reCAPTCHA which was the originals, and we have reCAPTCHA 2.0, which that one is the, if you ever see the box where you go to a form and it says, "I am a human," or something like that, and you click on the button and it circles and then check mark, "Hey, you're a human," that's what that one is. Now with these kinda Captchas, if you do decide to use them, you have to give extra information. You actually have to go to Googles site, you have to create an account. It's simple to do. You don't have to pay anything really, and they just give you a couple of keys and you have to enter them here to get it to work, otherwise it won't work. 'Cause what they want you to do is they want you to be able to track that stuff, too. Alright, so I'm not gonna do a Captcha. We'll keep it simple. And I think that's good. Those are a lot of settings we can set. If you wanna just try, just try turning some things on. The great thing about the Form is if you click away from it and then click back on it, you can select individual parts of it. Once again, this is like a group. We can just go click on something like the message. Click on the Message field, for instance. What that's gonna do is select that form field with the actual label above it. If you want, it's like a group in a group, okay? You want to get rid of it or you wanna move it, just drag it. You're gonna overthink this, I guarantee it. Just drag something, put it over here. You wanna make a horizontal Form maybe that fits within an area of your page? You just drag all the fields around. You can do that. If you don't want the Message, make sure you have it selected. I'll click on it again. Just hit Delete, Delete or Backspace and it's gone. All you did, once again, with these kinda Widgets, you just turned it off. It's still there, you can turn it on, but it's off. Now we can also come in here if we have these fields and I think these fields are like way too long, okay? I wanna make them narrower. Maybe I have a smaller space I want to fit this in. If you come in here to the Enter Name field, click on that one, and then if you click one more time, 'cause what you have right now is you actually have the Form field and the label as a group selected, if you click one more time in the field, you can see you have options to resize. Now if you drag, let's say, on the right, just make it narrower maybe, watch what happens when you let go. You're gonna do the other field as well. All the fields resize together, not all of them, but all these kinds of text fields do. If you want to change them and make, you know, Name narrower and maybe Email longer, 'cause you know you don't wanna a narrow email field, you could click, see the blue circle there? That's all the Form field options for that particular field. You could come over there and do some different things, but what we wanna do is we wanna get to the main Form options. So, if you press Escape and then press Escape again, you're gonna grab the whole Form, come to the Options, and down here you can actually say turn off Edit Together. That way you can edit them independently, make one narrower, do different things. The other great thing about this is that, you know, yeah we just resized it, that's great, but what if I don't like the color? I wanna match my design. Click as many times as you need slowly to get to that Form field, come up, check it out. We have Stroke, Fill, you can do rounded corners, you can do all kinds of things. This is just a box, it's a text box. So if you come out there to Stroke maybe or Fill, I'll do Fill, apply some kind of Fill to it, that type of thing, whatever you want to do, and round the corners and all that type of thing, you could also, and I'm not gonna get too crazy with this, but all of these fields actually have states to them. So like we did the button just a little while ago, if you click on one of the fields and you look up there you're gonna see Text Input Empty. You click on that. We have Non Empty, Rollover, Focus and Error. You can click on each one and make them all look different. We're not gonna do that, 'cause it's just too much work right now. But, it's great because that could give somebody the idea that, "Hey, I'm actually in this certain field." Or if somebody already filled it out, Non Empty could be, you know, they've already got data in there, 'cause a lot of times I look at a form and I'll look away, I'll look back and I'll say, "Well, which field was I on?" You know, that kinda thing. So, Focus is the one you're clicked in. That could be a good thing to do. And change the color, and once you do, like I said before, just pick one of these states, go out and try a Stroke, a Fill, a Rounded Corner, whatever you want to do. Just kinda, I'll leave 'em there for now. Now the other thing we can do which is kinda neat, is you can actually come in here and you can select the Label on a Field and you can actually move the Labels. This is kinda crazy. You can move and resize them, so if you ever want to make it to where maybe you have a totally horizontal, and you've seen those before, where it's like Label, Field, Label, Field, Submit, that's it. That's what you could do. You just drag them apart from each other. Once again, let me undo that. I'll go to Edit Undo. Once again, you're gonna overthink it. You really are. If you think of this stuff as each individual object that if you just keep clicking, be patient and click, you can get to it and start working with it. Alright, now you're gonna see that we have this Submit button and we have this thing down here. This is actually a Form Message area, so if somebody doesn't fill it out right or it doesn't go through or it is successful, you'll have a message in there. That's pretty important, that could be. So what I want to do is I wanna move both of those up, okay? So drag across, you already have a field or something in there selected, so you're kinda already in the Form. Drag across the both of those if you want, and it should be doing it. It's not letting me, hello? There we go. You can also Shift click between or you should be able to anyway, and drag it up. You can move these up. There we go, make a little more compact Form, that type of thing. That looks pretty good. Now that button, if you just keep clicking, keep getting there, you're gonna see that that button actually has states as well. You can change the appearance of that. You can round the corner, do all of it. It's already got some of the formatting options done up here. If you come to the states, once again, rollover, mouse down, and Submit in Progress it's called. That just means it's working on it, it's doing it, okay? So we have all kinds of things we can effect here. Alright, I think that looks pretty good. I'm not gonna go crazy with this. What I wanna do now is I wanna make sure that it works. We've got ourselves a Form. We're not gonna test it right here in Muse. As a matter of fact, if you have the Form out here and you really wanna try it out, if you come to Preview over here up in the upper right corner, and you try it out, it's actually gonna typically give you a message. I believe they still do that. Let's see, let me scroll down. I'm gonna go under File and Preview Page in Browser, see if this gets it. Now you can see it's gonna work when you actually publish the site. If I come in here and click Submit, look what you get. It's gonna say it will not work. You gotta upload your site. But it is working because it actually does a check for you. It's gonna go through and all the field validation they call it, if you don't fill something out, it's actually gonna give you a red color. That's awesome. It's doing Form Field Validation for you, and you don't have to do anything. You could change the color of that, but that's part of the states in each one of the Fields. Okay, I'll go back. Let me go back over. And we've got this out here, now the last thing we're gonna do is we're gonna kinda check it out, see what we've got going on here. So, let's go ahead and do this. Let's drag the content, or the gripper here, drag it over, looks pretty good, looks pretty good. Now look what's going on with the Form there. I added it after the fact. I did do this on purpose because this is the trouble you get into. First of all, notice that it's creeping over to the left on mine. Why is it doing that? It's doing it because I haven't pinned it, okay? And that might be okay. You might like that. That's fine. All of your content to do that, but in this case I don't want it to do that so I'm gonna go back out and click to expand it. I'm gonna click on the Form and pin it to the left. And you should have noticed, you probably saw there that it's actually changing the Form field sizes as well because the Forms are responsive by nature. I'll drag to the left, take a look. Now, I don't think I've pinned it, did I? Didn't it do it? I swear I did. Pin left. Okay. Pin should be working, not quite, that's okay. Now, look what it did. Because we had that breakpoint already set, it's looking at it and it's just a little confused. Actually, it's not confused. It's doing right what it should be doing. It's staying exactly in the place. Now what we have to do is we gotta get to this size. We gotta click, make sure you're at this smaller size, and move everything around again, okay? So I'm gonna make sure I'm on the Selection Tool. I'm gonna drag the form, or sorry, the map down. Drag the Form in the center, and we're gonna pin that to the center. There we go. Now that stuff is looking a little bit off here, but I'll move this up, move this up. There we go, not too bad. Looking a little bit better. If you want what you could do is, at this point, the Form fields are gettin' kinda narrow, so you could actually come in here if you want and click on the Form fields themselves and you could make them wider. You could also say don't size anymore. Just stay the same size. Don't forget, every object has this responsive thing going on by default. Each object does something different in between images, Forms, that kinda thing. You're gonna set it up first in your larger design. I know I'm repeating myself, and I'm sorry. But in your larger design, you're gonna set up those nature and be like, "Do I want to size or not? "Is the default good?" But as you go smaller, if you realize, "I don't want it to do that anymore," you can always change it. I can always come in here and say, "No. "Don't size them anymore." At this point and smaller, just keep them the same size 'cause they're gonna get way too small. I'll click on this a couple times and say no, don't, that one's done, and there we go. Now don't worry about it, you guys are gonna see some things kinda tracking a little bit. Sometimes that's just the actual preview in Muse. You've gotta go out to the browser and take a look at it to make sure it's looking good, okay? I think we're doing okay. I wanna make sure that everything's on the right layer. So, drag all your content or select all your content. Of course, no it's not on the right layer, is it Brian? Go to the Layers Panel and you're gonna drag all that master content, that blue box on Master, drag it to the Page Content layer. Everybody does it, including me. You can see that, right? Alright, there we go. I'll save that. Now if we go out, this stuff should go behind the header up top and all that kinda content. I noticed it was sneaking on top before. That's why it was.