JSFiddle - React, Tailwind, and code Playground

by Patrick Ludewig

HTML

<!-- Begin Sendinblue Form -->
<!-- START - We recommend to place the below code in head tag of your website html  -->
<style>
  @font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.sendinblue.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.sendinblue.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.sendinblue.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: "Helvetica", sans-serif;
    color: #c0ccda;
  }
</style>
<link rel="stylesheet" href="https://sibforms.com/forms/end-form/build/sib-styles.css">
<!--  END - We recommend to place the above code in head tag of your website html -->

<!-- START - We recommend to place the below code where you want the form in your website html  -->
<div class="sib-form" style="text-align: center;
         background-color: #EFF2F7;                                           ">
  <div id="sib-form-container" class="sib-form-container">
    <div id="sib-container" class="sib-container--large sib-container--vertical" style="text-align:center;...

JavaScript

const test = async () => {
console.log(JSON.stringify({
      'VORNAME': "PatrickTest",
      'NACHNAME': "PatrickLudewig",
      'EMAIL': "[email protected]",
      'OPT_IN': true
    }))
  let responseSubmittedNewsletter = await fetch("https://e2596229.sibforms.com/serve/MUIEAJ4tzHhoKRAAYuqL02g0NB891Ou-32tEKBrumccSc_mRknDuTPAaSGHxNBUF3Qy4Z_yDyJ9uRM_SenbcBUGkqYBx1nEdW6ITqz0FI0Tl8VGcC-sNd734GpNCwu7QdB-82eMHFEI_HubvCmCBU4yc6jLeGg6c1uoR_1_FM94JbV21bXvvNb9y11ZuM-fqpa4wnzt4q2hz5cwF", {
    method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
    body: JSON.stringify({
      'VORNAME': "PatrickTest",
      'NACHNAME': "PatrickLudewig",
      'EMAIL': "[email protected]",
      'OPT_IN': true
    })
  });


  let resultOfApplicationSubmission = await responseSubmittedNewsletter.json();

  console.log("response from server:", resultOfApplicationSubmission)
};
test();