I am going to go with approach C.
The reason being while Inline labels are great for saving space and serve the purpose of informing the user as well,they have a very distinctive disadvantage that the text disappears when the user selects the field and if the user does not know what the field stands for he might get confused and would have to clear the entire data entered to check if he was entering the data in the correct field (this is assuming the moment ,the user focus shifts from the selected field, the label returns in case the field is empty).
I would recommend going for the approach of top aligned labels. This article about Mobile UX form design has this to say about the benefits of Top aligned labels
Each label alignment has pros and cons. When designing a Web form,
it’s more important to choose one which suits to your form purpose,
design constraints and so on. However, for mobile forms, horizontal
labels (left- and right- aligned) should be avoided. When users click
on an input field, the page is often automatically zoomed in to focus
on the field. If horizontal labels are used, it is almost impossible
to view both label and input field in one screen. In addition, due to
small screens, it could be tricky to show long labels if horizontal
labeling is used on mobile devices (e.g. Virgin Blue mobile version of
manage booking form).
These problems can be avoided by using top aligned labels.
If you must use the inline text for some reason, use it for providing hints as to the format of data to enter
With regards to color coding your mandatory fields, I am not sure how effective that would since that's usually not common practice and I would recommend going for a * to indicate a mandatory field. The reason being that having the * (in front of the label or field) has become some what of a de-facto standard with regards to a form field being mandatory and coming up with a new design might just confuse people about whether its mandatory or not.
This article by Smashing Magazine provides an alternate approach where it explicit suggests putting a required field next to the label
You can position required field markers in one of two places:
- Next to labels, allowing users to scan the form quickly,
- Next to or inside input fields
Lastly, since in your design only two fields are not required (as per step 3) you can just mark the non-mandatory fields . Here is an interesting article which talks about that :
Always Mark Optional Form Fields Not Required Ones
To quote it:
To make the user’s life easier, you should quit marking the required
fields and only mark the optional fields. This is because users
usually come to forms already expecting to fill everything out. It’s
implicit in the nature of forms, so there’s no need to explicitly tell
users what they need to fill out. What’s more helpful is telling them
what they don’t need to fill out because it cuts down their work. The
only time a user would question whether a field needs filling out is
if the information that you’re asking for is something they really
don’t want to give you. For this reason, it’s important that your form
only asks for information you absolutely need.
However, I'd like some criticism as to both designs.
