サイト訪問者が問い合わせをしたときその通知がgmailで送信されるようにする方法

Question

サイトに訪れた人がコンタクトフォームで登録した際に、登録があったというメールを送信する方法を知りたいです。サイト訪問者が問い合わせをしたときその通知がgmailで送信されるには以下のコードに何を加えればよいですか？
以下はコンタクトフォームのコードです。

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
let productName;
let productformattedPrice;

$w.onReady(function () {
//TODO: write your page related code here...
// set tour title to page title on load.
let pageTitle = ("#productPage1").title;

$w('#productPage1').getProduct()
    .then((product) => {
        $w('#tourTitle').value = product.name;
        $w('#tourPrice').value = product.formattedPrice;

        productName = product.name;
        productformattedPrice = product.formattedPrice;

    })
    .catch((error) => {
        console.log(error);
    });

});

import wixData from 'wix-data';
export function submit_click(event, $w) {
//Add your code for this event here:
let firstName = $w('#firstName').value;
let lastName = $w('#lastName').value;
let emailAddress = $w('#emailAddress').value;
let howManyPPL = $w('#howManyPPL').value;
let departureDate = $w('#departureDate').value;

let toSave = {
    "tourTitle": productName,
    "tourPrice": productformattedPrice,
    "firstName": firstName,
    "lastName": lastName,
    "emailAddress": emailAddress,
    "howManyPPL": howManyPPL,
    "departureDate": departureDate
}
wixData.save("customForm", toSave)
    .then((results) => {
        let item = results; //see item below
    })
    .catch((err) => {
        let errorMsg = err;
    });

}

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

この「コンタクトフォーム」は何かのプラグインをご利用でしょうか。利用しているプラグイン・ライブラリのURLと共にhtmlも本文に追記願います。あと、現在のコードにおける問題・課題は何でしょうか？

[otn]

「Gmailで」というのは無理があるのでは？

[_lemon2003_]

google form と gas でどうですか。内部的に埋め込むこともできますし。

Answer 1

これはwix.comを使われているのでしょうか。
wixはよく知らないんですが、ざっと調べたらSendGrid経由でJS使ってメールが送れるんですね。へー、という感じでした。

日本語の資料は全然ありませんでしたが、英語でなら参考にできるページもあるかもしれません。例えば以下はどうでしょうか。たぶん、別途SendGridの設定は必要そうです。

• https://support.wix.com/en/article/how-to-send-an-email-on-form-submission
• https://www.wix.com/code/home/forum/community-discussion/emailing-to-one-recipient-and-multiple-cc-via-sendgrid
• https://www.wix.com/code/home/forum/community-discussion/sendgrid-emails-not-going-to-multiple-recipients

Comments

[退会済みユーザー]

ご返信ありがとうございます。はい、wix.comを使っていて、コンタクトフォームに記入すると指定したアドレスにコンタクトがあったことを知らせるメールが自動的に送られるようにしたいのですが、うまくいきません。いただいたサイトを参考にしたところ、以下のようにコードを付け加えました。

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
let productName;
let productformattedPrice;

$w.onReady(function () {
//TODO: write your page related code here...
// set tour title to page title on load.
let pageTitle = ("#productPage1").title;

$w('#productPage1').getProduct()
.then((product) => {
$w('#tourTitle').value = product.name;
$w('#tourPrice').value = product.formattedPrice;

productName = product.name;
productformattedPrice = product.formattedPrice;

})
.catch((error) => {
console.log(error);
});
});

import wixData from 'wix-data';
export function submit_click(event, $w) {
//Add your code for this event here:
let firstName = $w('#firstName').value;
let lastName = $w('#lastName').value;
let emailAddress = $w('#emailAddress').value;
let howManyPPL = $w('#howManyPPL').value;
let departureDate = $w('#departureDate').value;

let toSave = {
"tourTitle": productName,
"tourPrice": productformattedPrice,
"firstName": firstName,
"lastName": lastName,
"emailAddress": emailAddress,
"howManyPPL": howManyPPL,
"departureDate": departureDate
}
wixData.save("customForm", toSave)
.then((results) => {
let item = results; //see item below
})
.catch((err) => {
let errorMsg = err;
});
}

//email.jsw

import {sendWithService} from 'backend/sendGrid';

export function sendEmail(subject, body) {
const key = "QL.cFH5YHZQQ2_fG0z_KuQ.6WPTYEyjN1C3_7Wt9Hb3jGfkJNAyzJhz3ddhM";
const sender = "[e-mail]";
const recipient = "[e-mail]";
return sendWithService(key, sender, recipient, subject, body);
}

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}&text=${body}`;

const request = {
"method": "post",
"headers": headers,
"body": data
};

return fetch(url, request)
.then(response => response.json());
}

しかし、以下の部分のコードで sendWithServiceがIdentifier 'sendWithService' has already been declaredというエラーになります。ここをうまく直せばうまくいくかと思うのですが、ここは何に修正すればよいのでしょうか？
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"
};

[takahashim]

元記事ではbackend/sendGrid.jsというファイルに切り出す前提なので、エラーを避けるにはファイルを分割するか、そうでなければ`import {sendWithService} from 'backend/sendGrid';`を削除してまとめるかする必要があるかと思います。