<div class="customText">
	Your custom text here
</div>
<form id="custom_form">
  <div class="whiteBox">
    <label class="customLabel" for="contact">Email/Telephone</label>
    <input
			required
      class="customInput"
      id="contact"
           ></input>
    <label class="customLabel" for="message">Message</label>
    <textarea
			 required
       class="customTextArea"
       id="message"></textarea>
  </div>
  <button class="btn btn-info btn-block" type="submit">Send</button>
</form>
html, body {
  background-color: transparent;
}

.whiteBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
  border-radius: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 24px;
}

.customInput, .customTextArea {
  height: 48px;
  color: #304558;
  font-size: 14px;
  padding: 12px;
  border-radius: 8px;
  border:  2px solid #DADDE0;
  outline: none;
  box-sizing: border-box;
  transition: border 0.2s ease;
}
.customTextArea:focus, .customInput:focus{
  border: 2px solid #30A1F2
}
.customTextArea {
  flex-grow: 1;
  height: 100px;
  overflow: auto;
  resize: none;
}

.customLabel {
  margin: 8px 0
}

.customText {
  text-align: center;
  margin: 24px 16px 16px;
}

.btn[type="submit"] {
  width: 100px;
  margin: auto;
  background-color: #39A2EF; 
  color: white; /* Barva textu tlačítka */
}
const form = document.getElementById('custom_form');

form.onsubmit = function (e) {
  e.preventDefault();
    const contact = document.getElementById('contact').value;
    const message = document.getElementById('message').value;
  
    window.parent.postMessage({
        type: "OFFLINE_ACTION",
        contact,
        message
    }, "*");
};
View Compiled

External CSS

  1. https://codepen.io/AmenOSa/pen/GOXway
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css

External JavaScript

  1. https://codepen.io/AmenOSa/pen/GOXway
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js
  4. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js