Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Examining mobile forms on the Contact page

From: Mobile Web Design & Development Fundamentals

Video: Examining mobile forms on the Contact page

All right, let's take a look at the contact form. The contact form is here in my desktop browser, and I'm going to scroll down. And you can see that on the contact form there is some of the same images we had to worry about in the Tours page are present here. So we have the same two-column page layout, and the large graphic element on the top of the page needs to be taken care of. And the two-column text paragraphs here, that's not going to read well on a small mobile screen. But the main focus of this page is the contact form itself.

Examining mobile forms on the Contact page

All right, let's take a look at the contact form. The contact form is here in my desktop browser, and I'm going to scroll down. And you can see that on the contact form there is some of the same images we had to worry about in the Tours page are present here. So we have the same two-column page layout, and the large graphic element on the top of the page needs to be taken care of. And the two-column text paragraphs here, that's not going to read well on a small mobile screen. But the main focus of this page is the contact form itself.

So this is the contact form. You can see that the fields are kind of wide and the labels are all aligned to the left of the input fields, which makes sense on a desktop web site. But on the mobile version of this form, we're going to want to make sure that these labels are aligned at the top of the input elements that they're associated with. Down here in the General Information section, there are these three columns of these check boxes.

Once again, that's not going to work well on mobile. So we want to make sure that those guys are all aligned in a single column and we're going to need to make sure that the text area is aligned correctly. If I scroll back up a little bit, you'll see that some of these pieces of information--such as, Email, and Phone, and if we look down here, the Zip Code is a number, and this right here is a date-- these are input fields that will lend themselves well to using the new HTML5 form input types.

So we're going to want to make sure that we take advantage of those. So let's just quickly scroll back up, and let's size the window down to the mobile version. And we'll scroll down, and you can see that when we scroll down now that the form is in the smaller mobile width, the form fields have been aligned to the top of the input types. If we scroll down here, you can see that these check boxes are now on one single line and the text field is sized appropriately.

And you can't really see it here on the desktop, but we've taken advantage of some of the HTML input types which will show up in the emulators when we see that in a little bit. So let's size this back up. Let's go take a look at the code. Okay, this is the code for the contact form. So let's go ahead and take a look at the articleImage. So remember, we had the same problem with the articleImage in the Tours page where we had a large image and it needs to be hidden on the mobile version.

So just to show you that the same thing is happening here in the Tours page, here is the articleImage class definition and if we just do the same search over here in the contact, you can see that this is the embedded image with a large photo of Emerald Bay of the Lake Tahoe, and the class here is articleImage. And you can see in the name it's being displayed as block, but in mobile it's being displayed as none, so that way it's not showing up. And same thing with the intro text in the main.css. And if we look for the multiCol, you'll see that you got the same two-column text count on the main version of the web site. And over here in the mobile version the multiCol layout is just being set back to one single column.

All right, but now let's take a look at the contact form itself. So I want to go back over to the HTML code, and I'm going to scroll down here to the contact form, and that's this form right here with the id of frmContact. Now let's take a look at some of the styling information here. One of the things that you'll notice right away is that when we take a look at the input types, you'll see that here on the input for type the input for the name field, the type is set to text. And if you've been working with forms, up until HTML5 input type="text" was pretty much all you had, but now we've got input type="email," we've got input type="tel," and if e scroll down a little bit, we'll get down to the rest of the form, so here is the input for the Zip Code.

We're just going to go ahead and change that to number. And we're going to scroll down a little bit more. We can see like these are the check boxes for what tours I'm interested in. And if we go down here, you'll see that there is an input for type="date," and that's the tripDate field with a label, "When are you thinking of touring?" So we're using the new HTML5 input types here. And the support for those are beginning to be implemented in various mobile browsers. WebKit browsers pretty much support those now, as well as some other ones.

So let's go ahead and scroll back on up. Again, as you look through this file, you'll notice that there really isn't any styling information embedded into the contact. So many contact form you see on the web today have a whole lot of embedded style sheets, or some kind of trickery in the HTML code to get them to lay out properly. That's not what's happening here. Each one of these columns of check boxes in the desktop setting, you can see that there is a div that surrounds each one of the three check boxes. And this one has a class of col1. This has a class of col2.

This has a class of col3. So the check boxes are basically aligned inside these divs, which is giving us those three columns of check boxes. So that's going to help us a lot when we go to lay things out a little bit differently later. But for now let's go back up to the start of the form. Okay, here is the form. Let's take a look at how the form is laid out in the main and mobile contexts. So here in main.css I am going to just look for form styling because that's this comment right here.

And this is where the form styled for the desktop version, and you can see that there is a whole bunch of styles being defined for forms. They have paragraphs in them and so on and so forth. The fieldset here, which contains all the field elements is being set to a width of 650 pixels, so that's not going to work on mobile, for example. We've got some forms defined for a legend and so on. We're going to fix all of this stuff. Also here, you can see that the inputs for type="text," type="email," and so on are being given width of 350 pixels.

Well, that's larger than most mobile screens are horizontally, and the text area is way bigger--that's 500 pixels. So clearly we need to fix that as well. We also have a style sheet defined for labels, and you can see that the labels are being defined as a width of 80 pixels, and they have some float and clear assigned to them as well, which is what's making them line up on the left-hand side of their input types. So let's go over to the mobile.css and take a look at the same thing. We're going to look for form styling, and here is where the mobile form styling starts.

So you can see that the inputs for text emails or all the input types are being sized as 220 pixels instead of 350, which makes them fit onto a mobile screen. The textarea also is being sized down to 220 pixels. Whereas, the label text style sheet definition in the main style sheet was for floating and clearing, here we have a float of none and a display of block, and that's what gets those labels to appear above the input types on their own lines rather than appearing next to the input fields that they are assigned to.

If we scroll down a little bit further, you can see that we've got style definitions for all of those col1, col2, and col3s. This is for where those check boxes are defined. Now if we go back to the main version and we look for .col1, you can see that here we've got some floats defined and we've got some padding and widths. So the columns are being given widths of 160, 170 pixels, and again, that's what gives us that three-column layout on the desktop, but we don't want that on the mobile version.

We don't want them to have set widths of 160, 170 pixels, because that's going to line up to be much larger than the horizontal width on the screen. So back here in the mobile version we don't assign fixed widths. We simply say that the width is 100%, and that makes this particular column be 100% width of its containing value, which in this case is going to be the fieldset. So this is what makes all three of these columns flow in one single column, one after the other. There is no floating, and we just give it a width of its container, and that forces each one to flow after each other.

For column3, we just give it a margin- bottom of 2ems that there's a space between the last column and the input fields that follow. So let's go ahead and take a look again and see the effect of all this one more time. We'll switch back over to the browser. So here is the browser okay, and you can see that in the desktop version we've got the labels floating next to the input fields. The input fields are kind of wide. And down here we have our three columns of check boxes. So I'm going to now go ahead and just size this down. And you can see that now the form fields are smaller and the labels are top aligned. The check boxes all flow in one single column.

Okay, so that summarizes the changes we had to make to the contact form. We had to get rid of the articleImage by setting its display to none for the mobile context so it wouldn't show up. We're going to change the multi-column layout to be just one column of text. And I am going to fix the form by using the new HTML5 form input types, as well as changing the styling, so that the form elements would show up in sizes and positions that made sense on a mobile screen size.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24280 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.