An engaging contact experience – one that delights the user – will result in improved engagement / lead generation.
Notice the flood of violet to draw attention in stark contrast to the rest of the site display.
User interface cues help with error states, and the colors pass WCAG 2.1 Level AA contrast / luminosity standards.
The submit button only becomes active/able to be pressed when all required information is filled out correctly.
<main>
<section class="contact-us">
<div class="container contact-us__container">
<div class="row">
<div class="col-12 col-md-9">
<h1 class="mb-5">Contact Us</h1>
</div>
<!--form left column-->
<div class="col-12 d-lg-none contact-us-intro">
<p>Please contact us for information on how we can help you with one of our solutions, lorem ipsum.</p>
<p>If you are looking for information on your pension, jump to <a href="#">Other ways to contact us</a>.</p>
</div>
<div class="col-12 col-lg-7 contact-us-form">
<!--marketo script goes here-->
<script src="//web.wtwco.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_5066"></form>
<script>
MktoForms2.loadForm("//web.wtwco.com", "742-LZY-231", 5066);
</script>
<p class="font-p-small text-white mb-4">For more information on how we handle your personal information, please see our global <a class="font-p-small text-white" href=https://www.wtwco.com/Notices/global-website-privacy-notice>Privacy Policy.</a></p>
<p class="font-p-small text-white mb-0">This site is protected by reCAPTCHA and the Google
<a class="font-p-small text-white" href=https://policies.google.com/privacy>Privacy Policy</a> and
<a class="font-p-small text-white" href=https://policies.google.com/terms>Terms of Service</a> apply.
</p>
</div>
<!--form right column-->
<div class="col-12 offset-lg-1 col-lg-4 contact-us-info" id="contact-us-info">
<h3 class="mb-4">Other ways to contact us</h3>
<ul class="unordered-list">
<li><a href="https://www.wtwco.com/en-US/About-Us/pension-and-health-plan-inquiries">Pension information</a></li>
<li><a href="https://www.wtwco.com/en-US/About-Us/pension-and-health-plan-inquiries">Health plan information</a></li>
</ul>
<ul class="unordered-list">
<li><a href="https://www.wtwco.com/en-US/About-Us/pension-and-health-plan-inquiries">Pension information</a></li>
<li><a href="https://www.wtwco.com/en-US/About-Us/pension-and-health-plan-inquiries">Health plan information</a></li>
</ul>
<h3 class="mb-4 mt-5">Helpful links</h3>
<ul class="unordered-list">
<li><a href="https://www.wtwco.com/en-US/About-Us/frequently-asked-questions">Frequently asked questions</a></li>
<li><a href="https://www.wtwco.com/en-US/About-Us/office-locations">Office locations</a></li>
<li><a rel="noopener noreferrer" href="https://careers.wtwco.com/" target="_blank">Careers</a></li>
</ul>
</div>
</div>
</div>
<!-- button -->
<a class="btn btn-lg btn-light d-lg-none wtw-digital-violet contact-info-btn p-3 list-group-item" aria-label="More ways to contact us" type="button" name="button" href="#contact-us-info">
<span class="btn-text">More ways to contact us</span><i class="material-symbols-outlined" aria-hidden="true">arrow_right_alt</i>
</a>
</section>
</main>
No content for this section.
No content for this section.
No content for this section.