Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
Now that we have a basic understanding of form fields, let's take a look at some of the more advanced options and what it takes to complete a form. On the Contact Us page, I have the simple contact form placed. Let's select this form field and go into the options and take a look at what we see in here. The form name is the name of the form itself. You want to make sure that you have a nice descriptive name, so you can keep track of this form later. The email address is the email address that this form data will be sent to. By default, it's the same account that your Adobe Muse account is connected to. But if you want, you can put your client's email address in here, so when you publish the site for them, that information is sent to them instead of you.
After sending tells Muse, after you submit this form, where does the user go? By default, it stays on the same page, but if you wanted to, you could send them to a different page in the site. We're going to do this later on in this movie. Next, we have standard from fields that we can add. For now, let's add a cell phone number. You see, when you add a cell phone number, or any other standard fields, they automatically get added to the bottom of your forms. In our case, we want cell phone to be above message, so we're going to have to change that later on. We can also add our own custom Single Line fields, which are the same as name or email address, or a Multi Line field, which is the same as message, so you can enter more information. Finally, Edit Together will make sure if you make any changes to the fields, they all update at the same time.
Let's change the appearance of these form fields. I'm going to scroll down and select the message area. I'm going to click and drag and move message out of the way. And then we're going to move cell phone up. Next, to make this form field look a little more interesting, we're going to move the name, email, cell phone, and message labels to the left-hand side and have the form fields themselves on the right-hand side. So to do this, we have to be a little meticulous with how we're working inside our document. You're going to want to click slowly and deliberately as you move your items around. So let's come down and I'm going to grab the name field and click and drag and move this to the side. I want this to line up right along with this edge over here. Next, I want name to be lined up on the right-hand side. So with name selected, I'm going to go to my text field and choose a line on the right-hand side.
When I do this, you'll see all of the other labels switch over to align right, because Edit Together was selected. Next, I don't need all this extra space. I'm just going to move this over here. And then click and drag, and start to line this up. Next, to make sure it lines up at the spot that I want, I'm going to use some guides. I'm going to bring down a guide, and put it at the baseline of the description, Your Name. Then I'm going to slowly click until I have name selected. Now I'll use my arrow keys to nudge it down so it's on the same baseline. Next, I'll put a guide over here to put exactly where the colon is located. That looks pretty good.
Now I need to repeat this process for the rest of these form fields. Now that we have all of this lined up, let's go into Preview mode and see how it looks. Now this is a much clearer way to read your form. We know that name is on the left, and then you can enter your name on the right. It's easy to jump down and enter all of your information. Now before we test this out, let's go and add another page to our site. We're going to go back to the Plan mode, and we're going to select the Contact Us page. We'll right click or Ctrl+click our mouse and choose Duplicate Page. Now that it's duplicated, let's change the name to form submit.
Next, we're going to drag and put this underneath Contact Us. Now, to prevent this page from showing up in our navigation system, I'm going to select this page, right click, and choose Menu Options, and then Exclude Page From Menus. That way, it won't show up in a drop-down. Let's edit this page and change some of the information. I don't need the form field on this page, because I already have the form field on the earlier page. So, I'm going to delete this and I'll get rid of some of these guides too, because I don't need these, either.
Select those and hit Delete. I'm going to select Contact Us, Copy and then Paste and put this right down here. And we're going to change the message to say, Form Submission Success. With this finished, we need to go back to the Contact Us page. Select the forms, go into the options, and say, after sending, where do we want it to go? And what we want to to do, is go to the page that we just created. And that's going to be Contact Us Form Submit. Now that we have this finished, we can publish the site and try it online ourselves.
We're going to press Publish, and then we need to enter the name of our site. In order to receive the information from the form fields that people enter, it can't be put on a test site. It actually has to go to a real, live published site. For purposes of this movie, we're just going to publish it to a sample site. Now that we have the sample site published, let's go to the Contact Us page and let's enter some information. We'll put in my favorite phone number and then a nice message. Now watch what happens when we click Submit. It goes to the next page that says, form submission success.
If this had been published to a live business catalyst site, an email would have been sent to the email address that's connected to that form field. Using Adobe Business Catalyst to host all of your form fields should work as expected, but what happens if you're not using Adobe Business Catalyst, you're using a different host? Well, when you upload your site via the built-in FTP, Muse will notify you if it finds any problems that you may have. The most common issue is that the built in captcha for spam will not work with hosts other than Business Catalyst. So if you avoid using that captcha feature, you should be okay with whatever host you end up using.
If you happen to run into any issues with the forms in your host, Adobe recommends that you contact them via their tech support forums so they can work on a fix for future updates to Muse.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.