Once you've setup a custom embed, see Creating an Embedded Signup, you can apply custom styles to match your organization's colors and brand guidelines.
For compact subscriber forms, the embedded frame will contain an HTML structure that resembles the following:
<div id="signup-outer-div">
<div class="signup-form-body">
<div class="dynamic-signup-form step-one" style="">
<div class="subscribe-prompt" style="">Sign up to receive regular update</div>
<div class="already-subscribed to-email" style="Display: None;">
<div class="processing"></div>
<div class="default-items">
<span class="already-text"><i class="fas fa-badge-check"></i> Email submitted</span> <a class="add-another"><i class="fas fa-undo-alt"></i> Show again</a>
</div>
</div>
<div class="form-processing-placeholder for-email" style="display: none;"></div>
<form class="input-wrapper-email" data-parsley-validate="" style="" novalidate="">
<label for="email" class="dyn-inp">
<input type="email" name="email" required="" placeholder=" " data-required-message="Please enter a valid email address" data-parsley-trigger="change">
<span class="label">Email</span>
<span class="border"></span>
</label>
<input class="btn btn-primary submit-inline display-dynamic" value="Subscribe" type="submit" style="width: 141.922px;">
</form>
<div class="email-phone-divider" style="display: none;"></div>
<div class="already-subscribed to-sms" style="display:none">
<div class="processing"></div>
<div class="default-items">
<span class="already-text"><i class="fas fa-comment-alt-check"></i> Phone number submitted</span><a class="add-another"><i class="fas fa-undo-alt"></i> Show again</a>
</div>
</div>
<form class="input-wrapper-sms" data-parsley-validate="" style="" novalidate="">
<input type="hidden" name="isParticipant" value="true">
<label for="phone" class="dyn-inp" style="width: 381.078px;">
<input type="text" name="phone" required="" placeholder=" " data-required-message="Please enter a valid phone number" data-parsley-minlength="10" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$">
<span class="label">SMS</span>
<span class="border"></span>
</label>
<input class="btn btn-primary submit-inline display-dynamic" value="Get alerts" type="submit" style="width: 141.922px;">
</form>
<div class="submit-wrapper display-simple" style="display:none">
<input id="submitButtonSimple" class="btn btn-primary text-white submit-main" value="Complete Sign Up" type="submit" style="color:#fff !important;">
</div>
</div>
<center class="already-responded wrapper bg-grey" style="display:none">
<label class="block">You've successfully responded to this form.</label>
<a href="#" id="backToForm">View form again</a>
</center>
<form class="dynamic-signup-form step-two" action="/Emails/DynamicLeadListSignup" data-parsley-validate="" method="post" style="Display: None;" novalidate="">
<input type="hidden" name="isParticipant" value="true">
<div class="form-fields"><label for="nameSimple" class="dyn-inp block"><input type="digits" name="nameSimple" data-fieldtype="3" placeholder=" "><span class="label">Your name</span><span class="border"></span></label><label for="address" class="dyn-inp block"><input type="text" name="address" data-fieldtype="6" placeholder=" "><span class="label">Address</span><span class="border"></span></label><label for="zip" class="dyn-inp block"><input type="digits" name="zip" data-fieldtype="7" placeholder=" "><span class="label">Zip</span><span class="border"></span></label></div>
<div class="submit-wrapper display-dynamic">
<a id="submitButton" class="btn btn-primary submit-main">Complete Sign Up</a>
</div>
<div id="manageUserSettings" style="display:none; text-align:center; margin-top: 1.5em">
<a href="#">Manage your subscriptions</a>
</div>
</form>
<div class="already-submitted step-two" style="Display: None;">
<div class="processing"></div>
<div class="default-items">
<span class="already-text"><i class="fas fa-badge-check"></i> You've completed this form.</span> <a class="show-form-again"><i class="fas fa-undo-alt"></i> Show again</a>
</div>
</div>
</div>
</div>
After the participant submits their phone or email, the form will show follow-up fields using HTML similar to this example:
<div id="signup-outer-div">
<div class="signup-form-body">
<div class="dynamic-signup-form step-one" style="">
<div class="subscribe-prompt" style="">Sign up to receive regular updates</div>
<div class="already-subscribed to-email" style="">
<div class="processing"><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></div>
<div class="default-items">
<span class="already-text"><i class="fas fa-badge-check"></i> Email submitted</span> <a class="add-another"><i class="fas fa-undo-alt"></i> Show again</a>
</div>
</div>
<div class="form-processing-placeholder for-email" style="display: none;"></div>
<form class="input-wrapper-email" data-parsley-validate="" style="display: none;" novalidate="" _lpchecked="1">
<label for="email" class="dyn-inp" style="width: 381.078px;">
<input type="email" name="email" required="" placeholder=" " data-required-message="Please enter a valid email address" data-parsley-trigger="change" data-parsley-id="5" class="parsley-success">
<span class="label">Email</span>
<span class="border"></span>
</label>
<input class="btn btn-primary submit-inline display-dynamic" value="Subscribe" type="submit" style="width: 141.922px;">
<input type="hidden" name="subscriberId" value="335"><input type="hidden" name="formResponseId" value="66630"></form>
<div class="email-phone-divider" style="display: none;"></div>
<div class="already-subscribed to-sms" style="display:none">
<div class="processing"></div>
<div class="default-items">
<span class="already-text"><i class="fas fa-comment-alt-check"></i> Phone number submitted</span><a class="add-another"><i class="fas fa-undo-alt"></i> Show again</a>
</div>
</div>
<form class="input-wrapper-sms" data-parsley-validate="" style="" novalidate="">
<input type="hidden" name="isParticipant" value="true">
<label for="phone" class="dyn-inp" style="width: 381.078px;">
<input type="text" name="phone" required="" placeholder=" " data-required-message="Please enter a valid phone number" data-parsley-minlength="10" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$">
<span class="label">SMS</span>
<span class="border"></span>
</label>
<input class="btn btn-primary submit-inline display-dynamic" value="Get alerts" type="submit" style="width: 141.922px;">
<input type="hidden" name="email" value="jay@publicinput.com"><input type="hidden" name="subscriberId" value="335"><input type="hidden" name="formResponseId" value="66630"></form>
<div class="submit-wrapper display-simple" style="display:none">
<input id="submitButtonSimple" class="btn btn-primary text-white submit-main" value="Complete Sign Up" type="submit" style="color:#fff !important;">
</div>
</div>
<center class="already-responded wrapper bg-grey" style="display:none">
<label class="block">You've successfully responded to this form.</label>
<a href="#" id="backToForm">View form again</a>
</center>
<form class="dynamic-signup-form step-two" action="/Emails/DynamicLeadListSignup" data-parsley-validate="" method="post" style="" novalidate="">
<input type="hidden" name="isParticipant" value="true">
<div class="form-fields"><label for="nameSimple" class="dyn-inp block"><input type="digits" name="nameSimple" data-fieldtype="3" placeholder=" " style=""><span class="label">Your name</span><span class="border"></span></label><label for="address" class="dyn-inp block"><input type="text" name="address" data-fieldtype="6" placeholder=" "><span class="label">Address</span><span class="border"></span></label><label for="zip" class="dyn-inp block"><input type="digits" name="zip" data-fieldtype="7" placeholder=" "><span class="label">Zip</span><span class="border"></span></label></div>
<div class="submit-wrapper display-dynamic">
<a id="submitButton" class="btn btn-primary submit-main">Complete Sign Up</a>
</div>
<div id="manageUserSettings" style="text-align: center; margin-top: 1.5em;">
<a href="#">Manage your subscriptions</a>
</div>
<div class="already-submitted step-two" style="Display: None;">
<div class="processing"></div>
<div class="default-items">
<span class="already-text"><i class="fas fa-badge-check"></i> You've completed this form.</span> <a class="show-form-again"><i class="fas fa-undo-alt"></i> Show again</a>
</div>
</div>
</div>
</div>
A starting point for your custom CSS can be the signup form's base CSS, which can be found at https://publicinput.com/Content/signup-form.css, which will have the most up-to-date styling. An example can also be found here:
.signup-form-body {
max-width: 600px;
margin: 0 auto;
background: #f4f6f8;
padding: 25px 20px;
}
.signup-form-body .subscribe-prompt {
font-size: 1.3em;
margin-bottom: 0.8em;
color: #333;
}
.input-wrapper-sms, .input-wrapper-email {
margin-top: 12px;
position: relative;
}
input.submit-inline, a.submit-main {
color: #FFF !important;
background-color: #03a9f4;
}
input.submit-inline {
top: 12px;
position: absolute;
right:2px;
}
@media only screen and (max-device-width : 350px) {
input.submit-inline {
display: block;
min-width: 100% !important;
position: relative;
margin-top: 6px;
top: auto;
right: auto;
}
label.dyn-inp {
min-width: 100%;
display: block;
}
}
.step-two {
margin-top: 20px;
}
.step-two .dyn-inp {
margin: 6px 0;
}
.submit-wrapper {
text-align: center;
margin: 12px 0 0;
}
a.submit-main {
min-width: 50%;
}
.already-subscribed.processing, .already-submitted.processing {
text-align: center;
background: #46B6AC;
height: 4em;
}
.already-subscribed.processing .default-items, .already-submitted.processing .default-items, .already-subscribed .processing, .already-submitted .processing {
display: none;
}
.already-subscribed.processing .processing, .already-submitted.processing .processing{
display: block;
height: 100%;
}
.already-subscribed.processing .lds-ellipsis {
height: 100%;
font-size: 1.1em;
}
.already-submitted.processing .lds-ellipsis {
height: 100%;
font-size: 1.5em;
}
.already-subscribed, .already-submitted {
margin: 10px 0 10px;
position: relative;
text-align: center;
background: #ffffffd9;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
transition: all 1s ease;
}
.already-subscribed .default-items, .already-submitted .default-items {
padding: 10px;
border-left: 4px solid #46B6AC;
}
.already-text i {
display: block;
color: #46B6AC;
font-size: 2em;
margin: 2px 5px 5px;
}
.already-text {
display: block;
color: #46B6AC;
}
.already-subscribed a, .already-submitted a {
font-size: .8em;
background: 0 0;
border: none;
border-radius: 2px;
position: absolute;
top: 0;
right: 0;
height: 36px;
margin: 0;
min-width: 64px;
padding: 0 16px;
display: inline-block;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle;
}
.already-subscribed a:hover, .already-submitted a:hover {
background-color: rgba(158,158,158,.2);
}
.btn {
display: inline-block;
position: relative;
cursor: pointer;
height: 35px;
line-height: 35px;
padding: 0 1.5rem;
color: #424242;
font-size: 15px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
letter-spacing: .8px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
outline: none;
border: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 2px;
transition: all .3s ease-out;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
}
.btn-primary:hover {
text-decoration: none;
box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.225);
}
.dyn-inp *:focus {
outline: 0 !important;
}
#submitButton {
color:#fff;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Open Sans", Arial, sans-serif !important;
margin: 0;
font-weight: 300;
}
* {
box-sizing: border-box;
}
.dyn-inp {
position: relative;
margin: auto;
width: 100%;
}
.dyn-inp .label {
position: absolute;
top: 16px;
left: 6px;
font-size: 16px;
color: #9098a9;
font-weight: 500;
transform-origin: 0 0;
transition: all 0.2s ease;
cursor: text;
}
.dyn-inp .border {
position: absolute;
top: 46px;
left: 0;
height: 2px;
width: 100%;
background: #07f;
transform: scaleX(0);
transform-origin: 0 0;
transition: all 0.15s ease;
border: inherit !important;
}
.dyn-inp input {
-webkit-appearance: none;
width: 100%;
border: 0;
font-family: inherit;
padding: 12px 6px 2px;
height: 48px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid #c8ccd4;
background: none;
border-radius: 0;
color: #223254;
transition: all 0.15s ease;
background: rgba(255, 255, 255, 0.39);
border-radius: 2px;
}
.dyn-inp input:hover {
background: rgba(34,50,84,0.03);
}
.dyn-inp .label.has-value, .dyn-inp input:not(:placeholder-shown) + span {
color: #5a667f;
transform: translateY(-18px) scale(0.75);
}
.dyn-inp input:focus {
background: #fff;
outline: none;
}
.dyn-inp input:focus ~ span {
color: #07f;
transform: translateY(-18px) scale(0.75);
}
.dyn-inp input:focus ~ .border {
transform: scaleX(1);
}
.lds-ellipsis {
display: inline-block;
position: relative;
width: 4.5em;
height: 5em;
}
.lds-ellipsis div {
position: absolute;
top: calc(50% - .2em);
width: .9em;
height: .9em;
border-radius: 50%;
background: #fff;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
left: .2em;
animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
left: .455em;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
left: 2.3em;
animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
left: 3.75em;
animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes lds-ellipsis3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes lds-ellipsis2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(1.2em, 0);
}
}
input.parsley-success, select.parsley-success, textarea.parsley-success {
color: #468847;
background-color: #DFF0D8;
border: 1px solid #D6E9C6;
}
input.parsley-error, select.parsley-error, textarea.parsley-error {
background-color: #F2DEDE;
}
li.parsley-required {
margin-top: 4px;
}
.parsley-errors-list {
margin: 2px 0 3px;
padding: 0;
list-style-type: none;
font-size: 0.9em;
line-height: 0.9em;
opacity: 0;
transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
.parsley-errors-list.filled {
opacity: 1;
}
Related articles:
Creating an Embedded Signup