Last active
August 19, 2024 20:37
-
-
Save mwhiteley16/171ecd914f17bc093c954b70a6635e95 to your computer and use it in GitHub Desktop.
CWH Form HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Marketing Form</title> | |
<meta name="referrer" content="never"> | |
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> | |
<meta type="xrm/designer/setting" name="layout-editable" value="marketing-designer-layout-editable"> | |
<style> | |
div[data-editorblocktype="Captcha"] td:nth-of-type(2) a { | |
text-decoration: none; | |
font-family: "Segoe UI", Arial, sans-serif; | |
font-size: 14px; | |
} | |
[data-layout="true"] { | |
margin: 0 auto; | |
max-width: 600px; | |
background-color: rgba(255, 255, 255, 0); | |
} | |
div[data-editorblocktype="Captcha"] table, | |
div[data-editorblocktype="Captcha"] div > table > tbody > tr > td:nth-of-type(2) { | |
width: 100% !important; | |
} | |
div[data-editorblocktype="Captcha"] div > div > table > tbody > tr:first-of-type > td:last-of-type { | |
padding-bottom: 12px !important; | |
} | |
div[data-editorblocktype="Captcha"] tr[id="wlspispHIPErrorContainer"] { | |
margin-top: 20px; | |
} | |
div[data-editorblocktype="Captcha"] tr[id="wlspispHIPErrorContainer"] td:nth-of-type(2) { | |
width: auto !important; | |
} | |
div[data-editorblocktype="Captcha"] tr[id="wlspispHIPErrorContainer"] img { | |
display: flex; | |
} | |
div[data-editorblocktype="Captcha"] td:nth-of-type(2) > div > div { | |
margin-top: 4px; | |
} | |
div[data-editorblocktype="Captcha"] td:nth-of-type(2) > div > div * { | |
font-weight: 400; | |
} | |
div[data-editorblocktype="Captcha"] td:nth-of-type(2) > div > div b { | |
color: #797775; | |
} | |
div[data-editorblocktype="Captcha"] tr:nth-of-type(2) > td { | |
height: 0px !important; | |
} | |
div[data-editorblocktype="Captcha"] td input { | |
margin-top: 20px !important; | |
padding: 6px 8px !important; | |
width: 100% !important; | |
} | |
div[data-editorblocktype="Captcha"] div[id^="wlspaudioBtnHolder"] { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.textFormFieldBlock label::after, | |
.twooption_checkbox label::after, | |
.dateTimeFormFieldBlock label::after, | |
.lookupFormFieldBlock label::after, | |
.twoOptionFormFieldBlock label.block-label::after, | |
.twoOptionFormFieldBlock div.twooption_checkbox label::after, | |
.optionSetFormFieldBlock label.block-label::after, | |
.multiOptionSetFormFieldBlock label.block-label::after, | |
.consentBlock label p:first-of-type::after, | |
.eventSession label::after, | |
div[data-editorblocktype="Captcha"] label[id^="wlspispHipInstructionContainer"]::after { | |
width: 22px; | |
display: inline-block; | |
line-height: 22px; | |
text-align: center; | |
color: #c33400; | |
content: "*"; | |
visibility: hidden; | |
} | |
div[data-required].textFormFieldBlock label::after, | |
div[data-required].dateTimeFormFieldBlock label::after, | |
div[data-required].lookupFormFieldBlock label::after, | |
div[data-required] div.twooption_checkbox label::after, | |
div[data-required] label.block-label::after, | |
div[data-required="true"].consentBlock label p:first-of-type::after, | |
div[data-editorblocktype="Captcha"] label[id^="wlspispHipInstructionContainer"]::after { | |
visibility: visible; | |
} | |
div[data-hide].textFormFieldBlock, | |
div[data-hide].dateTimeFormFieldBlock, | |
div[data-hide].lookupFormFieldBlock, | |
div[data-hide].twoOptionFormFieldBlock, | |
div[data-hide].optionSetFormFieldBlock, | |
div[data-hide].multiOptionSetFormFieldBlock { | |
background-image: url(data\003a image/svg+xml\003b base64,PHN2ZyBjbGFzc05hbWU9ImhpZGRlbkZpZWxkSWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPg0KICAgICAgICA8cGF0aCBkPSJNNzQgMjkybDkwLTkwIDE2MzAgMTYyOS05MSA5MS00NTctNDU3cS01NCAzNS0xMDUgNTN0LTExNyAxOHEtODAgMC0xNTAtMzB0LTEyMi04Mi04Mi0xMjItMzAtMTUwcTAtNjUgMTgtMTE2dDUzLTEwNkwzOTEgNjEwUTI2NiA3MTUgMTk3IDg1MXQtNjkgMzAxSDBxMC05MSAyMS0xNzl0NjAtMTcwIDk0LTE1MyAxMjYtMTMwTDc0IDI5MnptNjk0IDg2MHEwIDUzIDIwIDk5dDU1IDgyIDgxIDU1IDEwMCAyMHEzNiAwIDY3LTl0NjItMjdsLTM0OS0zNDlxLTE3IDMxLTI2IDYydC0xMCA2N3ptMzI4LTI0NUw5NjMgNzc0bDMwLTRxMTUtMiAzMS0yIDc5IDAgMTQ5IDMwdDEyMiA4MiA4MyAxMjMgMzAgMTQ5cTAgMTUtMiAzMHQtNCAzMWwtMTMzLTEzM3EtNDItMTMxLTE3My0xNzN6bTk1MiAyNDVoLTEyOHEwLTExOC0zNi0yMjF0LTk5LTE4OC0xNTAtMTUyLTE4NS0xMTMtMjA4LTcwLTIxOC0yNHEtOTggMC0xOTIgMTl0LTE4NSA1NmwtOTgtOThxMTE2LTUzIDIzMS03OXQyNDQtMjZxMTQ0IDAgMjg1IDM1dDI2NSAxMDUgMjI2IDE3MCAxNjYgMjM0cTQwIDgyIDYxIDE3MXQyMSAxODF6Ig0KICAgICAgICBmaWxsPSIjQzMzNDAwIiAvPg0KICAgICAgICA8L3N2Zz4=); | |
background-repeat: no-repeat; | |
background-size: 16px 16px; | |
background-position-x: 95%; | |
background-position-y: 28%; | |
} | |
.multiOptionSetFormFieldBlock fieldset > div > label { | |
font-weight: 400; | |
font-size: 14px; | |
line-height: 20px; | |
} | |
.twoOptionFormFieldBlock div.radiobuttons, | |
.optionSetFormFieldBlock div.radiobuttons { | |
padding: 0px; | |
margin: 0px; | |
border-radius: 0px; | |
} | |
.twoOptionFormFieldBlock div.twooption_checkbox > div, .consentBlock > div { | |
width: 100%; | |
border-radius: 0px; | |
} | |
.twoOptionFormFieldBlock div.radiobuttons div, | |
.optionSetFormFieldBlock div.radiobuttons div { | |
width: 100%; | |
} | |
.twoOptionFormFieldBlock div.twooption_checkbox div, | |
.consentBlock div { | |
padding: 0px; | |
margin: 0px; | |
} | |
.eventSessions { | |
font-size: 16px; | |
line-height: 1.2; | |
border: none | |
} | |
.eventSession label b { | |
display:inline | |
} | |
.eventSession > div > input[type="checkbox"] { | |
float: right; | |
} | |
.dividerWrapper p span { | |
line-height: 0px; | |
} | |
.notification-container { | |
margin-left: 10px; | |
margin-right: 10px; | |
margin-bottom: 10px; | |
margin-top: 10px; | |
} | |
.notification-message { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
min-height: 38px; | |
border: 1.44737px solid#CCCCCC; | |
border-radius: 10px; | |
margin-bottom: 10px; | |
margin-top: 10px; | |
} | |
.notification-message-hide { | |
display: none; | |
} | |
div[data-required].phoneFormFieldBlock label::after { | |
visibility: visible; | |
} | |
div[data-hide].phoneFormFieldBlock { | |
background-image: url(data\003a image/svg+xml\003b base64,PHN2ZyBjbGFzc05hbWU9ImhpZGRlbkZpZWxkSWNvbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPg0KICAgICAgICA8cGF0aCBkPSJNNzQgMjkybDkwLTkwIDE2MzAgMTYyOS05MSA5MS00NTctNDU3cS01NCAzNS0xMDUgNTN0LTExNyAxOHEtODAgMC0xNTAtMzB0LTEyMi04Mi04Mi0xMjItMzAtMTUwcTAtNjUgMTgtMTE2dDUzLTEwNkwzOTEgNjEwUTI2NiA3MTUgMTk3IDg1MXQtNjkgMzAxSDBxMC05MSAyMS0xNzl0NjAtMTcwIDk0LTE1MyAxMjYtMTMwTDc0IDI5MnptNjk0IDg2MHEwIDUzIDIwIDk5dDU1IDgyIDgxIDU1IDEwMCAyMHEzNiAwIDY3LTl0NjItMjdsLTM0OS0zNDlxLTE3IDMxLTI2IDYydC0xMCA2N3ptMzI4LTI0NUw5NjMgNzc0bDMwLTRxMTUtMiAzMS0yIDc5IDAgMTQ5IDMwdDEyMiA4MiA4MyAxMjMgMzAgMTQ5cTAgMTUtMiAzMHQtNCAzMWwtMTMzLTEzM3EtNDItMTMxLTE3My0xNzN6bTk1MiAyNDVoLTEyOHEwLTExOC0zNi0yMjF0LTk5LTE4OC0xNTAtMTUyLTE4NS0xMTMtMjA4LTcwLTIxOC0yNHEtOTggMC0xOTIgMTl0LTE4NSA1NmwtOTgtOThxMTE2LTUzIDIzMS03OXQyNDQtMjZxMTQ0IDAgMjg1IDM1dDI2NSAxMDUgMjI2IDE3MCAxNjYgMjM0cTQwIDgyIDYxIDE3MXQyMSAxODF6Ig0KICAgICAgICBmaWxsPSIjQzMzNDAwIiAvPg0KICAgICAgICA8L3N2Zz4=); | |
background-repeat: no-repeat; | |
background-size: 16px 16px; | |
background-position-x: 95%; | |
background-position-y: 28%; | |
} | |
.phoneFormFieldBlock .phoneCountryCode { | |
display: flex; | |
flex: 2 1 20%; | |
align-items: center; | |
flex-direction: row; | |
box-sizing: border-box; | |
border: 1px solid #e1dfdd; | |
border-radius: 2px; | |
justify-content: center; | |
background-color: transparent; | |
overflow: hidden; | |
width: 100%; | |
height: 100%; | |
} | |
.phoneFormFieldBlock .phoneCountryCodeLabel { | |
overflow: hidden; | |
margin: 0; | |
cursor: pointer; | |
padding-left: 5px; | |
padding-right: 5px; | |
opacity: 1; | |
text-align: center; | |
color: #605E5C; | |
background-color: #F3F2F1; | |
align-items: center; | |
align-self: stretch; | |
display: flex; | |
} | |
.phoneFormFieldBlock span[hidden] { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<form class="cwh-form cwh-form--marketing-form"> | |
<div data-layout="true" data-layout-version="v2"> | |
<div class="notification-container"> | |
<div class="notification-message notification-message-hide" data-notification-name="eventNotStarted"> | |
<div>This event has not started.</div> | |
</div> | |
<div class="notification-message notification-message-hide" data-notification-name="eventAtCapacity"> | |
<div>This event is fully booked</div> | |
</div> | |
<div class="notification-message notification-message-hide" data-notification-name="eventEnded"> | |
<div>This event has ended.</div> | |
</div> | |
</div> | |
<div data-section="true" class="emptyContainer columns-equal-class wrap-section"> | |
<div class="textFormFieldBlock half-width" data-editorblocktype="TextFormField" data-targetproperty="firstname" data-required="required"> | |
<label title="First Name" for="firstname-1721674430878"> | |
<span> | |
First Name | |
</span> | |
</label> | |
<input | |
id="firstname-1721674430878" | |
type="text" | |
name="firstname" | |
placeholder="First Name" | |
title="First Name" | |
maxlength="50" | |
required="required"> | |
</div> | |
<div class="textFormFieldBlock half-width" data-editorblocktype="TextFormField" data-targetproperty="lastname" data-required="required"> | |
<label title="Last Name" for="lastname-1721674437182"> | |
<span> | |
Last Name | |
</span> | |
</label> | |
<input | |
id="lastname-1721674437182" | |
type="text" | |
name="lastname" | |
placeholder="Last Name" | |
title="Last Name" | |
maxlength="50" | |
required=""> | |
</div> | |
<div class="textFormFieldBlock half-width" data-editorblocktype="TextFormField" data-targetproperty="emailaddress1" data-required="required"> | |
<label title="Email" for="emailaddress1-1721674447788"> | |
<span> | |
</span> | |
</label> | |
<input | |
id="emailaddress1-1721674447788" | |
type="email" | |
name="emailaddress1" | |
placeholder="Email" | |
title="Email" | |
pattern="[^@\\s\"<>\\)\\(\\[\\]:;,.]+((\\.[^@\\s\"<>\\)\\(\\[\\]:;,.]+)+?|)@([^@\\s\"<>\\)\\(\\[\\]+:;.,-]+((\\.|\+|-|--)[^@\\s\"<>\\)\\(\\[\\]+:;.,-]+)+?|)(\\.[^0-9@\\s\"<>\\)\\(\\[\\]+:;.,-]+)+?)" | |
required="required"> | |
</div> | |
<div class="phoneFormFieldBlock half-width" data-editorblocktype="PhoneFormField" data-targetproperty="address1_telephone1" data-countrycode="+"> | |
<label for="address1_telephone1-1721674459149" title="Address 1: Telephone 1"> | |
<span> | |
Phone | |
</span> | |
</label> | |
<div class="phoneCountryCode"> | |
<span class="phoneCountryCodeLabel" hidden=""> | |
+ | |
</span> | |
<input | |
id="address1_telephone1-1721674459149" | |
type="tel" | |
name="address1_telephone1" | |
placeholder="Phone" | |
title="Phone" | |
> | |
</div> | |
</div> | |
<div class="textFormFieldBlock half-width" data-editorblocktype="TextFormField" data-targetproperty="companyname" data-required="required"> | |
<label title="Company Name" for="companyname-1721674467693"> | |
<span> | |
Company | |
</span> | |
</label> | |
<input | |
id="companyname-1721674467693" | |
type="text" | |
name="companyname" | |
placeholder="Company Name" | |
title="Company Name" | |
maxlength="100" | |
required="required"> | |
</div> | |
<div class="textFormFieldBlock half-width" data-editorblocktype="TextFormField" data-targetproperty="jobtitle"> | |
<label title="Job Title" for="jobtitle-1721674473507"> | |
<span> | |
Title | |
</span> | |
</label> | |
<input id="jobtitle-1721674473507" type="text" name="jobtitle" placeholder="Job Title" title="Job Title" maxlength="100"> | |
</div> | |
</div> | |
<div data-section="true" class="emptyContainer columns-equal-class wrap-section" style="margin: 0px; border-radius: 0px;"> | |
<div class="optionSetFormFieldBlock" data-editorblocktype="OptionSetFormField" data-targetproperty="cwh_healthcaresegmentcode"> | |
<label title="Healthcare Segment" class="block-label" for="cwh_healthcaresegmentcode-1721674482630"> | |
<span> | |
Healthcare Segment | |
</span> | |
</label> | |
<select id="cwh_healthcaresegmentcode-1721674482630" name="cwh_healthcaresegmentcode" title="Healthcare Segment"> | |
<option value="" hidden=""> | |
-- Choose One -- | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560000" value="771560000"> | |
Payer | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560001" value="771560001"> | |
Provider | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560002" value="771560002"> | |
Payvider | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560003" value="771560003"> | |
Technology Company | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560004" value="771560004"> | |
Services Company | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560005" value="771560005"> | |
Tech/Services Vendor | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560006" value="771560006"> | |
Government | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560007" value="771560007"> | |
Med Dev/Pharma | |
</option> | |
<option id="cwh_healthcaresegmentcode-1721674482630-771560008" value="771560008"> | |
Association | |
</option> | |
</select> | |
</div> | |
<div class="textFormFieldBlock" data-editorblocktype="TextFormField" data-targetproperty="subject" data-hide="hide"> | |
<label title="Topic" aria-label="null" for="subject-1721674535810"> | |
<div id="editorIdPrefixd6e2c11f9ff2b1722535748568" aria-readonly="false" tabindex="0" spellcheck="true" aria-multiline="true" aria-describedby="cke_146" aria-controls="cke_147" aria-activedescendant="" aria-autocomplete="list" aria-expanded="false" style="margin-top: 0px;"> | |
<span> | |
Subject | |
</span> | |
</div> | |
</label> | |
<input | |
id="subject-1721674535810" | |
type="text" | |
name="subject" | |
placeholder="Topic" | |
title="Topic" | |
maxlength="300" | |
value="Contact Us Form Submission"> | |
</div> | |
<div class="textFormFieldBlock" data-editorblocktype="TextAreaFormField" data-targetproperty="description"> | |
<label title="Description" for="description-1721674559919"> | |
<span> | |
Message | |
</span> | |
</label> | |
<textarea | |
id="description-1721674559919" | |
name="description" | |
placeholder="Description" | |
title="Description" | |
cols="20" | |
rows="5" | |
maxlength="2098"></textarea> | |
</div> | |
<div data-editorblocktype="SubmitButton" class="submitButtonWrapper"> | |
<button class="submitButton" type="submit" aria-label="Let's Connect"> | |
<span> | |
Let's Connect | |
</span> | |
</button> | |
</div> | |
</div> | |
</div> | |
</form> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment