In this video we discuss how to piece together all our form elements to build an interactive form that feels just as real to the user as it would online.
- [Instructor] Now that we have a full form pieced together, let's go ahead and make it interactive. All right, we're not going to actually utilize the email and phone number here, the check boxes, so let's go ahead and take those out of our form. And then the next thing we want to do in order to start to wrap up our form is to scroll down 'til we see the HTML5 button, and go ahead and bring that in. And you'll note that Axure's already labeled it with Submit, so that's perfect.
The only thing I'd recommend doing just so it's easy to find is to add it in here. That way we know, see, it changed its name here. That way we know which button we're looking for when we have to go in and make sure that everything is lined up and ready to go to submit our form. Now, there's one other thing to note here. Earlier in the course, I added these drop-downs, but I'd already added other fields and then removed them, and then I had added some other fields, so, essentially, everything's out of order.
And what do I mean by that? So if we go and we look at the preview, then we try and tab through this, we get stuck on the date for the arrival, and then it skips over the year and goes to Departure. And people by and large love to tab through forms, so we want to go ahead and make sure that that's easy for our users of our prototype, so let's go back to Axure and make sure everything's in order. And you can do that in the Outline section here, and you'll note that I have Arriving Month, Arriving Date, and then Departure Month, so that's where things start to fall out of sync.
And you also note here that everything's in the order of when you added it from the last to the bottom of this section to the very first, not in reverse, which it might seem like it should be the other way around, but it's reversed to how you added things into your form here. So let's go ahead and start to move things around so that we can easily allow the user to tab through things. So we'll select our Arriving Year and drop it down between date and month, and then now we have the Departure Month, Date, and Year in order and then Phone and Email and Submit.
There's one other thing, though. The user's not going to know what phone or email is here for our radio buttons, so let's select our Submit button, Email, and Phone and go ahead and move those down out of the way 'cause what we're going to do is we're going to add a label. And in this label, it's going to say Preferred Contact, and that way the user now knows what those fields are. So let's go ahead and preview our form.
So we'll say name of guest, email@example.com for my email. We'll just throw in some random numbers for the phone number and arriving the first of January 2017. Oh, wait, we seem to have found a bug. So there's a problem in the form in the way that it was built. Now, this date field should actually work differently than the way we set it up. Note if I extend it out like this, because it's a date field, if we preview, now we have this month, date, year.
And then if we select this little arrow, it gives us the calendar, and we can move around as we need to throughout the dates of what we need. So if I want to go to 2023 'cause I'd like to plan ahead on my vacations, then select July 13th, it automatically updates. So that's another way you can do the date field. However, the reason I did it like this is because it's a lot quicker for a user to tab through the form.
So let's go ahead and do Command + Z, and we'll undo that, and then we'll change these field type, so that's what made it that date, and we'll change that back to Number, and then we'll do the same thing on the other one. Now, if we click Preview again, we should be able to quickly add a date. So let's go again and just add in our information into the field just to see if it works the way it's supposed to.
And look at that, I can add a number. And then does our Preferred Contact work? Let's see Email and then Submit. Uh-oh, we have another problem. We haven't created a link for our Submit button, so that's the last thing we need to do in order to get this form working the way we want it to. When we click on the Submit button and go back to our Properties panel, we can go ahead and click create a link, and we can link it to anything we want to link it in terms of the pages.
However, we don't have a confirmation page yet, so let's go ahead and create a confirmation page. When we click add a page, it gives us the new page and automatically allows us to go ahead and rename it. Then we want to go ahead and open it up, and what we're going to do just to make this easy is we're going to select everything on our Book a Room page. That's Command + A or Control + A if you're on PC and Command + C or Control + C to copy, and then go back over to the Confirmation, and do Command + V or Control + V to paste.
And then what we'll do is we'll just take this form, and with your shift key down, just select every single thing in this form. And we'll delete it all out. So we can have the page look the same as it would as if you were actually using the page. So now let's go ahead and add a Heading 2, and we'll do something fun like Got It, and then we'll add a paragraph.
And let's move this in a little so that it makes sense for our page end here. And now let's go ahead and go back to Book a Room. So one more thing we need to do on our Book a Room is we need to be able to create that link to that confirmation page, so let's select Submit. Click create a link, click Confirmation. Now it should work the way that we expect it to. So go ahead and click Preview. Scroll down, go ahead and fill out our form, and, again, I'm putting in random data.
You could put in whatever you want. It really doesn't matter at this point. It's not going to a database. It's not doing anything. It's really just there to feel like it's interactive, and then I click submit and, hey, look, they got it. Woohoo, we created a form in Axure.
- Using widgets
- Setting up interactions
- Building an adaptive page
- Styling pages and widgets
- Creating forms
- Adding text fields, dropdowns, and check boxes
- Hiding and showing menus
- Creating carousels