Sugar kissed Letters

♡ Q&A Gadget ♡

A cute little Q&A for your blog! ♡
Click the icon to open your question form in a little popup.

♡ preview ♡

<style>

/* ================================
   Q&A GADGET
   ================================ */

#skl-qa-jar-wrap {
  width: 160px;
  margin: 0 auto;
  text-align: center;
  font-family: "Cardo", serif;
}

#skl-qa-title {
  font-family: "Cardo", serif;
  font-size: 14px;
  font-weight: bold;
  color: #d878a4;
  margin-bottom: 2px;
}

#skl-qa-intro {
  font-size: 9px;
  line-height: 1.35;
  color: #c98aa5;
  margin-bottom: 2px;
}

#skl-qa-image {
  width: 105px;
  height: auto;
  display: block;
  margin: -2px auto -3px;
  cursor: pointer;
  transition: transform .2s ease;
}

#skl-qa-image:hover {
  transform: scale(1.06) rotate(-2deg);
}

#skl-qa-click {
  font-family: "Cardo", serif;
  font-weight: bold;
  font-size: 10px;
  color: #d878a4;

  animation: qaSparkle 1.6s ease-in-out infinite;
}

@keyframes qaSparkle {

  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 3px #fff,
      0 0 5px #f7b8d3;
  }

  50% {
    opacity: .6;
    text-shadow:
      0 0 7px #fff,
      0 0 12px #f5a9ce;
  }

}


/* ================================
   POPUP
   ================================ */

#skl-qa-popup-overlay {

  position: fixed;

  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background: rgba(255, 225, 239, .55);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  display: flex;

  align-items: center;
  justify-content: center;

  z-index: 2147483647;

}


/* ================================
   FORM WINDOW
   ================================ */

#skl-qa-popup-window {

  position: relative;

  width: 430px;
  height: 620px;

  max-width: 90vw;
  max-height: 85vh;

  box-sizing: border-box;

  padding: 10px;

  background: #fff8fc;

  border: 2px solid #f2bfd5;

  border-radius: 16px;

  box-shadow:
    0 5px 30px
    rgba(200, 100, 145, .35);

  animation:
    sklQAPopup .25s ease-out;

}


@keyframes sklQAPopup {

  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


/* ================================
   TITLE
   ================================ */

#skl-qa-popup-title {

  height: 28px;

  line-height: 25px;

  text-align: center;

  color: #d878a4;

  font-family:
    "Cardo",
    Georgia,
    serif;

  font-size: 15px;

  font-weight: bold;

}


/* ================================
   CLOSE BUTTON
   ================================ */

#skl-qa-popup-close {

  position: absolute;

  top: 7px;
  right: 10px;

  color: #d878a4;

  font-family: Arial, sans-serif;

  font-size: 19px;

  font-weight: bold;

  line-height: 18px;

  cursor: pointer;

}

#skl-qa-popup-close:hover {

  color: #b9537f;

  transform: scale(1.1);

}


/* ================================
   GOOGLE FORM
   ================================ */

#skl-qa-popup-frame {

  display: block;

  width: 100%;

  height: calc(100% - 30px);

  border: none;

  border-radius: 10px;

  background: white;

}


/* MOBILE */

@media screen and (max-width: 600px) {

  #skl-qa-popup-window {

    width: 94vw;

    height: 88vh;

  }

}

</style>


<!-- ================================
     ICON
     ================================ -->

<div id="skl-qa-jar-wrap">

  <div id="skl-qa-title">
    ♡ Q&A ♡
  </div>

  <div id="skl-qa-intro">
    have a question for me?<br />
    toss it in! ♡
  </div>

  <img
    id="skl-qa-image"
    src="PASTE YOUR Q&A ICON IMAGE LINK HERE"
    alt="Q&A Icon"
    onclick="sklOpenQA()"
  >

  <div id="skl-qa-click">
    ✧ click me ✧
  </div>

</div>


<script>

function sklOpenQA() {

  /* Create popup directly on the BODY */

  var overlay =
    document.createElement("div");

  overlay.id =
    "skl-qa-popup-overlay";


  overlay.innerHTML =

    '<div id="skl-qa-popup-window">' +

      '<div id="skl-qa-popup-title">' +
        '♡ ask me anything ♡' +
      '</div>' +

      '<div id="skl-qa-popup-close">' +
        '×' +
      '</div>' +

      '<iframe ' +

        'id="skl-qa-popup-frame" ' +

        'src="PASTE YOUR GOOGLE FORM EMBED LINK HERE" ' +

        'loading="lazy">' +

      '</iframe>' +

    '</div>';


  document.body.appendChild(overlay);


  /* Close button */

  document.getElementById(
    "skl-qa-popup-close"
  ).onclick = function() {

    overlay.remove();

  };


  /* Click outside the form */

  overlay.onclick = function(event) {

    if (
      event.target === overlay
    ) {

      overlay.remove();

    }

  };


  /* ESC key */

  document.onkeydown =
    function(event) {

      if (
        event.key === "Escape"
      ) {

        if (
          document.getElementById(
            "skl-qa-popup-overlay"
          )
        ) {

          overlay.remove();

        }

      }

    };

}

</script>

♡ by Sugar Kissed Letters ♡

♡ QUICK TUTORIAL ♡

01. choose your Q&A image ♡

Find:
src="PASTE YOUR Q&A ICON IMAGE LINK HERE"

Replace it with the direct image/GIF link of your own Q&A icon.

02. add your Google Form ♡

Create your own Google Form and make sure people can submit questions.

Then find:
src="PASTE YOUR GOOGLE FORM EMBED LINK HERE"

Replace it with your Google Form's embed link.

In Google Forms, click Send → <> Embed HTML and use the URL from the iframe.

03. that's it! ♡

Save the code and add it to your blog. Clicking your image will open your Q&A form inside a cute popup window. 🎀

♡ have fun decorating your blog! ♡