Section

Microsite Form CTA

SCSS Location: /styles/scss/partial/_cta.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

CTA for displaying a Pardot form for the microsite.

Guidelines

Item Design Guidelines Not Provided

Usage

The Customer Story CTA content stands alone in a region below the primary content container.

Example

Taxamo Assure, outsourcing VAT management as easy as 1-2-3.

From VAT calculation and invoicing at checkout to returns filing and payments, Taxamo takes on every step eliminating VAT responsibility for the seller.

  1. Register with Taxamo and integrate our technology into your e-commerce platform.
  2. Taxamo determines VAT in real time and invoices the buyer during the checkout process.
  3. Taxamo pulls required VAT data from the ecommerce platform and manages EU VAT filings and payments.

<div class="page-node-type-microsite">
        <section class="microsite__card microsite__card--teal-dark microsite__card--form cta__container cta__container--full">
            <div class="microsite__card-content microsite__card-content--card cta__wrapper container-fluid">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1 col-xl-12 col-xl-offset-0 cta__inner">
                        <div class="cta__content">
                            <div class="cta__content-inner">
                                <h2 class="u-margin-hug-top cta__title">Taxamo Assure, outsourcing VAT management as easy as 1-2-3.</h2>
                                <p>From VAT calculation and invoicing at checkout to returns filing and payments, Taxamo takes on every step eliminating VAT responsibility for the seller.</p>
                                <ol>
                                    <li>Register with Taxamo and integrate our technology into your e-commerce platform.</li>
                                    <li>Taxamo determines VAT in real time and invoices the buyer during the checkout process.</li>
                                    <li>Taxamo pulls required VAT data from the ecommerce platform and manages EU VAT filings and payments.</li>
                                </ol>
                            </div>
                        </div>
                        <div class="cta__content cta__content--form">
                            <div class="form-container form-container--cta">
                                <form action="#" method="POST" class="form form--2-col form" data-form="validate">
                                    <div class="form__grid">
                                        <div class="form__item form__item--2-col">
                                            <label for="firstname" class="u-sr-only">First Name</label>
                                            <div class="input__wrapper">
                                                <input type="text" id="firstname" name="firstname" placeholder="First Name" required>
                                            </div>
                                        </div>
                                        <div class="form__item form__item--2-col">
                                            <label for="lastname" class="u-sr-only">Last Name</label>
                                            <div class="input__wrapper">
                                                <input type="text" id="lastname" name="lastname" placeholder="Last Name" required>
                                            </div>
                                        </div>
                                        <div class="form__item form__item--2-col">
                                            <label for="job-level" class="u-sr-only">Job Level</label>
                                            <div class="input__wrapper">
                                                <select id="job-level" name="job-level" required>
                                                    <option value disabled="disabled" hidden="hidden" selected="selected">Select Job Level</option>
                                                    <option value="0">Job Level 1</option>
                                                    <option value="1">Job Level 2</option>
                                                    <option value="2">Job Level 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form__item form__item--2-col">
                                            <label for="functional-role" class="u-sr-only">Functional Role</label>
                                            <div class="input__wrapper">
                                                <select id="functional-role" name="functional-role" required>
                                                    <option value disabled="disabled" hidden="hidden" selected="selected">Select Functional Role</option>
                                                    <option value="0">Functional Role 1</option>
                                                    <option value="1">Functional Role 2</option>
                                                    <option value="2">Functional Role 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form__item form__item--2-col">
                                            <label for="company" class="u-sr-only">Company</label>
                                            <div class="input__wrapper">
                                                <input type="text" id="company" name="company" placeholder="Company" required>
                                            </div>
                                        </div>
                                        <div class="form__item form__item--2-col">
                                            <label for="phone" class="u-sr-only">Phone (optional)</label>
                                            <div class="input__wrapper">
                                                <input type="tel" id="phone" name="phone" placeholder="Phone Number">
                                            </div>
                                        </div>
                                        <div class="form__item">
                                            <label for="email" class="u-sr-only">Company Email</label>
                                            <div class="input__wrapper">
                                                <input type="email" id="email" name="email" placeholder="Company Email" required>
                                            </div>
                                        </div>
                                        <div class="form__item form__item--2-col">
                                            <label for="country" class="u-sr-only">Country</label>
                                            <div class="input__wrapper">
                                                <select id="country" name="country" required>
                                                    <option value disabled="disabled" hidden="hidden" selected="selected">Country</option>
                                                    <option value="0">Country 1</option>
                                                    <option value="1">Country 2</option>
                                                    <option value="2">Country 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form__item form__item--2-col pad-bottom">
                                            <label for="city" class="u-sr-only">Select Country First</label>
                                            <div class="input__wrapper">
                                                <select id="city" name="city" required>
                                                    <option value disabled="disabled" hidden="hidden" selected="selected">Select Country First</option>
                                                    <option value="0">City 1</option>
                                                    <option value="1">City 2</option>
                                                    <option value="2">City 3</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form__item">
                                            <div class="custom__cb">
                                                <input type="checkbox" id="styleguide_cb1_1" name="styleguide_cb1" class="checkbox--inverse">
                                                <label for="styleguide_cb1_1">
                                                    Yes, I understand and accept the Terms and Conditions and Privacy Policy
                                                    and consent to my information being used as above.
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form__item">
                                            <div class="custom__cb">
                                                <input type="checkbox" id="styleguide_cb1_2" name="styleguide_cb1" class="checkbox--inverse">
                                                <label for="styleguide_cb1_2">
                                                    If you would like to receive future communications from Vertex, Inc.
                                                    please check the box to confirm.  You can unsubscribe at any time.
                                                </label>
                                            </div>
                                        </div>
                                        <div class="u-margin-hug form__item">
                                            <input type="submit" class="u-margin-hug btn btn--secondary" value="Submit">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

Markup