I tried to interpret the instructions from this Forum post:
but there were several different "issues" tackled in that post and I wasn't able to determine which were applicable to me.
My site is: Website: https://nonagon-blackbird-dbdy.squarespace.com/ PW: sscommunityhelp062723
I have numerous pages and in some cases I might have several different buttons on a single page, where I want to load Flodesk optin form on button click.
An example of how this works is on the old wordpress site I am migrating over: https://teachingideas4u.com/free-social-studies-guide that loads an optin when the button is clicked.
I need the same function in Squarespace with FloDesk forms.
In Flodesk I have the option of the following embeds:
Header Code Injection <script>
(function(w, d, t, h, s, n) {
w.FlodeskObject = n;
var fn = function() {
(w[n].q = w[n].q || []).push(arguments);
};
w[n] = w[n] || fn;
var f = d.getElementsByTagName(t)[0];
var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
var sm = d.createElement(t);
sm.async = true;
sm.type = 'module';
sm.src = h + s + '.mjs' + v;
f.parentNode.insertBefore(sm, f);
var sn = d.createElement(t);
sn.async = true;
sn.noModule = true;
sn.src = h + s + '.js' + v;
f.parentNode.insertBefore(sn, f);
})(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
</script>
<script>
window.fd('form', {
formId: '649c2c6b918a722b7047ee8d'
});
</script>
Advanced - Get Raw HTML with or without Java and/or CSS
Here is the Raw HTML with both Javascript and CSS enabled (as an example):
<link rel="preload" href="https://use.typekit.net/ydd4yxt.css" as="style">
<link rel="stylesheet" href="https://use.typekit.net/ydd4yxt.css">
<style>
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d *,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d *::before,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d *::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [tabindex="-1"]:focus {
outline: none !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h1,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h2,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h3,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h4,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h5,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d h6 {
margin-top: 0;
margin-bottom: 0.7em;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d p {
margin-top: 0;
margin-bottom: 1rem;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ol,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ul,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d dl {
margin-top: 0;
margin-bottom: 1.4rem;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ol ol,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ul ul,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ol ul,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ul ol {
margin-bottom: 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d strong {
font-weight: bolder;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d small {
font-size: 80%;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sub,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sub {
bottom: -0.25em;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d sup {
top: -0.5em;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d {
color: #000000;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d a:hover {
color: #4396fd;
text-decoration: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d img {
border-style: none;
vertical-align: middle;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d svg:not(:root) {
overflow: hidden;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d area,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [role="button"],
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d label,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d select,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d summary,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d textarea {
touch-action: manipulation;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d label {
display: inline-block;
font-weight: bolder;
margin-bottom: 0.7rem;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button:focus {
outline: 1px dotted;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d select,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d optgroup,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d textarea {
margin: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input {
overflow: visible;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d select {
text-transform: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button,
html[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="button"],
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="reset"],
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="submit"] {
-webkit-appearance: button;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d button::-moz-focus-inner,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="button"]::-moz-focus-inner,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="reset"]::-moz-focus-inner,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="radio"],
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="checkbox"] {
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="date"],
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="time"],
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="datetime-local"],
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d input[type="month"] {
-webkit-appearance: listbox;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d textarea {
resize: vertical;
overflow: auto;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="number"]::-webkit-inner-spin-button,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="number"]::-webkit-outer-spin-button {
height: auto;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="search"]::-webkit-search-cancel-button,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d ::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d [hidden] {
display: none !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
opacity: 0;
outline: 0;
z-index: -1;
position: fixed;
background: rgba(0, 0, 0, 0.4);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: opacity 0.4s, visibility 0.4s;
transition: opacity 0.4s, visibility 0.4s;
visibility: hidden;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal.fd-is-open {
opacity: 1;
z-index: 1040;
visibility: visible;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__dialog {
width: calc(100% - 60px);
margin: 30px auto;
display: -webkit-box;
display: flex;
position: relative;
max-width: 750px;
min-height: calc(100% - 60px);
-webkit-box-align: center;
align-items: center;
pointer-events: none;
-webkit-box-pack: center;
justify-content: center;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__content {
width: 100%;
border: 0 solid #d7d7d7;
display: -webkit-box;
display: flex;
outline: 0;
position: relative;
background: #fff;
-webkit-box-shadow: 6.5px 11.3px 19px 0 rgba(0, 0, 0, 0.11);
box-shadow: 6.5px 11.3px 19px 0 rgba(0, 0, 0, 0.11);
border-radius: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
pointer-events: auto;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__body {
-webkit-box-flex: 1;
flex: 1 1 auto;
padding: 0;
position: relative;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close {
top: 0;
color: #000;
right: 0;
width: 40px;
border: 0;
cursor: pointer;
height: 40px;
margin: 0;
display: -webkit-box;
display: flex;
padding: 0;
z-index: 9999;
position: absolute;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
-webkit-box-align: center;
align-items: center;
line-height: 1;
-webkit-box-pack: center;
justify-content: center;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close svg {
color: inherit;
width: 10px;
height: auto;
display: block;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close:hover,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close:focus,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__close:active {
outline: none;
}
@media (max-width: 575px) {
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-modal__dialog {
width: calc(100% - 30px);
margin: 15px auto;
min-height: calc(100% - 30px);
}
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control {
width: 100%;
display: block;
outline: none;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control:focus {
outline: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control::-webkit-input-placeholder {
color: transparent !important;
opacity: 0 !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control::-moz-placeholder {
color: transparent !important;
opacity: 0 !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control::placeholder {
color: transparent !important;
opacity: 0 !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-label {
top: 0;
left: 0;
right: 0;
margin: 0;
overflow: hidden;
position: absolute;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control:not(:-moz-placeholder-shown)+.fd-form-label {
opacity: 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-control:not(:placeholder-shown)+.fd-form-label {
opacity: 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-description {
margin: 5px 0 0 0;
font-size: 0.8em;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-feedback {
margin: 5px 0 0 0;
font-size: 0.8em;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group {
margin: 0 0 15px;
position: relative;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-feedback,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-check {
color: #02dba8 !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-control {
color: #02dba8 !important;
border-color: #02dba8 !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-success .fd-form-feedback {
display: block;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-feedback,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-check {
color: #eb3d3b !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-control {
color: #eb3d3b !important;
border-color: #eb3d3b !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-group.fd-has-error .fd-form-feedback {
display: block;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn {
cursor: pointer;
display: -webkit-inline-box;
display: inline-flex;
outline: none;
max-width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-style: normal;
text-align: center;
-webkit-box-align: center;
align-items: center;
text-shadow: none;
white-space: normal;
-webkit-box-pack: center;
justify-content: center;
text-decoration: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn:hover {
outline: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn:focus {
outline: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-btn:disabled {
opacity: 0.8;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check {
cursor: pointer;
margin: 0;
display: -webkit-box;
display: flex;
position: relative;
-webkit-box-align: center;
align-items: center;
padding-left: 30px;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input {
top: 0;
left: 0;
width: 18px;
height: 18px;
opacity: 0;
z-index: -1;
position: absolute;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__checkmark {
top: 0;
left: 0;
width: 18px;
height: 18px;
display: block;
position: absolute;
-webkit-background-size: 18px 18px;
background-size: 18px;
background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4Z' fill='white'/%3e %3cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H16C18.0711 0.25 19.75 1.92893 19.75 4V16C19.75 18.0711 18.0711 19.75 16 19.75H4C1.92893 19.75 0.25 18.0711 0.25 16V4ZM4 1.75C2.75736 1.75 1.75 2.75736 1.75 4V16C1.75 17.2426 2.75736 18.25 4 18.25H16C17.2426 18.25 18.25 17.2426 18.25 16V4C18.25 2.75736 17.2426 1.75 16 1.75H4Z'/%3e %3c/svg%3e");
background-repeat: no-repeat;
background-position: center center;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__label {
margin: 0;
font-size: 14px;
text-align: left;
word-break: break-word;
font-weight: 400;
line-height: 18px;
letter-spacing: 0.01em;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input:checked+.fd-form-check__checkmark::after {
opacity: 1;
z-index: 1;
visibility: visible;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__checkmark::after {
top: 0;
left: 0;
width: 18px;
height: 18px;
content: "";
display: block;
opacity: 0;
z-index: 1;
position: absolute;
-webkit-transition: opacity 0.4s, z-index 0.4s;
transition: opacity 0.4s, z-index 0.4s;
visibility: inherit;
-webkit-background-size: 12px 12px;
background-size: 12px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='12' height='10' viewBox='0 0 11.51 8.2'%3e%3ctitle%3echeck%3c/title%3e%3cpath d='M4.05%2c8.2A.74.74%2c0%2c0%2c1%2c3.52%2c8L.22%2c4.68A.75.75%2c0%2c0%2c1%2c1.28%2c3.62l3.3%2c3.3A.75.75%2c0%2c0%2c1%2c4.58%2c8%2c.74.74%2c0%2c0%2c1%2c4.05%2c8.2Z'/%3e%3cpath d='M4.06%2c8.2A.74.74%2c0%2c0%2c1%2c3.53%2c8a.75.75%2c0%2c0%2c1%2c0-1.06l6.7-6.7a.75.75%2c0%2c0%2c1%2c1.06%2c1.06L4.59%2c8A.74.74%2c0%2c0%2c1%2c4.06%2c8.2Z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center center;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input:focus {
outline: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-content {
position: relative;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-success .fd-form-content {
display: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-captcha .fd-form-content>*:not(.fd-form-captcha) {
opacity: 0;
visibility: hidden;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-captcha {
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: flex;
position: absolute;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
justify-content: flex-start;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-success {
display: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-success .fd-form-success {
display: block;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-success>*:last-child {
margin-bottom: 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-error {
display: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-has-error .fd-form-error {
display: block;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-error>*:last-child {
margin-bottom: 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-focus-visible,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input.fd-focus-visible+.fd-form-check__checkmark {
outline: none;
-webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 6px #000 !important;
box-shadow: 0 0 0 2px #fff, 0 0 0 6px #000 !important;
-webkit-transition: -webkit-box-shadow 0.2s !important;
transition: -webkit-box-shadow 0.2s !important;
transition: box-shadow 0.2s !important;
transition: box-shadow 0.2s, -webkit-box-shadow 0.2s !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-focus-visible,
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .fd-form-check__input.fd-focus-visible+.fd-form-check__checkmark {
outline: none;
-webkit-box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #000 !important;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px #000 !important;
-webkit-transition: -webkit-box-shadow 0.2s !important;
transition: -webkit-box-shadow 0.2s !important;
transition: box-shadow 0.2s !important;
transition: box-shadow 0.2s, -webkit-box-shadow 0.2s !important;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal {
background: rgba(255, 255, 255, 0.5);
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal-dialog {
max-width: 575px;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal-content {
background: #ffffff;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__modal-close {
color: #000000;
position: absolute !important;
font-size: 12px;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__wrapper {
width: 100%;
position: relative;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__image {
width: 100%;
display: block;
overflow: hidden;
-webkit-background-size: cover;
background-size: cover;
background-image: url('https://usercontent.flodesk.com/885d460e-7ffd-48a4-ba35-d8d7542904ec/upload/6e016e4f-b5b0-49d3-b9ea-237d3efadc6f.png');
background-position: center;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__image-inner {
width: 100%;
height: 0;
display: block;
padding: 56.5% 0 0 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form {
color: #444444;
width: 100%;
margin: 0;
padding: 40px 24px;
font-size: 14px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.2999999999999998;
letter-spacing: 0.1px;
text-transform: none;
}
@media (max-width: 767px) {
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form {
word-wrap: anywhere;
word-break: break-word;
white-space: normal;
overflow-wrap: break-word;
}
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__title {
color: #9438B9;
width: 100%;
margin: 0 0 24px;
display: block;
font-size: 29px;
text-align: center;
font-family: halyard-text, sans-serif;
font-weight: 900;
line-height: 1;
letter-spacing: 0px;
text-transform: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__title * {
line-height: inherit;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__subtitle {
width: 100%;
margin: 0 0 32px;
display: block;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__subtitle * {
line-height: inherit;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__field {
margin: 0 0 16px;
font-size: 14px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
letter-spacing: 0.1px;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__field:last-of-type {
margin: 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__control {
color: #04007D;
border: 1px solid #04007D;
height: 46px;
padding: 12px 16px;
font-size: 14px;
background: transparent;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 20px;
border-radius: 4.6000000000000005px;
letter-spacing: 0.1px;
text-transform: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__label {
color: #04007D;
border: 1px solid transparent;
padding: 12px 16px;
font-size: 14px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.1px;
text-transform: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference {
margin: 36px 0;
display: -webkit-box;
display: flex;
-webkit-box-align: start;
align-items: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
@media (max-width: 400px) {
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-title {
color: #2C63D2;
width: 100%;
margin: 0 24px 0 0;
display: block;
font-size: 18px;
max-width: 50%;
text-align: left;
font-family: halyard-text, sans-serif;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0px;
text-transform: none;
}
@media (max-width: 400px) {
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-title {
margin: 0 0 32px;
max-width: 100%;
}
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-title * {
line-height: inherit;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-control {
width: 100%;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-list {
margin: -6px 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__preference-item {
padding: 6px 0;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__input {
top: 2.200000000000001px;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__checkmark {
top: 2.200000000000001px;
background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4Z' fill='white'/%3e %3cpath fill='black' fill-rule='evenodd' clip-rule='evenodd' d='M0.25 4C0.25 1.92893 1.92893 0.25 4 0.25H16C18.0711 0.25 19.75 1.92893 19.75 4V16C19.75 18.0711 18.0711 19.75 16 19.75H4C1.92893 19.75 0.25 18.0711 0.25 16V4ZM4 1.75C2.75736 1.75 1.75 2.75736 1.75 4V16C1.75 17.2426 2.75736 18.25 4 18.25H16C17.2426 18.25 18.25 17.2426 18.25 16V4C18.25 2.75736 17.2426 1.75 16 1.75H4Z'/%3e %3c/svg%3e");
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__label {
color: #2C63D2;
font-size: 14px;
min-height: 22.400000000000002px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0px;
text-transform: none;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__form-check .fd-form-check__checkmark::after {
-webkit-background-size: 12px 12px;
background-size: 12px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' width='12' height='10' viewBox='0 0 11.51 8.2'%3e%3ctitle%3echeck%3c/title%3e%3cpath d='M4.05%2c8.2A.74.74%2c0%2c0%2c1%2c3.52%2c8L.22%2c4.68A.75.75%2c0%2c0%2c1%2c1.28%2c3.62l3.3%2c3.3A.75.75%2c0%2c0%2c1%2c4.58%2c8%2c.74.74%2c0%2c0%2c1%2c4.05%2c8.2Z'/%3e%3cpath d='M4.06%2c8.2A.74.74%2c0%2c0%2c1%2c3.53%2c8a.75.75%2c0%2c0%2c1%2c0-1.06l6.7-6.7a.75.75%2c0%2c0%2c1%2c1.06%2c1.06L4.59%2c8A.74.74%2c0%2c0%2c1%2c4.06%2c8.2Z'/%3e%3c/svg%3e");
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__footer {
margin: 36px 0 0;
text-align: center;
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__button {
color: #ffffff;
width: auto;
border: 1px solid transparent;
display: inline-block;
padding: 12px 48px;
font-size: 18px;
background: #9438B9;
font-family: halyard-text, sans-serif;
font-weight: 700;
line-height: 20px;
border-radius: 4.6000000000000005px;
letter-spacing: 0.2px;
text-transform: none;
}
@media (max-width: 400px) {
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__button {
width: 100%;
}
}
[data-ff-el="root"].ff-649c2c6b918a722b7047ee8d .ff-649c2c6b918a722b7047ee8d__error {
margin: 10px 0 0 0;
}
</style>
<div class="ff-649c2c6b918a722b7047ee8d" data-ff-el="root" data-ff-version="3" data-ff-type="popup" data-ff-name="popupCardImage">
<!--tpl {% block config %} tpl-->
<div data-ff-el="config" data-ff-config="eyJ0cmlnZ2VyIjp7Im1vZGUiOiJpbW1lZGlhdGVseSIsInZhbHVlIjowfSwib25TdWNjZXNzIjp7Im1vZGUiOiJtZXNzYWdlIiwibWVzc2FnZSI6IiIsInJlZGlyZWN0VXJsIjoiIn0sImNvaSI6ZmFsc2UsInNob3dGb3JSZXR1cm5WaXNpdG9ycyI6dHJ1ZSwibm90aWZpY2F0aW9uIjp0cnVlfQ==" style="display: none"></div>
<!--tpl {% endblock %} tpl-->
<div class="ff-649c2c6b918a722b7047ee8d__modal fd-modal" data-ff-el="modal">
<div class="ff-649c2c6b918a722b7047ee8d__modal-dialog fd-modal__dialog" data-ff-el="modal-dialog">
<div class="ff-649c2c6b918a722b7047ee8d__modal-content fd-modal__content" data-ff-el="modal-content">
<div class="ff-649c2c6b918a722b7047ee8d__modal-body fd-modal__body" data-ff-el="modal-body">
<div class="ff-649c2c6b918a722b7047ee8d__wrapper">
<div class="ff-649c2c6b918a722b7047ee8d__image">
<div class="ff-649c2c6b918a722b7047ee8d__image-inner"> </div>
</div>
<form class="ff-649c2c6b918a722b7047ee8d__form" action="https://form.flodesk.com/forms/649c2c6b918a722b7047ee8d/submit" method="post" data-ff-el="form">
<div class="ff-649c2c6b918a722b7047ee8d__title">
<div>
<div data-paragraph="true">Gain Access to <br>Free Teaching Resources</div>
</div>
</div>
<div class="ff-649c2c6b918a722b7047ee8d__subtitle">
<div>
<div data-paragraph="true">Enter your information below and I'll have my team set you up to receive weekly-ish emails with the latest in:<br><br>+ educational articles<br>+ products, and<br>+ teaching tips...<br><br>ALL from a seasoned educator and modern curriculum developer.<br>Simply put, go from spending time on prep to investing in the lives that matter!<br><br><span style="color:#999999;">(Your information will <strong>never </strong>be shared or sold to a 3rd party.)</span></div>
</div>
</div>
<div class="ff-649c2c6b918a722b7047ee8d__content fd-form-content" data-ff-el="content">
<div class="ff-649c2c6b918a722b7047ee8d__fields" data-ff-el="fields">
<!--tpl {% block fields %} tpl-->
<div class="ff-649c2c6b918a722b7047ee8d__field fd-form-group">
<input id="ff-649c2c6b918a722b7047ee8d-firstName" class="ff-649c2c6b918a722b7047ee8d__control fd-form-control" type="text" maxlength="255" name="firstName" placeholder="First name" data-ff-tab="firstName::lastName" />
<label for="ff-649c2c6b918a722b7047ee8d-firstName" class="ff-649c2c6b918a722b7047ee8d__label fd-form-label">First name</label>
</div>
<div class="ff-649c2c6b918a722b7047ee8d__field fd-form-group">
<input id="ff-649c2c6b918a722b7047ee8d-lastName" class="ff-649c2c6b918a722b7047ee8d__control fd-form-control" type="text" maxlength="255" name="lastName" placeholder="Last name" data-ff-tab="lastName:firstName:email" />
<label for="ff-649c2c6b918a722b7047ee8d-lastName" class="ff-649c2c6b918a722b7047ee8d__label fd-form-label">Last name</label>
</div>
<div class="ff-649c2c6b918a722b7047ee8d__field fd-form-group">
<input id="ff-649c2c6b918a722b7047ee8d-email" class="ff-649c2c6b918a722b7047ee8d__control fd-form-control" type="text" maxlength="255" name="email" placeholder="Email address" data-ff-tab="email:lastName:submit" required />
<label for="ff-649c2c6b918a722b7047ee8d-email" class="ff-649c2c6b918a722b7047ee8d__label fd-form-label">Email address</label>
</div>
<input type="text" maxlength="255" name="confirm_email_address" style="display: none" />
<!--tpl {% endblock %} tpl-->
</div>
<div class="ff-649c2c6b918a722b7047ee8d__footer" data-ff-el="footer">
<button type="submit" class="ff-649c2c6b918a722b7047ee8d__button fd-btn" data-ff-el="submit" data-ff-tab="submit">
<span>Join the list</span>
</button>
</div>
</div>
<div class="ff-649c2c6b918a722b7047ee8d__success fd-form-success" data-ff-el="success">
<div data-paragraph="true">Thank you for subscribing!</div>
</div>
<div class="ff-649c2c6b918a722b7047ee8d__error fd-form-error" data-ff-el="error"></div>
</form>
</div>
</div>
<button class="ff-649c2c6b918a722b7047ee8d__modal-close fd-modal__close" data-ff-el="modal-close">
<svg style="width: 1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.51 14.51">
<line x1="1" y1="1" x2="13.51" y2="13.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
<line x1="13.51" y1="1" x2="1" y2="13.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
</svg>
</button>
</div>
</div>
</div>
</div>
<script>
(function(w, d, t, h, s, n) {
w.FlodeskObject = n;
var fn = function() {
(w[n].q = w[n].q || []).push(arguments);
};
w[n] = w[n] || fn;
var f = d.getElementsByTagName(t)[0];
var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60;
var sm = d.createElement(t);
sm.async = true;
sm.type = 'module';
sm.src = h + s + '.mjs' + v;
f.parentNode.insertBefore(sm, f);
var sn = d.createElement(t);
sn.async = true;
sn.noModule = true;
sn.src = h + s + '.js' + v;
f.parentNode.insertBefore(sn, f);
})(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd');
</script>
<script>
window.fd('form:handle', {
formId: '649c2c6b918a722b7047ee8d',
rootEl: '.ff-649c2c6b918a722b7047ee8d',
});
</script>
In theory I could use the code block but then I'd need to style it's output as a button.
So ideally, it'd be great if I could just use the button block with code.
But I'm willing to use whatever the optimal route is considering I have several pages that need to have unique optin forms between both the pages themselves and within a given page itself.
