<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