Lessons

Lesson Info

Adding Links and Forms

And let's start out with the form. We're still on widgets, let's kind of keep that flow going. So I'm gonna scroll up here in the widgets library and you should see, where are we at, form, form form. There we go, forms. You'll see we have detailed contact and simple contact. Now simple, they're both the same thing. And all these forms are are exactly what they sound like. They are just a contact form. We're not gonna sell stuff, we're not gonna do things like that. If somebody wants to get a hold of you and you want to use a form it's actually gonna email you the content. So you can have multiple people that it emails, things like that, but it's gonna send an email. Detail just has more field showing. Simple only has a few. So we're gonna drag out the simple contact form. So just drag it out to your page. Let it go, you're gonna see that we have a bunch of options now. Now the one thing that you really need to set on this is you need to set the email to. That is who is going to receive...

the contact information as soon as somebody fills it out and hits submit. Now what it's doing is it's actually looking at the Adobe ID that you signed in with, the email associated with that, and that's what it's putting in there. If you want to you can put more, something different, all that kind of thing. You'll even see multiple email addresses should be separated with a semi colon, so you can send it to multiple people too. I'm good with the email, I think that's good. Form name you can change it to whatever you want. This is actually really useful for just checking things out. If you put a form, like a simple form in the footer and then you have one on the contact page let's say, like a more detailed contact form on that contact page you can actually track which one people are using. They might just actually use the one in the footer. So you call that one footer contact form, or something like that, and the other one contact page form or something. That way when you get the email you know which one they're filling out and you can track it. All right we've got a lot of stuff we can do here. We have a ton of things. We can add a lot of different types of elements, turn them on, turn them off. It works the same way. This is just a group of elements that as you go in and if you want to click and select things you're just gonna keep clicking on stuff. It's gonna dig into this and let you select other things. There is also a CAPTCHA you can do. This is awesome. Some of us, I get annoyed by these sometimes, but they work, right? So RECAPTCHA 2.0, that's one that says like, "I'm not a robot," and you click on it, it does the circle thing and there you go. Thing is for the RECAPTCHAs you'll actually have to go to the Google site, the CAPTCHA site, and sign up and get a couple keys and things for that to work, okay? It'll tell you what to do, don't worry. All right, we're gonna keep this simple like I said, so I want to keep this dead simple. So the only thing I want to do is this. Click away from it and then click back on any part of it and you just selected the whole form. What I want to do is, let's suppose all I want to do is I want to collect somebody's name and email. I don't want to do a message. Remember, this is all just a big group of stuff. So what I can do is I can come up to the message field and click one more time. It'll select the message field and the label, the text above it. There's tons of stuff we can do with these. You can go in to each one of these form fields and change the color, the fill, the stroke, all kinds of stuff if you want to. You could move these around, I can take this message form field and stick it over there, which makes no sense. But what if you wanted to take your form and make it more horizontal. Well you can take these fields and just drag them around and set it up to your design spec. I don't want the message, so here's what I'm gonna do. I'm just gonna hit delete. Press delete or backspace. And there it is. What you just did was you just turned it off. So if I go back to the blue circle, the options, right down here you're actually gonna see. Where was it? Somewhere in there, I forget. Somewhere in there it's actually just turned off now, which is great. Okay we're gonna take the rest of this and we're gonna kind of fix it up a little bit. So I want to submit, and you see that little weird empty box hanging out next to submit? That's actually a validation bit of text. Somebody click submit and it doesn't work or they didn't fill everything out, they're gonna come up with a message there. That's important. So what we want to do is this. Click on the form to select it. Click once more on that submit button. And what you can do at this point is I can actually drag across multiple objects to select them. That way we can move them both if we want to do that. Then just drag it up. Smart guides are gonna play a huge role here. It's gonna give us a total leg up so we don't have to worry too much about it. Now we could go to all the fields and like I said we could resize them, we could change the colors, all kinds of things, but I think that looks pretty good. So what I want to do now is we've got this content out here, we're gonna start to, let me move it down, we're gonna start to add some links and different things like that. So I'm gonna add a little bit of text. So come to the type tool, text tool. I always forget that. In Illustrator it's called one thing, in Muse it's called another. That's all right. I'm gonna draw a little text box, put it out here. And we'll just type in, contact us, and there is a dictionary in here by the way, Spellcheck, all that good thing. I'll just put my name, put some information like brian, at, and you can put an email address if you want to Brian wood training dot com, phone number, that's not even right, here we go. We could format that, like we know, just go up to the top up there, if we wanna select the text, do a font, color, size, all that kind of styling, by the way, Muse actually does have paragraph styles, character styles and graphic styles. Actually, bullet styles too, but, there's a lot of ways to save formatting, so you don't have to keep reinventing the wheel. You can then just apply that formatting in other places. Alright, I'm gonna come in here and put a return, and I wanna do this, I'm gonna make sure that the text here, this email address, has a link on it. So, with it selected, now, you can put a link on just about anything you want. If you select a picture, if you select a rectangle, if you select that entire text box, there's a lot of ways to do it. Whatever you select, you can apply the actual link to. Up top, you'll see we've got a lot of things we can do, there's tons of things we haven't mentioned yet, like, we can do bullets and numbered lists and all kinds of things like that, you'll see a lot of that up there. You'll see hyperlink, if I click on hyperlink right up there, add or filter links, this is where we're gonna go to make a link, now if you had set up maybe, think about this, we're gonna do this in just a second, but if I wanna make a link to one of the pages, we have, the logo, we're gonna put a link on that. I want the logo to go to the homepage always. We have all of the pages listed in here by default, they're automatically listed, so you just choose a page and that link is gonna go to that page. It's pretty simple. You can also link to file, which is a little more out there, but it's something like a PDF or a ZIP or something like that. What I wanna do is this, I wanna make it an email address, so instead of going out and saying, alright, we're gonna go in and click on a page, I'm gonna type in my email address. Now if you wanna be sneaky, work harder not smarter, work smarter, not harder, right? You can actually copy the email address and just paste it up in this field. I'll just type it in. Brian at, and I always say what I'm typing, yes, I know it's annoying. And dot com, and we're just gonna hit return or enter. Return or enter, it's gonna put it out there. Now what it does, if you look back up there, it actually puts this little thing in the front, mail two colon. That's just gonna tell the browser, hey, we need to pop open the email software and use that email address to send an email automatically. Now, what's cool about this, is when you add links in here, it's actually gonna out and say, you know what, we're gonna keep that for you, next time, we wanna make some kind of link, all that's gonna be listed up there, every kind of link you create. Even if it's to an external web page. If you wanted to actually make a link, on something like this to Google or create a live website or something like that, you would just have to get that URL and paste it right up there. It's the same as doing an email address. Okay, I'm just gonna click away from that. How do you think it looks? I'm pretty sure we all don't want blue and underline, right? So, what we're gonna do, we're gonna change up that formatting a little bit. First of all, the formatting itself is killing me. I've gotta do some text formatting, I'm sorry. I gotta go change the font size, do something a little bit bigger, maybe change the font, go with something extra here, W sans light, whatever, there we go. Oh, that's too big, I do this all the time, I'm like just stop. Alright I'll select the text, I'll select that link. Now, in order for us to be able to change the color of a link, we don't wanna do that on the link itself, especially if it's text in this case. I don't wanna go up and try to choose the color the blue, et cetera. As a matter of fact, if I look up here and look at the color, it's saying it's black. Well, that's because, that's not where we go to change it. Here's how we change link colors, if I come up to the upper right here, you're gonna see the hyperlinks option, if you click on that, you're gonna see, there's a lot of other stuff in here. We actually have what's called edit link styles. If you wanna change the color of your links, click edit link styles up there in hyperlinks, it's gonna take you into this thing called site properties. These are some properties we can use or set up. Early on, when we set up the site, that type of thing, but this is where you go to set up things like, normal, hover, visited and active. These are all different states that we can use. So, if I come to normal and I choose a different color. I'm like, let's use this great, whatever that color is right there, it's gonna make some kinda difference right? And I say, you know what? I wanna make it bold, I wanna make it italic and I don't wanna underline it. You can go to each one of these and these are the options we have. I can go in and actually turn off whatever I don't want and you'll notice that you actually have to click a couple of times, if you see a blank box in there, that means force it not to have it, that doesn't mean use the default, it just means, don't do it. Don't ever do it, okay, for that thing. So for normal or hover, I'm not gonna have an underline. Visited, active, you can go into each one of these, and these are just different states. Now, you're gonna find that visited is also an important one, because if you have somebody click on that, come back, they're gonna see purple, which is old school, that's like 1994. So, we wanna go in and change something like that. You wanna say, it's been visited, cool. I'll maybe make an underline as visited. And there we go, that's how we change the link style colors. I'll click okay. It looks pretty good, not too bad and I'll save this. Now, the last thing I wanna do here, as far as working, a little bit with links is, I wanna put a couple of things in the footer and we're gonna kinda work that way, but we have to check out our design now, right? Remember what I said? We get all of our content out there, I gotta make sure that it looks good and it works. So, what I'm gonna do is grab that gripper and drag. Check it out. Now, what I would suggest doing, you're looking at this going, well, here's what I would do. So, that's great. You're looking at it saying, well, I'm using my design eye and I would change it here or at this size. Once again, anytime you think to yourself, I need to make a design change, I'm gonna set a breakpoint and say, at this size and smaller, we're gonna make it look like this now, we're gonna do whatever we need to do. So, I could click on the plus here, I could then go in and say let's put this down here. Let's put this up here, let's move this and I'm still gonna wanna do things like this. I'm still gonna wanna make sure that boxes are big enough, because they're gonna scale, I'm gonna make sure that if I go out here I wanna center align things. Remember, we're looking at 2 things when it comes to content, we're looking at that pinning and we're looking at the resizing. So if you wanna center stuff, I wanna make sure that this form for instance, is centered and this is here. I'm gonna click on that object, come up top and pin it to the center. We're gonna make sure that every object we have is pinned to the center if we wanted to do that, for instance. Now this map, what I might do, honestly, I might actually stretch it. So, with it selected, don't forget, everything has a different nature, different responsive nature. So, I'm gonna say, stretch to browser and there we go, that way, now it's gonna take a second to load, don't worry about that, there we go. If I go in and take a look at it, I've got some room to breathe here, and there it is. Alright, last thing I'm gonna do here, we're actually gonna add some links to the footer. That way we've got a few social links, this will be kind of simple. So, I wanna go back out to plan mode, go back to my site, so I'll click on the tab over here. Okay, we're getting there, not too bad. What I would suggest is if you were to follow along with this, you would go to the thanks page right now and probably add some text, to add something, to actually say thank you, if you need to contact us right now, here's an email address or phone number, or this or that, and maybe put a nice picture in there or something, okay? But, what we're gonna do is we're gonna go over to the master page, because I want this content to be on every page. So I'll double click on the master page thumbnail. There we go. Now I'm gonna use my hand tool, I'm gonna press the space bar, and use the hand tool and move over a bit. And I'm just gonna put a few images down here. So, like I said before, we're gonna place images, by choosing file place, and I'll go out and I've got a folder of content here. I've actually got a couple of social icons, these are all SVG scalable vector graphics from Illustrator and I'm just gonna shift click, we can place a whole bunch of images at once, click open and we're gonna get this little place cursor. If you notice, it's gonna say, 3 in there. That means that we've got 3, so I'm gonna go click, click, click and I'm gonna zoom into those using my pad here, there we go. And we can just use smart guides and the great thing about smart guides, check this out, we have alignments in here, but most of the time, a lot of times, I don't need it, because we get stuff like this, like gapping. I'm gonna go to each one of these and what we can do now, is I can click on one of these icons, go up to hyperlinks, for instance and type in. Now, of course, I would wanna make sure that, you know, I had my Facebook page so I'd wanna go out and find that. Of course, I don't have that right now, so I'm just gonna type in a URL like Facebook, that's fine. And just a sneaky little thing here, that I wanna show you, when you create links like these, what's gonna happen is, it's gonna replace your webpage, with the Facebook webpage in the same page, okay? For marketing purposes, we wanna keep our site open. So, if you come up under hyperlinks, you can choose open the link in a new window, and that's great, that's a way for us to do it. Now, these are great. I would go to each one of these and set some kind of link. I would actually go in and then, I would group them together, you can group things in here. If you right click on them, you can see a lot of different kinds of content we can do, group them. I would center align them, somewhere on the page. If I actually zoom out, I could see what I'm doing. (laughs) I'm way off. Wow. Center align that content, that's where alignment might come in and don't forget, we wanna check out that responsive nature, we wanna see what it's gonna do. What's gonna happen with each one of these? If I click on these, are they gonna resize? Yeah, it looks like they are, if I go up to resize. They're all gonna get smaller. We don't need to do that, they're pretty small to begin with, so I'll say none. Then, I can center align them, pin them to the center. Always thinking about it and then we check it out. I say, what does it look like? And we just go, okay?