Adobe Muse CC 2014 Tutorial | Mastering Contact Forms

I realized recently that I haven't done a tutorial on the ins and outs of contact forms and how to style those contact forms for those of you who visit Muse resources calm on the library widgets page you've probably seen the forms that you can download the pre styled forms that you can download into your widgets library in Adobe muse for those of you who are not familiar with music resources com if you want inspiration for creating forms through this tutorial that's not a bad place to start because these are some highly stylized forms that will give you some idea of what's possible within Adobe Muse but I'm also going to take this opportunity to show you what's possible in styling these forms with Adobe muse and what's not possible so to start I'm going to open up the widgets library and that's not the library that's the widgets library the library is where you install stuff so if you were to download one of these forms from use resources com when you install it shows up on the library the widgets library on the other hand is where you will find the forms that are built in the blank forms and I'm going to start with the simple contact form there's also a detailed contact form it's the same thing but with more fields for people to fill in and with simple contact form you can add as many fields as you want so I'm going to drop that in there just to start with something more simple now I'm going to close the widgets library and scroll down a little bit and here we have our basic form now I want to help you guys understand first and foremost how to style these forms and how that works because it's a little bit clumsy to be perfectly honest with you guys and the reason it's a little bit clumsy is because there are all these different states there's a different state for when you've clicked in a box there's a different state for when your cursor is on top of a box there's a different state for when you're nowhere near a box and mastering those states and styling those states is really what makes the form look and feel the way you want it to and to be confused by that makes it really difficult to edit these forms so the first thing to know is if you want to modify the fields that are in the form you can start with this little blue circle and that shows my form options where I can add standard fields or I can add custom fields down below and then it also allows me to determine a name for this form and where it gets sent off to now the name of the form is especially important if you more than one website or more than one page on your website that contain a contact form because this is how you're going to know when it gets emailed to you where it came from if you don't put a name on it or if you title every form the same way you won't know which form it is you might not know which website it's from so it is important to give the form a name and not to just leave it on a home form or whatever the default name is it will actually automatically try to help you name the form based on the name of the page that the form is found on so mine says home form because this page is actually called home so it tries to help you but bottom line is if you don't know what it's called you could end up confused later so give it a name email - is where you put your own email address or if this is for a client you put your clients email address a lot of you are downloading these contact forms and you are leaving my email address in there and I've been getting your emails from your websites so please switch that to your own email address so that way I stop getting your emails if you guys want to email me that's totally fine feel free to email me if you guys have questions I do my best to keep up with the questions but just be aware I get a ton of them so I'm not going to try to hide my email address from you guys now here it says after sending stay on current page that allows me to either bring the viewer to a different web page confirming that they've successfully contacted me or I can have it keep them on the current page and it'll just say a little message like success now where does that message come from and what does that message even say that has to do with the state for the entire form so when I say for the entire form this has to do with making your selection on this form and what I mean by that is if I click away and I click once on this form I have the entire form selected and if you're not sure what you have selected if you're not sure how many times you've clicked I always say when in doubt click away and click back on it once but it also says in the top left corner form normal that means I have the entire form selected if I click again up here on this name field it now says form field because I have one specific field selected versus having the entire form selected it's important to know what you have selected now the third level deep is if I click again I can actually select the text input or the label there are two separate pieces if I click again so I could delete the label I could change the label I could delete the entire text input field I could change what's written in the text input field so I've got three levels of control to take I'm going to click away though and I'm going to click back on it once to select the entire form in the top left corner it says form and where it says normal I'm going to show you guys there are four separate states normal is what the form looks like when nothing special is going on then there's submit in progress submit in progress by default Gray's out the submit button because the submit is already in progress there's no need to hit submit again and there's this little hidden text box that appears that says submitting form you can double click on that you can type whatever you want in there you could say submit in progress you could say whatever on earth you want it to say and then submit success is what you'll see if you don't reroute people to another page if you just want to show them that their submit was successful and keep them on the current page as per the default within Adobe muse now there's also submit error submit error is if the server has an error not if somebody typed something in wrong if somebody typed something and wrong you will get sort of a field specific error which you guys get to customize in in a later step so submit error here is if the server failed to deliver this contact form if there was either an issue with the server that's permanent or temporary that does not allow the form to send the way the code is intended to make it send so you can customize all three of these so they say something different or so the text is bigger and more scary on the error or the submit in progress is green instead of just gray to show that things are going according to plan totally up to you guys but just know that there are four separate states to the entire form as a whole now I'm going to click into one of these fields like name for instance now it says form field in the top left corner and if I click on empty you can see that there are now five states there are five different states for this individual field and by fault if I make a change to one of these it will make the change to all of the fields on the form so I'm going to change name email and message all at the same time now when I click from empty to non empty to rollover you guys will see these subtle little changes taking place and the reason these subtle little changes are taking place is because Adobe by default has set us up with differentiated States so that we can tell these things apart it was nice of them but if you want to restyle these things you'll probably do away with all of what adobe has done starting with empty empty is what you see if the field hasn't been clicked on if the mouse is not on top of the field it's basically if the form is not being touched or interacted with what does it look like that's what empty is all about it's the default State non empty on the other hand is if a field is not selected if you're not typing in the field but you have already typed something into the field by default it goes a solid black color but there's still a gray stroke around the outside then there's rollover that's what it looks like when your cursor is on top of the field that's that the cursor has gone on top of the field and it's sort of lighting up in a way to indicate that it's ready for you to click on it or that it's clickable in the first place and then there's focus and focus is what happens if you do click on the field and you've placed the computer's focus in that field focus is also important for those who use alternate input devices like just the keyboard people who don't use the mouse or can't use a mouse focus is what you see when you tab from one field to another to show that you're in that field so focus is another really important one and then error error is what you see if there's a problem with that particular field when the user hits submit there's a problem with the name field or the email field if it's an invalid email address that's what you're going to see so you could change that up to look however you like now another thing to note is as you're making changes here some of these things get inherited so for instance I've got I've clicked again and I now have this text input field selected and I'm going to click up here on the toolbar to round the corners of this box you can see that all of the corners became rounded except the submit button because they do all edit together which is nice it's going to save me a lot of time but you'll also notice if I go from empty to non empty that it's still rounded that inherits that style gets inherited from one to the next to the next that doesn't go forever everything if I for instance make the text here a lighter shade of grey or something like that let me go over and do an even lighter shade of gray you can see that that happens on all of them but it doesn't get inherited into the next state if I go to non empty non empty has its own text color associated with it so it's important to know that sometimes some things get inherited from one to the next and sometimes they don't another thing that I like to do I like to make these text fields a little bit bigger I like to make all the text a little bit bigger if I do that on empty if I go and change the size to 18 for instance and I go to non empty that does get inherited so the text color might not be inherited but the text size should be inherited by default and I like to have that bigger text size another thing that you can do is change the font for the entire form and the best way to do that is to click away from the form click back on the form once to select the entire form and then to make your font change so if I make that font change it affects everything including the submit button so I don't have to backtrack now if I do go in and I set a form field to be a different font on error that is going to override whatever font change I make for the overall form so just be aware that again not everything is inherited and specificity always wins if you are specifically setting a font for a specific state then it will stay that specific spot for that specific state because if specific doubt is removed from the application so it tries to figure out what you're trying to do and if you're trying to do something that doesn't make sense well you might get a result that doesn't make sense and that would be your fault apologies for being blunt but the software and the computer can only be so smart and can only make so many decisions on our behalf so now that I've got my form created and now that I've got sort of a style set to it I didn't change much you guys it's up to you guys to change everything every aspect of the form but I want you guys to be familiar with the states one thing that I didn't realize at first that I'm really stoked about is if you guys do have an icon or a graphic for instance I have the icon mega pack installed here from use resources com if I go and grab an icon let me find one for a name like this little contact group with these little people if I drop this in here and I make it good and small let me get this out of the way if I make it good and small so small that it could fit inside of that field then the next thing I can do is sure I can position it over here but what I want to do is I'm actually going to hit cut which on my Mac is command X would be control X on your PC yet also always go to edit and choose cut and when I do that I can click into this field several times where I'm able to type what I want this field to say and I'm going to go to the beginning of it I'm going to leave it as enter name but I'm going to hit paste and when I hit paste it gives me my little icon my little icon is now in there with the text and it doesn't have to be blue I mean blue is the default color but I can go and i can select my regular selection tool and I can click on that I could change the color at any time these the icon megapack the icons in the icon megapack are recoverable from the effects panel at the top on the glow tab so I could say that I want to make this for instance let's go with like a grayish not too gray but you know visible and now because it's inside the text field if I go and preview this in the browser where it says enter name it shows my little icon I can click and the whole thing actually goes away so I can type in place of it so it's a good call to action it's very inviting it helps give people an idea of what goes in that field especially if you're using a more specific sort of icon if I go and find for instance there's a mail icon in here somewhere there are 400 icons in here so there plenty to go through okay here's like a loudspeaker for instance if I dragging a loudspeaker and I make that smaller let me go ahead and make it real small I can also go over to here where I've got this icon and when you drop in an icon it creates a graphic style for recolor balai Khan so I could go down here and redefine the style and it will make any of the icons that I drop and match one another so now that I've redefined that style make this about the right size I can cut that and I can go in here in the message box put a little loudspeaker in there and nudge the text over and now I've got two of those down so you guys can see that it really creates a more attractive contact form I mean it's just plain welcoming I wish I could find my little email icon there's a little envelope here we go solid envelope let me drop that in there see it automatically turns gray because I redefine the style I'll make it nice and small I'll cut it click into here and you'll notice I'm just kind of not being precise at all but it looks like they do all match approximately in size now the reason I'm doing this and focusing on this so much is because sometimes your alignments a little off or you won't be satisfied with how the icon is spaced from the top or from the left and that's really the last styling element that I want to talk about here it's not so obvious because you'll probably spend time on the text panel trying to figure out the spacing trying to figure out the before paragraph and after paragraph spacing that's not where it is there is a separate spacing panel in Adobe muse and if you can't find that separate spacing panel then go to window and then look for spacing make sure spacing is turned on and you'll find a little window like this that talks about padding now padding is the space between the inside border of a shape like these rounded rectangles that inside border and the content so how big is that gap how close are these things allowed to get to the edge you can see here that these things are pretty close to the edge but I might want to nudge them in from the left not necessarily down from the top and in from the left now padding has this little lock in the middle it's this little it's like a chain and I can click on that to unlock it to break the link between left top right and bottom and I can now increase the left padding to nudge these things inward a little bit so that's where that's hiding that's where that space is getting created from before I discovered the spacing panel there were all sorts of little widgets within Adobe muse that were giving me seemingly mysterious spacing and once I got that figured out I've had many fewer headaches within Adobe muse with these forums and such so I hope that helps I hope all of this helps really you guys will notice that I have not stylized this forum in any sort of beautiful way but I hope that I have shown you and given you the tools to be able to style these forms yourself and I do hope to get more downloadable forms on muse resources com so if you guys liked this tutorial please subscribe I have more cool stuff coming soon hopefully I can save you guys some time help you guys get your work done faster and if you're doing this for clients hopefully I can help you make more money

Channel: Joseph Angelo Todaro

Views: 39,534

Keywords: adobe, muse, cc, creative cloud, Adobe Photoshop (Software), Adobe Systems (Organization), Adobe Muse, Tutorial, Live, photoshop, adobe photoshop, mac, osx, mountain lion, finder, howto, editing, graphic design, web design, sliding, panels, parallax, scrolling, 7.0, version 7, update, icons, png, graphics, Windows, OS X (Operating System), Mac OS (Operating System), scroll effects, scroll motion, contest, navigation, horizontal, forms, contact forms, Adobe Systems (Award Winner), adbe

Id: SwFAkUoYuLQ

Length: 16min 31sec (991 seconds)

Published: Sun Jul 06 2014