This form is used when one wants to subscribe to the newsletter of a website. A person may want to subscribe to a newsletter, when he wants to stay up-to-date about news without having to visit the website every day.

Context of Use

A subscription form to a newsletter is useful, when someone wants to stay informed about the website or company behind the website. The newsletter becomes extra useful when it appears regularly and contains information the subscriber is interested in.

How it works

When one wants to receive digital newsletters of a website, he has to subscribe himself. Information that is needed, is the visitor’s e-mail address. Sometimes the visitor can choose which newsletters he wants to subscribe to. Then, each newsletter has to be clearly presented with a short description and title. Information about the frequency of the newsletter is also communicated on the website.

When the e-mail address entered is not valid, an error message appears above the label after clicking the ’subscribe button’. This error message is clearly recognizable. The message has to help the visitor providing the right information. Therefore, the message may include a text like the following: “The e-mail address is not valid or no longer exists. Perhaps the e-mail address was misspelled.”

When the ‘subscribe’ button is pressed, a confirmation e-mail is sent. This confirmation e-mail contains a message which informs the subscriber on which newsletters he is subscribed to. The e-mail also provides a link to an ‘unsubscribe’ button.

Specification

In order to successfully be subscribed to a digital newsletter, a valid e-mail address is needed.

This form can be submitted in order to leave comments on a text, photo or video. Sometimes it is restricted which persons to the website can and cannot post a comment to certain content.

Context of Use

A comment form is used when a visitor to a website wants to leave a comment to specific content (e.g. photos, videos, texts). It can also be used to leave a comment on a webpage in general, e.g. at a community website and its profile pages.

How it works

Someone wants to leave a comment on certain content, e.g. a blog post, article or presentation. Therefore, this person has to submit a comment form (also known as ‘comment box’). Some fields of this form are required. Required fields are clearly labelled with an asterisk symbol, and the sentence “Fields marked with an * symbol are mandatory” has to be implemented.
‘Name author’ and ‘Comment’ are required fields. When the author presses the submit button and required information is not provided, the form will not validate. The required fields know a deviant design, and a text appears to guide the author during completion of the form. For instance, “This field is required. Please type a comment to submit”. Depending on the purpose of the website, sometimes an e-mail address is also marked as required field. For instance, on a weblog it is useful to know how to contact the author. Then, it is important to communicate that e-mail addresses are not published on the website.
Additional fields may be ‘Website URL’, ‘E-mail address’ and ‘Title of Comment’. The author of the comment may also tick a notification box. This box, when ticked, sends notifications to the author’s e-mail address of all messages and comments published after the comment to be published.

Specification

Required fields for a comment form should be ‘Name author’ and ‘Comment’. Additional fields may be ‘Website URL’ ‘Title of Comment’ and ‘Notification box’. Depending on the purpose of the comment box and website, the field ‘E-mail address’ may or may not be mandatory.

A log in form includes two fields. One has to complete its fields in order to access a protected area of the site. Access to the secured area is granted when the user has provided a valid combination of e-mail address and password.

Context of Use

Log in screens are displayed when a website has a protected area. Often this protected area knows personal information about the user. It also provides a user with more privileges and tools than a regular visitor to the site. 

How it works

When a user is registered to the website, he may access the secure area of the website by logging in. A text has to explain that one has to be registered to have access to the secure website area. A hyper link to the registration page has to be communicated as well. The user has to to complete two required fields. These mandatory fields are clearly labelled with an asterisk symbol. The first field asks for an e-mail address, whereas the second field asks for the user’s password.
Sometimes a website asks for an user name instead of e-mail address, but when users are members of several websites, they often forget their user name. Then, it is best to ask for an e-mail address, to which a registration e-mail with confirmation link is sent after registration (to prevent abuse of someone’s e-mail address).
At some websites a password can be chosen by the user itself (during registration process), at other websites a password is sent to the user’s e-mail address (mostly, for first log in).
When the user presses the ‘log in’ button, the fields have to validate and the user is logged in. When this does not happen, a text appears: “This combination of e-mail address and password is not known to us.” The user has to be guided what tasks he has to perform next. A user may be notified of a “Forgot password”-option and contacting a help desk in this phase.
The website may also offer a box that may be ticked, to stay logged in the next time that the user visits the website. Possible risks have to be communicated (e.g. “Only tick this box when you are the only one who uses this computer…”).

Specification

Required fields for a log in screen should be ‘E-mail address’ and ‘Password’. 

A form that is sent by a registered user of a website to one or multiple contacts. A contact can be invited by manually typing the contact’s e-mail address and name. Often the user may include a personal message or edit the standard composed text.

Context of Use

Invite a friend is often used at community sites. A registered user can notify his friends to register themselves on the website. Once they are registered, these friends can invite their own contacts to the website.

How it works

Users may invite their contacts to join a website. This step is often a part of the registration process. On most websites the user has to be logged in. Once one is logged in, he can choose to invite friends. The user has to manually provide the names and e-mail addresses of the contacts he wants to invite. These fields are mandatory and are marked with an asterisk (it is important to include the sentence: ‘Fields with * are mandatory’ on top of the page). For each name and e-mail address that is submitted (by pressing on ‘Add this friend’ button or enter) new ‘Name’ and ‘E-mail address’ fields appear, and so on… Sometimes the user is able to send a personal message as well, or a standard text can be edited in the text field. Composing a personal message is not mandatory to send invitations, but does seem more friendly and feels more personal towards the recipients. Once the user has provided all the required information, a button has to be pressed to submit the invitations.

