widget.js

(function () {


/*** Inspiration https://stripe.com/docs/checkout ***/

var script = document.getElementById("widget");


var options = {
additionaldescription: script.dataset.additionaldescription,
servicesinterestedin: script.dataset.servicesinterestedin,
contactform: script.dataset.contactform,
width: (script.dataset.width || 500)

}


var close = document.createElement("div");
close.style.background = "url('https://b.stripecdn.com/checkout/v3/images/close-gbN3V5bjbhRxDClwGYFQ.png')";
close.style.position = "absolute";
close.style.top = "7px";
close.style.right = "8px";
close.style.left = "auto";
close.style.width = "22px";
close.style.height = "23px";
close.style.backgroundSize = "100% 100%"
close.style.cursor = "pointer";


var header = document.createElement("div");
header.style.width = "100%";
header.style['min-height'] = "47px";
header.innerHTML = "Form Widget";
header.style['background-image']= "linear-gradient(hsl(240, 11%, 96%),hsl(240, 2%, 92%))";
header.style['border-bottom'] = "1px solid hsl(240, 1%, 83%)";
header.style['fontSize'] = "16px";
header.style['fontSize'] = "16px";
header.style['fontWeight'] = "900";
header.style['paddingTop'] = "53px";
header.style['borderTopLeftRadius'] = "8px";
header.style['borderTopRightRadius'] = "8px";



var image = document.createElement("div");
image.style.width = "76px";
image.style['height'] = "75px";
image.style.position = "absolute";
image.style.top = "-30px";
image.style.left = "50%";
image.style['marginLeft'] = "-38px";

image.innerHTML = "<img style='position:absolute; top:4px; background-size: 100% 100%; left:6px; width:64px; height:64px; display:block; background:hsl(0,100%, 100%); border-radius:32px; webkit-border-radius:32px;' src='https://stripe.com/img/documentation/checkout/marketplace.png'><img style='position:absolute; top:0; left:0' src='https://b.stripecdn.com/checkout/v3/images/icon-border-Uz9anqiDNVCgXMysAAWGQ.png'></img>";





var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
f.style.boxSizing = "border-box";

f.style.margin = "0px";



var wrapperDiv  = document.createElement("div");
wrapperDiv.style.position = "absolute";
wrapperDiv.style.top = "0px";
wrapperDiv.style.left = "0px";
wrapperDiv.style.width = options.width +"px";
wrapperDiv.style.textAlign = "center";
wrapperDiv.style.backgroundImage="linear-gradient(hsl(240, 11%, 96%),hsl(240, 2%, 92%))";
wrapperDiv.style.border = "1px solid hsl(0, 100%, 100%)";
wrapperDiv.style.borderBottom = "1px solid hsl(240, 1%, 83%)";
wrapperDiv.style['border-radius'] = "8px";
wrapperDiv.style['border'] = "1px solid black";
wrapperDiv.style['padding-bottom'] = "20px";







var firstName= document.createElement("input"); //input element, text
firstName.setAttribute('type',"text");
firstName.setAttribute('name',"firstname");
firstName.required = true;
firstName.style.margin = "12px";
firstName.placeholder = "First Name"


var lastName= document.createElement("input"); //input element, text
lastName.setAttribute('type',"text");
lastName.setAttribute('name',"lastname");
lastName.required = true;
lastName.style.margin = "12px";
lastName.placeholder = "Last Name";



var email= document.createElement("input"); //input element, text
email.setAttribute('type',"text");
email.setAttribute('name',"email");
email.required = true;
email.placeholder = "Email"

email.style.margin = "12px";


var phone= document.createElement("input"); //input element, text
phone.setAttribute('type',"text");
phone.setAttribute('name',"phone");
phone.required = true;
phone.style.margin = "12px";
phone.placeholder = "Phone"





var country=  document.createElement("select");

country.required = true;
country.style.display = "block";
country.style.margin = "12px";

var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"address");
i.required = true;
i.placeholder = "Address of Residance"




var servicesDiv = document.createElement("div");
servicesDiv.style.margin = "12px";



var s = document.createElement("button"); //input element, Submit button
s.setAttribute('type',"submit");
s.textContent = "Submit";

wrapperDiv.appendChild(image);
wrapperDiv.appendChild(header);
wrapperDiv.appendChild(close);
wrapperDiv.appendChild(firstName);
wrapperDiv.appendChild(lastName);
wrapperDiv.appendChild(phone);
wrapperDiv.appendChild(email);
wrapperDiv.appendChild(country);
wrapperDiv.appendChild(i);
wrapperDiv.appendChild(servicesDiv);
wrapperDiv.appendChild(s);

f.appendChild(wrapperDiv);







document.getElementsByClassName('bod')[0].appendChild(f);


Array.from(document.getElementsByTagName("input")).forEach( function(element, index) {

            element.style['border']= "1px solid hsl(240, 1%, 81%)";
	element.style['border-top-color'] = "hsl(240, 1%, 71%)";
	element.style['border-bottom-color'] = "hsl(240, 2%, 87%)";
	element.style['box-shadow'] = "inset 0 1px 1px hsla(240, 1%, 49%, 0.1),0 1px 0 hsla(0, 100%, 100%, 0.7),0 0 4px hsla(212, 65%, 60%, 0)";
	element.style['height'] = "32px";
	element.style['padding'] = "0 6px 2px 29px";
	element.style['border-radius'] = "4px";
            element.style['font-size'] = "15px";


	});


f.onsubmit = function (e) {
e.preventDefault();


  var values = {};
  for (var i = 0; i < form.length; ++i) {
    var input = form[i];
    if (input.name) {
      values[input.name] = input.value;
    }
  }

  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

  // send the collected data as JSON
  xhr.send(JSON.stringify(values));

  xhr.onloadend = function () {
    // done
  };


}


})();