The examples below show possible content for the answer column of the Contact Decision Tree component.
It is placed in the same typographic scoping as it would in the answer column for testing.
In Amsterdam, the European
Headquartes of Teva is located:
Teva Europe B.V. Offices
Piet Heinkade 107
1019 GM Amsterdam
+31 (0)20-2193000 info@tevaeurope.com
<p>In Amsterdam, the European<br>
Headquartes of Teva is located:</p>
<p>Teva Europe B.V. Offices<br>
Piet Heinkade 107<br>
1019 GM Amsterdam</p>
<p>
<a href="#sample">Directions (Google Maps)</a>
</p>
<p>
+31 (0)20-2193000
<a href="#sample">info@tevaeurope.com</a>
</p>
Chartreuse salvia tacos asymmetrical tilde 90's celiac umami vice synth.
Brunch seitan irony polaroid artisan farm-to-table street carry forage cray.
<h5>Fixie whatever church-key</h5>
<p>
Chartreuse salvia tacos asymmetrical tilde 90's celiac umami vice synth.
</p>
<p>
Brunch seitan irony polaroid artisan farm-to-table street carry forage cray.
</p>
<p>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn">View All Articles</a>
</p>
<h5>Beard hoodie heirloom</h5>
<!-- Form -->
<form action="#form-102ab9" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
<div class="form-group">
<label for="control-ac6c54">Your Name</label>
<input aria-required="true" class="form-control" id="control-ac6c54" name="name-9539d3" placeholder="Your Name" required type="text">
</div>
<div class="form-group">
<label for="control-ad16a8">Your Email Address</label>
<input aria-required="true" class="form-control" id="control-ad16a8" name="name-bdb545" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
</div>
<div class="form-group">
<label for="control-97d30c">Your Message</label>
<textarea aria-required="true" class="form-control" id="control-97d30c" name="name-435ae6" placeholder="Your Message" required></textarea>
</div>
<div class="form-group">
<div class="custom-file">
<input class="custom-file-input" id="control-247513" name="name-52921e" type="file">
<label class="custom-file-label" data-browse="Find files" for="control-247513">
Pick file
</label>
</div>
</div>
<div class="form-group">
<div class="custom-checkbox custom-control">
<input aria-required="true" class="custom-control-input" id="control-8a701b" name="name-a06877" required type="checkbox">
<label class="custom-control-label" for="control-8a701b">
I agree with the
<a href="#sample">terms</a>
</label>
</div>
</div>
<div class="mt-n10 mb-20 vi-form__feedback vi-form__feedback--hint">All fields required</div>
<!-- Button type: solid -->
<button type="submit" class="vi-btn-solid vi-btn">Send Message</button>
</form>
<h5>Shoreditch ennui poutine</h5>
<div class="embed-responsive embed-responsive-16by9 mb-3">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2388.328123206228!2d6.540950951444106!3d53.22989419103006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c9cd3c2fbd6503%3A0x3049bc9631c0defb!2sShopping+Centre+Paddepoel!5e0!3m2!1sen!2snl!4v1531988944136" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<p>
<a href="#sample">Driving instructions</a>
</p>
Changelog
Fix
- 29 Aug 2024 - Fix file input issue.
- 23 Nov 2022 - signature field / contact decision tree integration
- Empty container focus.
- Prevent focus scroll conflicting with positioning
- Incorrect position loading indicator when direction RTL.
Added
- Accessibility: Keyboard accessible.
- RTL support
- Initial draft