Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
.col {
width: 100%;
}
.container {
display: grid;
justify-content: center;
align-items: center;
margin: 0px 10%
/* width: inherit; */
}
.error-desc {
color: red;
}
.error-input {
border: 1px solid red !important;
}
form {
display: block;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: rgba(34,33,32,0.2);
padding: 10px;
}
.form-group {
display: grid;
justify-content: center;
align-items: center;
padding: 10px;
}
#form-header {
font-size: 2.3em !important;
}
.hidden {
visibility: hidden;
}
input[type=text], input[type=number], input[type=tel], input[type=email] {
width: 100%;
}
input[type=text], input[type=number], input[type=tel], input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 3px 0;
display: inline-block;
background-color: white;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
input[type=submit] {
width: 100%;
background-color: #6199cb ;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #5aa1e0;
}
.success-modal {
display: flex;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height:100px;
max-height: 100%;
max-width: 100%;
z-index: 1010;
border: 1px solid black;
border-radius: 20px;
background-color: palegreen;
}
.success-modal.closed, .success-overlay.closed {
display: none;
}
.success-inner {
display: grid;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.success-overlay {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#success-close {
/* margin: 0px 0px 0px 5px; */
display: inline-block;
font-weight: 400;
text-align: center;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1;
border-radius: .25rem;
color: #000;
background-color: #ccc;
}
div.text {
font-weight: 400;
}
[type="checkbox"]{
vertical-align:middle;
}
Form
Get Started with ISSA!
No cost, no obligation, instant access.
We won't spam you or share your email address, ever.
© 2021 ISSA All rights reserved. Privacy Policy
Success!
// validation for Name
const validateName2 = (name) => {
console.log('here validateName2');
const nameno = /^[a-zA-Z ]+$/;
if (name.match(nameno)) {
return true;
} else {
return false;
}
};
const phoneNumberStrip2 = (no) => {
no = no.split(/[( || ) || \ || -]/).join('');
return no;
}
// validation for phonenumber
const validatePhone2 = (phone) => {
console.log('here validatePhone2');
phone = phoneNumberStrip2(phone);
const phoneno = /^\d{10}$/;
if (phone.match(phoneno)) {
return true;
} else {
return false;
}
};
// validation for email
var validateEmail2 = (email) => {
console.log('here validateEmail2');
const emailno = /^\S+@\S+$/;
if (email.match(emailno)) {
return true;
} else {
return false;
}
};
// validation for confirmation
var validateConfirm = (confirm) => {
console.log('here validateConfirm');
if (confirm == true) {
return true;
} else {
return false;
}
};
var formatPhoneNumber2 = (value) => {
console.log('here formatPhoneNumber');
if (!value) return value;
const phoneNumber = value.replace(/[^\d]/g, "");
const length = phoneNumber.length;
if(length < 4) return phoneNumber;
if(length {
const inputField = document.getElementById("phoneInput2");
const formattedInputValue = formatPhoneNumber2(inputField.value);
inputField.value = formattedInputValue;
console.log(inputField);
}
// error-input will apply border-red if validation fails
// toggle error-desc to hide and show desc
const submitForm = async (data) => {
//TEST URL BELOW
//let url = "https://build1-api.issaonline.com/webhooks/landbot-io-webhook.cfm";
//LIVE URL BELOW
let url = "https://api.issaonline.com/webhooks/landbot-io-webhook.cfm";
try{
var request = createCORSRequest("post", url);
if (request) {
request.setRequestHeader("x-landbot-sub", "4lH3LvIvl2EupAwvf7jjt3h5");
request.setRequestHeader("content-type", "application/JSON");
//request.setRequestHeader("access-control-allow-origin", "*");
//request.setRequestHeader("accept", "application/json");
request.onreadystatechange = function() {console.log(data)};
request.send(JSON.stringify(data));
}
} catch(err){
console.error(err);
}
}
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR has 'withCredentials' property only if it supports CORS
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") { // if IE use XDR
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
function redirect_success(){
var redirect_url = encodeURIComponent();
window.location.href = "https://certifications.issaonline.com/evaluation-kit/daily-grand/?utm_source=bmg_pt_content" + "\u0026" + "utm_medium=referral";
}
document.addEventListener("DOMContentLoaded", (event) => {
// add event listeners to submit input to check each validation
var errorState = {
nameInput2: false,
phoneInput2: false,
emailInput2: false,
confirmInput: false,
};
const toggleError = (id) => {
let ele = document.getElementById(id);
let errMsg = document.getElementById(`error-${id}`);
ele.classList.toggle("error-input");
errMsg.classList.toggle("error-desc");
errMsg.classList.toggle("hidden");
errorState[id] = !errorState[id];
};
let submit = document.getElementById("submit");
let success = document.getElementsByClassName("success-modal");
let successOverlay = document.getElementById("success-overlay");
let successCloseBtn = document.getElementById("success-close");
let name = document.getElementById("nameInput2");
let phone = document.getElementById("phoneInput2");
let email = document.getElementById("emailInput2");
let confirm = document.getElementById("confirmInput");
submit.addEventListener("click", (e) => {
e.preventDefault();
console.log('submit clicked second');
if (!validateName2(name.value) && !errorState.nameInput2) toggleError("nameInput2"); // switch to a false state and apply css
if (!validatePhone2(phone.value) && !errorState.phoneInput2) toggleError("phoneInput2");
if (!validateEmail2(email.value) && !errorState.emailInput2) toggleError("emailInput2");
if (!validateConfirm(confirm.checked) && !errorState.confirmInput) toggleError("confirmInput");
if(errorState.name || errorState.phone || errorState.email || errorState.zip || errorState.confirm){
return;
}
let dateObj = new Date();
let date = `${dateObj.getUTCMonth()+1}/${dateObj.getUTCDate()}/${dateObj.getUTCFullYear()}`
let time = `${dateObj.getHours()}:${dateObj.getMinutes()}:${dateObj.getSeconds()}`;
let data = {
'fullName': name.value,
'phone': phone.value,
'email': email.value,
'page_name': "peoplehype.com",
'utm_source': "bmg_pt_content",
'utm_medium': "referral"
};
if(validateEmail2(email.value) && validatePhone2(phone.value) && validateName2(name.value) && validateConfirm(confirm.checked)){
submitForm(data);
console.log("success");
setTimeout(() => {redirect_success();}, 2000);
}
});
// Click will toggle the Error, how can I toggle it back to being clear of error on change
confirm.addEventListener("click", () => {
if (errorState.confirmInput) {
toggleError("confirmInput");
errorState.confirmInput = false;
}
});
name.addEventListener("keypress", () => {
if (errorState.nameInput2) {
toggleError("nameInput2");
errorState.nameInput2 = false;
}
});
name.addEventListener("blur", () => {
if (!validateName2(name.value) && !errorState.nameInput2) {
toggleError("nameInput2");
}
});
phone.addEventListener("keypress", () => {
if (errorState.phoneInput2) {
toggleError("phoneInput2");
errorState.phoneInput2 = false;
}
});
phone.addEventListener("blur", () => {
if (!validatePhone2(phone.value) && !errorState.phoneInput2) {
toggleError("phoneInput2");
}
});
if (email) {
email.addEventListener("keypress", () => {
if (errorState.emailInput2) {
toggleError("emailInput2");
errorState.emailInput2 = false;
}
});
email.addEventListener("blur", () => {
if (!validateEmail2(email.value) && !errorState.emailInput2) {
toggleError("emailInput2");
}
});
}
successCloseBtn.addEventListener('click', () => {
success.classList.toggle("closed");
successOverlay.classList.toggle("closed");
});
});
One response to “Hello world!”
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.