Skip to content

Instantly share code, notes, and snippets.

@mwhiteley16
Last active August 19, 2024 20:37
Show Gist options
  • Save mwhiteley16/171ecd914f17bc093c954b70a6635e95 to your computer and use it in GitHub Desktop.
Save mwhiteley16/171ecd914f17bc093c954b70a6635e95 to your computer and use it in GitHub Desktop.
CWH Form HTML
<!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>
Email
</span>
</label>
<input
id="emailaddress1-1721674447788"
type="email"
name="emailaddress1"
placeholder="Email"
title="Email"
pattern="[^@\\s\"&lt;&gt;\\)\\(\\[\\]:;,.]+((\\.[^@\\s\"&lt;&gt;\\)\\(\\[\\]:;,.]+)+?|)@([^@\\s\"&lt;&gt;\\)\\(\\[\\]+:;.,-]+((\\.|\+|-|--)[^@\\s\"&lt;&gt;\\)\\(\\[\\]+:;.,-]+)+?|)(\\.[^0-9@\\s\"&lt;&gt;\\)\\(\\[\\]+:;.,-]+)+?)"
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