I have built a form using Wix Code and Send Grid. From every other browser it will send over all of the requested information from the form. However, after testing it does not send an email if a user submits the form from Safari. It will submit the information to the database I have created for storing the information. Does anyone know how to fix this?
link to the form https://www.tradecyclecapital.com/application
On a somewhat unrelated note. When my form loads, the inputs on the other slides are disabled unless either A) the user causes an error and the inputs are re-validated or B) add code to enable all of my input fields on load. Here is the code
import {sendEmail} from ‘backend/email’;
import wixLocation from ‘wix-location’;
$w.onReady( function (){
$w(‘#dataset1’).onAfterSave(sendFormData);
});
function sendFormData(){
const convertRegex = new RegExp(/wix:document://v1/([^/]+)/(.*)$/);
const item = $w(‘#dataset1’).getCurrentItem();
const matches = item.financialUpload.match(convertRegex);
const documentUrl = docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]};
const subject = ‘New Application from ’ + escape($w(“#input1”).value) + ’ ’ + escape($w(“#input2”).value);
let body = $w(’#slideshow1’).children.map( function (value, key){
return value.children.map( function (value, key){
if (value.type === ‘$w.TextInput’){
return ‘\n’+escape(value.placeholder) +': ’ + escape(value.value) + ‘
’;
}
}).join(" “)
}).join(” ");
body += '\nUpload: <a href="' + documentUrl +'">Financial Records</a>';
sendEmail(subject, body).then(response => console.log(response));
}
export function showGeneral() {
$w(‘#slideshow1’).changeSlide(1);
enableSlide(1);
}
export function enableSlide(index){
$w(‘#slideshow1’).children[index].children.map( function (value, key){
if (value.type === ‘$w.TextInput’){
$w(‘#’ + value.id).enable();
}
});
}
export function showAgreement() {
$w(“#slideshow1”).changeSlide(3);
enableSlide(3);
}
export function showContact() {
$w(“#slideshow1”).changeSlide(0);
enableSlide(0);
}
export function showSalesInfo() {
$w(‘#slideshow1’).changeSlide(2);
enableSlide(2);
}
export function button1_click(event, $w){
let validBool = true ;
$w('#slideshow1').children[0].children.map( function (value, key){
if (value.type === ‘$w.TextInput’ && !$w(‘#’+value.id).valid){
validBool = false ;
$w(‘#’ + value.id).enable();
$w(‘#’+value.id).updateValidityIndication();
}
});
if (validBool){
showGeneral();
}
}
export function button3_click(event, $w) {
let validBool = true ;
$w(‘#slideshow1’).children[1].children.map( function (value, key){
if (value.type === ‘$w.TextInput’ && !$w(‘#’+value.id).valid){
validBool = false ;
$w(‘#’+value.id).updateValidityIndication();
}
});
if (validBool){
showSalesInfo();
}
}
export function button5_click(event, $w) {
let validBool = true ;
$w(‘#slideshow1’).children[2].children.map( function (value, key){
if (value.type === ‘$w.TextInput’ && !$w(‘#’+value.id).valid){
validBool = false ;
$w(‘#’+value.id).updateValidityIndication();
}
});
if (validBool){
showAgreement();
}
}
export function submit(event, $w) {
$w(‘#text53’).show();
$w(‘#image7’).show();
$w('#dataset1').save()
.then( function (){
wixLocation.to("/thanks");
}). **catch(function** (){
$w('#text53').hide();
$w('#image7').hide();
$w('#text51').show();
});
}
the email.jsw code
import {sendWithService} from ‘backend/sendGrid’;
export function sendEmail(subject, body){
const key = “*********************“; //this holds the correct key in the live version
const sender =”***********";
const recipient = "”;
return sendWithService(key,sender, recipient, subject, body);
}
finally the sendGrid.js code
import {fetch} from ‘wix-fetch’;
export function sendWithService(key, sender, recipient, subject, body){
const url = “https://api.sendgrid.com/api/mail.send.json”;
const headers = {
“Authorization”: "Bearer " + key,
“Content-Type”: “application/x-www-form-urlencoded”
};
const data = from =${sender}&to=${recipient}&subject=${subject}&html=${body};
const request = {
“method”: “post”,
“headers”: headers,
“body”: data
};
return fetch(url, request)
.then(response => response.json());
}