How can I add current URL to "Email on Form Submission?"

Ask the community
, ,
1

I’ve got the sendgrid integration working nicely to send me an email each time someone submits one of my custom forms, but I would also like the information I’m receiving to include the current page URL they are on (I’m using a lightbox form connected to all my pages, so the page will vary).

I’ve been able to get the URL sent to the WIX database via additional coding, but I can’t seem to figure out how to include it in the email notification I receive.

My current working code is below. The red arrow notates where I believe the URL code should go

791×766 90.3 KB

:

2

Hello.

I would recommend declaring your path variable ad assigning the latest URL to it the assigning it to the URL variable in the sendFormData function. See code below:

let path = wixLocation.onChange((location) => {
return location.path;
})

function sendFormData(){
.
.
.
\URL: path
.
.
}
3

The \URL: on the form is now just returning the word “path”. Is there additional code I need to add under the sendFormData function to get the actual URL?

4

The reason is because the sendFormData() functions runs before the value of path is retrieved. You can try using async/ await promise to make sure that the value of the path is returned from the wixLocation.onChange event.

Also, please note that path returns just the last part of the URL. To return full URL, you better use wixLocation.url .

Should you need further assistance, please paste your code with the modifications into the thread.

Regards.

5

Hi Sam, thanks for your continued support. First time using the async/await function, so needless to say, the URL is still not inserting for me.

Here’s where I’m at:

import {sendEmail} from 'backend/email';
$w.onReady(function () {
$w("#dataset2").onAfterSave(sendFormData);
});
async function sendFormData() {
const subject = `New Submission from ${$w("#input9").value}`;
let path = await wixLocation.onChange((location) => {
return wixLocation.url;
})
const body = `First Name: ${$w("#input1").value}
\rLast Name: ${$w("#input2").value}
\rEmail: ${$w("#input4").value}
\rPhone: ${$w("#input3").value}
\rPosition/Title: ${$w("#input6").value}
\rCompany: ${$w("#input5").value}
\rHow did you hear about us?: ${$w("#input7").value}
\rIndustry/Application: ${$w("#input8").value}
\rProduct Interest: ${$w("#input9").value}
\rComments: ${$w("#input10").value}
\rURL: path`;

sendEmail(subject, body)
.then(response => console.log(response));
}
6

@scottgross
Remember that you are using the Wix Location API, so you still need to be importing it at the top of your code as Sam linked in his reply previously
https://www.wix.com/corvid/reference/wix-location.html#url

import wixLocation from 'wix-location';

Also, as stated in the API info, make sure that your site is published first before testing it - If the site is not yet published, the function returns null.

7

@givemeawhisky Sorry, I didn’t include all of my code. I am still using the Wix Location API and republishing my site each time I update the code.

Here is the full page code:

import wixLocation from 'wix-location';
// ...
wixLocation.onChange( (location) => {
let newPath = location.path;
} );
$w.onReady(function () {
$w("#dataset2").onBeforeSave(function() {
$w("#dataset2").setFieldValue('pageUrl', wixLocation.url);
});
});
import {sendEmail} from 'backend/email';
$w.onReady(function () {
$w("#dataset2").onAfterSave(sendFormData);
});
async function sendFormData() {
const subject = `New Submission from ${$w("#input9").value}`;
let path = await wixLocation.onChange((location) => {
return wixLocation.url;
})
const body = `First Name: ${$w("#input1").value}
\rLast Name: ${$w("#input2").value}
\rEmail: ${$w("#input4").value}
\rPhone: ${$w("#input3").value}
\rPosition/Title: ${$w("#input6").value}
\rCompany: ${$w("#input5").value}
\rHow did you hear about us?: ${$w("#input7").value}
\rIndustry/Application: ${$w("#input8").value}
\rProduct Interest: ${$w("#input9").value}
\rComments: ${$w("#input10").value}
\rURL: path`;

sendEmail(subject, body)
.then(response => console.log(response));
}
8

This part of your code is all mixed up as you should only have the one onReady page function and the imports should all be at the top of your page.

import wixLocation from 'wix-location';
// ...
wixLocation.onChange( (location) => {
let newPath = location.path;
} );
$w.onReady(function () {
$w("#dataset2").onBeforeSave(function() {
$w("#dataset2").setFieldValue('pageUrl', wixLocation.url);
});
});
import {sendEmail} from 'backend/email';
$w.onReady(function () {
$w("#dataset2").onAfterSave(sendFormData);
});
9

Try something like this for it.

import wixLocation from 'wix-location';
import {sendEmail} from 'backend/email';

$w.onReady(function () {
$w("#dataset2").onBeforeSave(function() {
$w("#dataset2").setFieldValue('pageUrl', wixLocation.url);
});

$w("#dataset2").onAfterSave(sendFormData);
});

let path = wixLocation.onChange((location) => {
return location.path;
})

async function sendFormData() {
const subject = `New Submission from ${$w("#input9").value}`;
const body = `First Name: ${$w("#input1").value}
\rLast Name: ${$w("#input2").value}
\rEmail: ${$w("#input4").value}
\rPhone: ${$w("#input3").value}
\rPosition/Title: ${$w("#input6").value}
\rCompany: ${$w("#input5").value}
\rHow did you hear about us?: ${$w("#input7").value}
\rIndustry/Application: ${$w("#input8").value}
\rProduct Interest: ${$w("#input9").value}
\rComments: ${$w("#input10").value}
\rURL: path`;

sendEmail(subject, body)
.then(response => console.log(response));
}
10

Note that the above is using the Wix Location path function.
Use the url function stated if you want the full url.

11

@givemeawhisky I really appreciate all of your help with this. I matched the full code you sent above, but still am receiving just the word “path” (see pic for visual). Everything else is functioning as it should. Any other ideas?

12

Still looking for some assistance with this if anyone has an idea.

13

You might need to actually include it into the form so that you can simply use the element in the form like all the others, or have it as a hidden user input so that only you know that it is there.

So you can add something like this into your page code where your user input form is and have the url user input as a read only element, which gets the url added to it automatically.

$w.onReady(function () {
let path = wixLocation.path;
path = path.toString();
$w("#your-url-input-on-form").text = path
});

Then just add it to the current form inputs code.

\rURL: ${$w("#your-url-input-on-form").value}`;
14

That did it! Thanks a ton for all your help.