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.
- Register with Taxamo and integrate our technology into your e-commerce platform.
- Taxamo determines VAT in real time and invoices the buyer during the checkout process.
- 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>