Tourguide.js

Checkout form

Below is an example usage of Tourguide.js' content based approach. Simply add tour step descriptions directly to the HTML elements on page using data-tour property. Click [Start tour] button below to start the guided tour:

Your cart 3

Product name
Brief description
$12
Second product
Brief description
$8
Third item
Brief description
$5
Promo code
EXAMPLECODE
-$5
Total (USD) $20

Billing address

First name

Valid first name is required.

Last name

Valid last name is required.

Example: tour step describing the two fields abowe is added usigng the following html: <div class="row" data-tour="step: 3; title: Customer name; content: Example cart customer name text displays customer name description">

Username

Your username is required.

Email (Optional)

Please enter a valid email address for shipping updates.

Address

Please enter your shipping address.

Address 2 (Optional)

Country

Please select a valid country.

State

Please provide a valid state.

Zip

Zip code required.

Shipping address is the same as my billing address

Save this information for next time

Payment

Credit card

Debit card

PayPal

Name on card Full name as displayed on card

Name on card is required

Credit card number

Credit card number is required

Expiration

Expiration date required

CVV

Security code required

Checkout form

Your cart 3

Product name

Second product

Third item

Promo code

Billing address

Payment