Thank you so much for your response! It was very usefull, with your example I managed to get it to work on my site.
I am trying to build a system that generates a quote using google maps directions data etc in the html iframew and then send that to the wix system so that I can create an email automation when the customer clicks accept quote.
Here is a link( not yet sorted out the mobile view so it is best to view with a desktop) https://www.polyorganics.co.za/html-to-corvid .
Do you know if it is possible for me to send the map in this way aswell? So that i can display it on the wix side rather than in the html iframe, so that i dont have to use so many linebreaks in the html.
I am now stuck with with getting a database to accept the info that i sent to the wix page. It creates an entry in the database but all the fields are blank. Do you perhaps know why this could be? I am trying to follow the instructions in this article: https://support.wix.com/en/article/creating-a-form-with-user-input-elements
Here is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4tP_Uqtu37pDnYyW6cbrvCkvj_5qa69s">
</script>
<title>My Geocode App</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
table-layout: fixed;
}
td, th {
border: 2px solid #dddddd;
text-align: left;
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<style>#map {height:350px;display: flex ;}
</style>
</head>
<body>
<br>
<div class="container">
<br>
<h4 id="text-center">Enter Details: </h4>
<br>
<form id="location-form">
<h5>Name :</h5>
<input type="text" id="name-input" class="form-control form-control-lg">
<br>
<h5>Email Address:</h5>
<input type="email" id="email-input" class="form-control form-control-lg">
<br>
<h5>Phone Number:</h5>
<input type="tel" id="tel-input" class="form-control form-control-lg">
<br>
<h5>Delivery Address:</h5>
<input type="text" id="location-input" class="form-control form-control-lg">
<br>
<h5>Compost (m^3) :</h5>
<input type="number" id="compost-input" min="0" class="form-control form-control-lg">
<br>
<h5>Lawn Dressing (m^3):</h5>
<input type="number" id="lawn-input" min="0" class="form-control form-control-lg">
<br>
<h5>Compost Bags (30 dm^3):</h5>
<input type="number" id="CMBag-input" min="0" class="form-control form-control-lg">
<br>
<h5>Lawn Dressing bags (30 dm^3):</h5>
<input type="number" id="LDBag-input" min="0" class="form-control form-control-lg">
<br>
<button type="submit" class="btn btn-primary btn-block">Generate Quote</button>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id= "map"></div>
<div id="test"></div>
</div>
<script>
var locationForm = document.getElementById('location-form');
locationForm.addEventListener('submit', geocode);
function sum(input){
if (toString.call(input) !== "[object Array]")
return false;
var total = 0;
for(var i=0;i<input.length;i++)
{
if(isNaN(input[i])){
continue;
}
total += Number(input[i]);
}
return total;
}
function geocode(e){
e.preventDefault();
var name_in = document.getElementById('name-input').value;
var email_in = document.getElementById('email-input').value;
var location = document.getElementById('location-input').value;
var compost = document.getElementById('compost-input').value;
var comp_bag = document.getElementById('CMBag-input').value;
var lwnd = document.getElementById('lawn-input').value;
var lwnd_bag = document.getElementById('LDBag-input').value;
var tel_in = document.getElementById('tel-input').value;
axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
params:{
address:location,
key:'AIzaSyA4tP_Uqtu37pDnYyW6cbrvCkvj_5qa69s'
}
})
.then(function(response){
console.log(response);
var lat = response.data.results[0].geometry.location.lat;
var lng = response.data.results[0].geometry.location.lng;
var FormattedAddress = response.data.results[0].formatted_address;
const center = {lat: -25.949894, lng: 28.178250};
const options = {zoom: 15, scaleControl: true, center: center};
map = new google.maps.Map(document.getElementById('map'), options);
const polyorganics = {lat: -25.949894, lng: 28.178250};
const inpt = {lat: response.data.results[0].geometry.location.lat, lng: response.data.results[0].geometry.location.lng};
var mk1 = new google.maps.Marker({position: polyorganics, map: map});
var mk2 = new google.maps.Marker({position: inpt, map: map});
let directionsService = new google.maps.DirectionsService();
let directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);
const route = {
origin: polyorganics,
destination: inpt,
travelMode: 'DRIVING'
}
directionsService.route(route,
function(response, status) {
if (status !== 'OK') {
window.alert('Directions request may need more detail =' + status);
return;
} else {
directionsRenderer.setDirections(response);
var directionsData = response.routes[0].legs[0];
if (!directionsData) {
window.alert('No Delivery Route Found');
return;
}
else {
var compostPrice = compost*395
var lwndPrice = lwnd*395
var lwndbagPrice = lwnd_bag*30
var compbagPrice = comp_bag*30
var deliveryPriceCube = parseFloat(directionsData.distance.text) *(21*sum([compost,lwnd]))
var deliverPriceBag = parseFloat(directionsData.distance.text) *(21*(0.03*sum([comp_bag,lwnd_bag])))
var test = {
name:name_in,
email:email_in,
phone:tel_in,
delivery:directionsData.distance.text,
lwnd_m3:lwndPrice.toFixed(2),
comp_m3:compostPrice.toFixed(2),
lwnd_30dm3:compbagPrice.toFixed(2),
comp_30dm3:lwndbagPrice.toFixed(2),
delv_price:sum([deliveryPriceCube,deliverPriceBag]).toFixed(2),
tot_price:sum([compostPrice,lwndPrice,lwndbagPrice,compbagPrice,deliverPriceBag,deliveryPriceCube]).toFixed(2),
delv_adrss:FormattedAddress,
CM3_Quant:compost,
LDM3_Quant:lwnd,
CMB_Quant:comp_bag,
LDB_Quant:lwnd_bag
};
document.getElementById("test").value = test
window.parent.postMessage(document.getElementById("test").value, "*");
}
}
});
})
.catch(function(error){
console.log(error);
window.alert(error);
});
}
</script>
</body>
</html>
Here is the wix page code
$w.onReady(function () {
$w("#html1").onMessage((event) => {
$w("#input1").value = event.data.name;
$w("#input2").value = event.data.email;
$w("#input3").value = event.data.phone;
$w("#input4").value = event.data.delivery;
$w("#input5").value = event.data.lwnd_m3;
$w("#input6").value = event.data.comp_m3;
$w("#input7").value = event.data.lwnd_30dm3;
$w("#input8").value = event.data.comp_30dm3;
$w("#input9").value = event.data.delv_price;
$w("#input10").value = event.data.tot_price;
$w("#input11").value = event.data.delv_adrss;
$w("#input12").value = event.data.CM3_Quant;
$w("#input13").value = event.data.LDM3_Quant;
$w("#input14").value = event.data.CMB_Quant;
$w("#input15").value = event.data.LDB_Quant;
console.log(event)
});
});
Apologies if the code is a bit ugly, this is my first attempt at this type of thing after doing a course that involved python at university.
Thank you in advance.
Kind Regards