Pop up modal for new Klickpages and Klicksend form

modal.html

<style>
:root {
--spacing1: 4px;
--spacing2: 8px;
--spacing3: 16px;
--hue: 400;
--text1: hsl(0, 0%, 100%);
--text2: hsl(var(--hue), 4transform: translate(-50%, -50%);%, 80%);
font-size: 1.25rem;
}
/* Style for the modal container */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 999;
}

/* Style for the modal content */
.modal-content {
margin: auto;
background-color: #e7e3e3;
width: 45%;
min-width: 350px;
position: relative;
top: 30%;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
text-align: center;
}

#closeModalBtn {
color: #aaa;
cursor: pointer;
float: right;
font-size: 28px;
font-weight: bold;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing2);
  padding: var(--spacing3);

  & button, input {
    padding: var(--spacing2);
    border-radius: var(--spacing1);
    border: 4px solid transparent;
    width: 100%;
  }

  & button {
    /* form button color */
    background-color: rgb(230, 162, 26);
    font-weight: bold;
    font-size: 1.25rem;
    margin-top: var(--spacing3);
    cursor: pointer;
  }

  & label {
    font-size: 0.9em;
    font-weight: bold;
    align-self: flex-start;
    padding-left: var(--spacing2);
  }
}
</style>

<script>

function createKlickPagesForm ({ formId, buttonText = "Submit" }) {
    // Create the form element
    const formElement = document.createElement("form");
    formElement.setAttribute("klicksend-form-id", formId);
    formElement.setAttribute("method", "post");
    formElement.setAttribute("action", `//handler.klicksend.com.br/subscription/${formId}`);

    // Create a label for the email input
    const emailLabel = document.createElement("label");
    emailLabel.setAttribute("for", "email");
    emailLabel.textContent = "Email";

    // Create the email input field
    const emailInput = document.createElement("input");
    emailInput.setAttribute("type", "email");
    emailInput.setAttribute("autocomplete", "off");
    emailInput.setAttribute("name", "email");
    emailInput.setAttribute("id", "email");
    emailInput.setAttribute("placeholder", "Email");
    emailInput.setAttribute("value", "");
    emailInput.setAttribute("required", "");
    // Create a label for the phone input
    const phoneLabel = document.createElement("label");
    phoneLabel.setAttribute("for", "phone");
    phoneLabel.textContent = "Telefone";
    // Create the phone input field
    const phoneInput = document.createElement("input");
    phoneInput.setAttribute("type", "text");
    phoneInput.setAttribute("autocomplete", "off");
    phoneInput.setAttribute("name", "phone");
    phoneInput.setAttribute("id", "phone");
    phoneInput.setAttribute("placeholder", "Telefone (whatsapp)");
    phoneInput.setAttribute("value", "");

    // Create the hidden input for spam prevention
    const spamInput = document.createElement("div");
    spamInput.style = "position: absolute; left: -5000px;";
    spamInput.setAttribute("aria-hidden", "true");
    const hiddenTextInput = document.createElement("input");
    hiddenTextInput.setAttribute("type", "text");
    hiddenTextInput.setAttribute("name", `b_${formId}`);
    hiddenTextInput.setAttribute("tabindex", "-1");
    hiddenTextInput.setAttribute("value", "");

    // Create the submit button
    const submitButton = document.createElement("button");
    submitButton.setAttribute("klicksend-form-submit-id", formId);
    submitButton.textContent = buttonText;

    // Append input fields and button to the form
    formElement.appendChild(emailLabel);
    formElement.appendChild(emailInput);
    formElement.appendChild(phoneLabel);
    formElement.appendChild(phoneInput);
    spamInput.appendChild(hiddenTextInput);
    formElement.appendChild(spamInput);
    formElement.appendChild(submitButton);

    return formElement;
  }

  document.addEventListener('DOMContentLoaded', function() {
    try {
      const formId = 'your-form-id';
      const buttonText = 'modal call to action';
      const form = createKlickPagesForm({ formId, buttonText });
      const modalContainer = document.createElement("div");
      modalContainer.classList.add("modal");
      modalContainer.id = "myModal";

      // Create the modal content element
      const modalContent = document.createElement("div");
      modalContent.classList.add("modal-content");

      // Create the close button element
      const closeModalBtn = document.createElement("span");
      closeModalBtn.id = "closeModalBtn";
      closeModalBtn.innerHTML = "&times;";
      closeModalBtn.addEventListener("click", closeModal);

      // Create modal content
      const modalHeader = document.createElement("h2");
      // Main header for the modal
      modalHeader.textContent = "Modal Header";

      const modalBody = document.createElement("div");
      modalBody.appendChild(form);

      // Append elements to the modal content
      modalContent.appendChild(closeModalBtn);
      modalContent.appendChild(modalHeader);
      modalContent.appendChild(modalBody);

      // Append the modal content to the modal container
      modalContainer.appendChild(modalContent);

      // Append the modal container to the body
      document.body.appendChild(modalContainer);

      // Function to open the modal
      function openModal() {
        modalContainer.style.display = "block";
      }

      // Function to close the modal
      function closeModal() {
        modalContainer.style.display = "none";
      }

      // Open the modal when needed, e.g., when a button is clicked
      // Check the button class on your klickpages page
      const buttonClass = ".ls-button";
      // add event listener to all buttons with the buttonClass
      document.querySelectorAll(buttonClass).forEach((button) => {
        button.addEventListener("click", openModal);
      });
    } catch (e) {
      console.log('### error', e);
    }
  });
</script>