The invitations are send to the recipients. The invitation includes a standard text sometimes accompanied by a personal message or an edited version of the standard text. The name and e-mail address of the sender is also communicated to the recipient (note: due to the log in, this information can be automatically accessed) in the invitation e-mail. The most important element in this invitation is a prominent call-to-action button to register themselves on the website. The button is linked to the specific ‘Register’ page on the website. The text in the invitation e-mail may look like: “Dear [name recipient], [name sender] ([e-mail address sender]) wants to invite you to join our community (space for USP of the website community). Please follow this link to join us: HYPERLINK “http://www.titlesite.com/mainmenu/submenu” http://www.titlesite.com/mainmenu/submenu (this links to a registration page). When you are not able to view the content of the link, please paste the URL in your browser. With kind regards, [team or contact person of company] HYPERLINK “http://www.titlesite.com” http://www.titlesite.com”
Once the invitations are sent, a confirmation message is shown on screen. The user is informed on the e-mail addresses the invitations have been sent to.

Specification

The user is required to provide e-mail addresses and names of the contacts he wishes to invite. ‘Personal message’ is an optional field. The user’s e-mail address and name are extracted from his registered personal information.

Related patterns

Contact form (pattern C70001) pattern and Mail-a-friend (pattern C70003) pattern are related to the Invite-a-friend pattern, because of their almost identical lay-out and fields. The striking difference between these patterns lies in their purpose. The contact form aims to contact the website’s owner, whereas the mail-a-friend form and invite-a-friend form want to recommend the website’s content to other persons. The mail-a-friend form is most similar to the invite-a-friend form, they both recommend certain content to a friend (main difference: the latter always recommends the website as a whole with the specific objective to register). However, all forms send a message to a receiver.

A form that can be sent by a website’s visitor to recommend specific content, or the website as a whole, to one or multiple ‘ friends’. The form asks for contact details, with some fields required and some fields left open.

Context of use

This form can be used, whenever a user might wish to share website content (or the website as a whole) with other persons.

How it works

Some information is mandatory in a ‘mail a friend’ form. The person who sends the form to the recipient, needs to identify himself by providing his name and e-mail address. Naturally, the e-mail address of the recipient is required information as well, otherwise we would not know whom to send the message to. To personalize the sent information, it is necessary to provide the recipient’s name also. It is important to communicate clearly in text (Fields with * are mandatory) and visually (mark the significant fields with an asterisk symbol) which fields are required. Fields like ‘send me a copy of this message’ or a text field, are additional fields (e.g. a sender may choose to type a personal message to his friend).

The sender has to press a button to submit the form. When the form does not validate, he will see an error message above the related field. This error message never just warns the user, but its main purpose is to offer guidance to successfully send the form (e.g. ‘Please fill in the recipient’s e-mail address to successfully send this message’).

When all criteria have been met, the recipient (or multiple recipients; note: one is never notified when a message is sent to other recipients as well) receives an e-mail, most likely with their friend’s name and e-mail address, personal message and link to the recommended content. The text in the e-mail looks like: “Dear [name recipient], [name sender] thought you might like the information on this page (or: website) (this links to a specific url). When you are not able to view the content of the link, please paste the following URL in your browser: HYPERLINK “http://www.titlesite.com/mainmenu/submenu” http://www.titlesite.com/mainmenu/submenu. Please contact [name sender] via [e-mail address sender]. With kind regards, [team or contact person of company] http://www.titlesite.com”

A form which can be used by a visitor to contact the website’s owner. The form asks for contact details, some required fields, some free fields.

Context of Use

A contact form is generally used as an initial contact moment. Almost every website has a general contact form.

How it works

The form validates the information filled in the input fields. Each field requires a certain input format. For example, a telephone field can only contain numbers and an E-Mail address requires a ‘@’ and an extension ‘.nl’. The user has to press a button to submit the form. When a form doesn’t validate, the user gets to see an error message. Never just warn the user, always reach a helping hand (for example ‘Without your message we don’t know what to reply on.’). Sometimes a user can request a carbon copy of the sent message. Once the form validates the message is sent to the website owner, sometimes a carbon copy is sent to the user and a confirmation message appears on screen. The user gets informed on the reply period.

The carbon copy will be sent to the user’s e-mail address. This e-mail consists of the following information: “Dear [name user], you have contacted [name company’s website] by sending our contact form. We will contact you within 24 hours. A copy of your message is included. With kind regards [name contact person] HYPERLINK “http://www.titlesite.com” http://www.titlesite.com. Original message: [original message].”

Specification

Required fields for a contact form should be ‘Name’, ‘E-Mail address’ and ‘Message’. Additional fields can be ‘Telephone number’ and ‘Send me a carbon copy of the message’. There may be reasons to ask more from your user, but keep in mind that it is never smart to ask too much in a first user approach. Once you’re in contact you can always ask for more information.