fix: update contact us page (#251)

* wip: update contact form to post to lambda api

* fix: update contact form to add new fields and change submission api

* fix: add csp for form action to lambda

* fix: invalid paths for french thanks page

api/src/index.js

@@ -68,7 +68,8 @@ app.post('/submission', async (req, res) => {
             console.log('AXIOS ERROR: ', err);
         });
 
-    const redirectTo = origin + '/' + lang + '/contact/thanks/'
+    const contactPath = lang == 'en' ? '/en/contact/thanks' : '/fr/contactez/merci'
+    const redirectTo = origin + contactPath
     res.redirect(303, redirectTo)
 })
 

customHttp.yml

@@ -26,5 +26,5 @@ customHeaders:
           img-src 'self' data: https: www.w3.org;
           style-src 'unsafe-inline' https: 'strict-dynamic' 'self' https://fonts.googleapis.com;
           base-uri 'self';
-          form-action 'self';
+          form-action 'self' https://qao6j5zrqcys7evf2azwko4ju40xvfjy.lambda-url.ca-central-1.on.aws;
           object-src 'none'

src/_includes/layouts/base.njk

@@ -48,9 +48,6 @@
         lang="{{ locale }}"
       ></gcds-footer>
 
-      {% if contactForm %}
-        {% include "partials/contactform.njk" %}
-      {% endif %}
     </div>
 
     {% initClipboardJS %}

src/_includes/layouts/home.njk

@@ -68,9 +68,6 @@
         lang="{{ locale }}"
       ></gcds-footer>
 
-      {% if contactForm %}
-        {% include "partials/contactform.njk" %}
-      {% endif %}
     </div>
 
     {% initClipboardJS %}

src/en/contact/contact.md

@@ -31,10 +31,18 @@ Ask us about GC Design System, make a suggestion, or request a component you'd l
 
 Fill out this form or submit an issue through GitHub for <gcds-link external href="{{ links.githubTokensIssues }}" target="_blank">tokens</gcds-link>, <gcds-link external href="{{ links.githubIssues }}" target="_blank">components</gcds-link>, or <gcds-link external href="{{ links.githubDocsIssues }}" target="_blank">documentation</gcds-link>.
 
-<form class="my-500 contact-us-form" name="contactEN" method="post" style="min-height: 32rem;">
+<form class="my-500 contact-us-form" name="contactEN" method="post" style="min-height: 32rem;" action="https://qao6j5zrqcys7evf2azwko4ju40xvfjy.lambda-url.ca-central-1.on.aws/submission">
   <input type="hidden" name="form-name" value="contactEN" />
+  <input name="honeypot" type="text" aria-label="bot" hidden/>
+
   <gcds-input type="text" input-id="name" label="Full name" size="30" required></gcds-input>
   <gcds-input type="email" input-id="email" label="Email address" size="50" required></gcds-input>
+  <gcds-fieldset fieldset-id="reasonForContact" legend="Reason for your communication" required>
+    <gcds-radio radio-id="requestADemo" name="reasonForContact" label="Request a demo" value="Request a demo" hint="Book a demo of GC Design System for your team."></gcds-radio>
+    <gcds-radio radio-id="reportAnIssue" name="reasonForContact" label="Report an issue" value="Report an issue" hint="Communicate a problem you've found."></gcds-radio>
+    <gcds-radio radio-id="participateInUserResearch" name="reasonForContact" label="Participate in user research" value="Participate in user research" hint="We'll add your email to a list for user interviews and research."></gcds-radio>
+    <gcds-radio radio-id="other" name="reasonForContact" label="Other" value="Other" hint="Provide a reason in the message field."></gcds-radio>
+  </gcds-fieldset>
   <gcds-textarea label="Message" textarea-id="message" hint="Write your question or comment." required></gcds-textarea>
   <div hidden>
     <gcds-input type="text" input-id="bot-field" label="bot"></gcds-input>

src/fr/contactez/contactez.md

@@ -31,10 +31,18 @@ Renseignez-vous sur Système de design GC, faites une suggestion ou demandez un
 
 Pour toute demande concernant <gcds-link external href="{{ links.githubTokensIssues }}" target="_blank">les unités de style</gcds-link>, <gcds-link external href="{{ links.githubIssues }}" target="_blank">les composants</gcds-link>, et <gcds-link external href="{{ links.githubDocsIssues }}" target="_blank">la documentation</gcds-link>, remplissez ce formulaire ou envoyez une demande à l'aide de fonction « Issues » dans GitHub.
 
-<form class="my-500 contact-us-form" name="contactFR" method="post" style="min-height: 32rem;">
+<form class="my-500 contact-us-form" name="contactFR" method="post" style="min-height: 32rem;" action="https://qao6j5zrqcys7evf2azwko4ju40xvfjy.lambda-url.ca-central-1.on.aws/submission">
   <input type="hidden" name="form-name" value="contactFR" />
+  <input name="honeypot" type="text" aria-label="bot" hidden/>
+
   <gcds-input type="text" input-id="name" label="Nom complet" size="30" required></gcds-input>
   <gcds-input type="email" input-id="email" label="Adresse courriel" size="50" required></gcds-input>
+  <gcds-fieldset fieldset-id="reasonForContact" legend="Raison de votre communication" required>
+    <gcds-radio radio-id="requestADemo" name="reasonForContact" label="Demander une démonstration" value="Request a demo | Demander une démonstration" hint="Réservez une démonstration de Système de design GC pour votre équipe."></gcds-radio>
+    <gcds-radio radio-id="reportAnIssue" name="reasonForContact" label="Signaler un problème" value="Report an issue | Signaler un problème" hint="Communiquez un problème que vous avez trouvé."></gcds-radio>
+    <gcds-radio radio-id="participateInUserResearch" name="reasonForContact" label="Participer à la recherche sur les utilisateur·rice·s" value="Participate in user research | Participer à la recherche sur les utilisateur·rice·s" hint="Nous ajouterons votre adresse courriel à la liste des candidat·e·s pour la recherche sur les utilisateur·rice·s. "></gcds-radio>
+    <gcds-radio radio-id="other" name="reasonForContact" label="Autre" value="Other | Autre" hint="Indiquez une raison dans le champ du message."></gcds-radio>
+  </gcds-fieldset>
   <gcds-textarea label="Message" textarea-id="message" hint="Écrivez votre question ou commentaire." required></gcds-textarea>
   <div hidden>
     <gcds-input type="text" input-id="bot-field" label="bot"></gcds-input>