https://www.annunciationcathedralchicago.org/assets/js/contact-us.js

1const formJSON = {
2  elements: [{
3    "type": "dropdown",
4    "name": "recipient",
5    "title": "Message Recipient",
6    "isRequired": true,
7    "choices": [ "Cathedral Secretary", "Cathedral Dean", "Webmaster" ],
8    "defaultValue": "Cathedral Secretary"
9  }, {
10    name: "name",
11    title: "Your Name",
12    type: "text",
13    "isRequired": true
14  }, {
15    "name": "email",
16    "type": "text",
17    "title": "Your Email Address",
18    "inputType": "email",
19    "placeholder": "[email protected]",
20    "isRequired": true,
21    "autocomplete": "email"
22  }, {
23    name: "subject",
24    title: "Subject",
25    type: "text",
26    "isRequired": true
27  }, {
28    "type": "comment",
29    "name": "message",
30    "title": "Message",
31    "rows": 4,
32    "autoGrow": true,
33    "allowResize": false,
34    "isRequired": true
35  }, {
36    "type": "html",
37    "name": "recaptcha",
38    "html": "<div class='g-recaptcha' data-sitekey='6Le9vT0sAAAAAHqPeQ0joHlUMEVIS5dGXoVhARS7'>",
39    "startWithNewLine": true
40  }],
41//  "checkErrorsMode": "onValueChanged",
42  "completeText": "Submit",
43  "completedHtml": "Thank you for your feedback! We will respond as soon as we can."
44};
45
46async function validateReCAPTCHA(_, {data, errors, complete}) {
47  var token = grecaptcha.getResponse();
48  if (!token) {
49    errors["recaptcha"] = "Please complete reCAPTCHA";
50    complete();
51    return;
52  }
53  const form_data = new FormData();
54  form_data.append("token", token);
55  await fetch('__recaptcha?v=v2', {
56    method: "POST",
57    body: form_data,
58  })
59    .then((response) => {
60      if (!response.ok) {
61	errors["recaptcha"] = "reCAPTCHA failed";
62      }
63    });
64  complete();
65  return;
66}
67
68async function formComplete(form) {
69  fetch('__contact_us', {
70    method: 'POST',
71    headers: {
72      'Content-Type': 'application/json;charset=UTF-8'
73    },
74    body: JSON.stringify(form.data),
75    })
76    .then(response => {
77        if (response.ok) {
78            // Handle success
79        } else {
80            // Handle error
81        }
82    })
83    .catch(error => {
84        // Handle error
85    });
86}
87
88const form = new Survey.Model(formJSON);
89//form.applyTheme(SurveyTheme.SharpLightPanelless);
90form.onServerValidateQuestions.add(validateReCAPTCHA);
91form.onComplete.add(formComplete);
92
93document.addEventListener("DOMContentLoaded", function() {
94  form.render(document.getElementById("formContainer"));
95});