Load a popup or email optin form on button click

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: 

1. 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>

   
    

2. 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.
    

Hi,

Like this popup?