From f25079ee8217c041d94480a74e937ba8bfc2170b Mon Sep 17 00:00:00 2001
From: Raman Yasel <raman.yasel@gmail.com>
Date: Wed, 8 May 2024 11:02:18 +0300
Subject: [PATCH] chore: update home page form action

Signed-off-by: Raman Yasel <raman.yasel@gmail.com>
---
 docs/assets/scss/home/contact.scss |  6 +++++
 docs/content/en/_index.html        | 41 +++++++++++++++---------------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/docs/assets/scss/home/contact.scss b/docs/assets/scss/home/contact.scss
index 28224f57f12..06785ab46d5 100644
--- a/docs/assets/scss/home/contact.scss
+++ b/docs/assets/scss/home/contact.scss
@@ -180,6 +180,12 @@
       transition: all 0.3s ease;
       -webkit-appearance: none;
 
+      &:-webkit-autofill,
+      &:-webkit-autofill:hover,
+      &:-webkit-autofill:focus {
+        transition: background-color 5000s;
+      }
+
       @media (max-width: $desktop) {
         padding: 6px 16px;
       }
diff --git a/docs/content/en/_index.html b/docs/content/en/_index.html
index 27461221260..10c5bb0399e 100644
--- a/docs/content/en/_index.html
+++ b/docs/content/en/_index.html
@@ -624,23 +624,22 @@ <h2 class="title contact__title">Telling the Tetragon Story</h2>
                 <p>Not a native speaker and/or not confident about your writing skills? No worries. Bring the story and
                     we’ll help you tell it in an engaging way.</p>
             </div>
-            <form id="contact-form" class="contact__form" method="POST" action="https://formspree.io/f/moqgybjj"
-                  novalidate>
+            <form id="contact-form" class="contact__form" method="post" action="https://formspree.io/f/xbjnwnjb" novalidate>
                 <label>
                     <span>Name</span>
-                    <input id="name" type="text" name="name" required>
+                    <input id="firstName" type="text" name="firstName" autocomplete="given-name" required>
                 </label>
                 <label>
                     <span>Email</span>
-                    <input id="email" type="email" name="email" required>
+                    <input id="email" type="email" name="email" autocomplete="email" required>
                 </label>
                 <label>
                     <span>Cilium Slack Username</span>
-                    <input id="slack-username" type="text" name="slack-username" value="" required>
+                    <input id="ciliumSlackUsername" type="text" name="ciliumSlackUsername" required>
                 </label>
                 <label>
                     <span>How are you using Tetragon?</span>
-                    <input id="how-using" type="text" name="how-using" value="" required>
+                    <input id="howAreYouUsingTetragon" type="text" name="howAreYouUsingTetragon" required>
                 </label>
                 <label class="contact__full-width">
                     <span>Message</span>
@@ -650,58 +649,58 @@ <h2 class="title contact__title">Telling the Tetragon Story</h2>
                 <ul class="contact__form-column">
                     <li>
                         <div class="contact__checkbox">
-                            <input id="reviewing" type="checkbox" name="reviewing" value="">
+                            <input id="reviewAbstract" type="checkbox" name="reviewAbstract" value="Reviewing an Abstract">
                             <span aria-hidden="true"></span>
                         </div>
-                        <label for="reviewing">Reviewing an abstract</label>
+                        <label for="reviewAbstract">Reviewing an abstract</label>
                     </li>
                     <li>
                         <div class="contact__checkbox">
-                            <input id="presentation" type="checkbox" name="presentation" value="">
+                            <input id="polishPresentation" type="checkbox" name="polishPresentation" value="Polish a presentation">
                             <span aria-hidden="true"></span>
                         </div>
-                        <label for="presentation">Polish a presentation</label>
+                        <label for="polishPresentation">Polish a presentation</label>
                     </li>
                     <li>
                         <div class="contact__checkbox">
-                            <input id="event-speaker" type="checkbox" name="event-speaker" value="">
+                            <input id="findSpeaker" type="checkbox" name="findSpeaker" value="Finding a speaker for an event or livestream">
                             <span aria-hidden="true"></span>
                         </div>
-                        <label for="event-speaker">Finding a speaker for an event or livestream</label>
+                        <label for="findSpeaker">Finding a speaker for an event or livestream</label>
                     </li>
                     <li>
                         <div class="contact__checkbox">
-                            <input id="retweet" type="checkbox" name="retweet" value="">
+                            <input id="getRetweet" type="checkbox" name="getRetweet" value="Getting a Retweet">
                             <span aria-hidden="true"></span>
                         </div>
-                        <label for="retweet">Getting a Retweet</label>
+                        <label for="getRetweet">Getting a Retweet</label>
                     </li>
                 </ul>
                 <ul class="contact__form-column">
                     <li>
                         <div class="contact__checkbox">
-                            <input id="blog-post" type="checkbox" name="blog-post" value="">
+                            <input id="writePost" type="checkbox" name="writePost" value="Writing a blog post">
                             <span aria-hidden="true"></span>
                         </div>
-                        <label for="blog-post">Writing a blog post</label>
+                        <label for="writePost">Writing a blog post</label>
                     </li>
                     <li>
                         <div class="contact__checkbox">
-                            <input id="case-study" type="checkbox" name="case-study" value="">
+                            <input id="writeCaseStudy" type="checkbox" name="writeCaseStudy" value="Writing a case study">
                             <span aria-hidden="true"></span>
                         </div>
-                        <label for="case-study">Writing a case study</label>
+                        <label for="writeCaseStudy">Writing a case study</label>
                     </li>
                     <li>
                         <div class="contact__checkbox">
-                            <input id="news" type="checkbox" name="news" value="">
+                            <input id="echoNews" type="checkbox" name="echoNews" value="Submitting to eCHO News">
                             <span aria-hidden="true"></span>
                         </div>
-                        <label for="news">Submitting to eCHO News</label>
+                        <label for="echoNews">Submitting to eCHO News</label>
                     </li>
                     <li>
                         <div class="contact__checkbox">
-                            <input id="other" type="checkbox" name="other" value="">
+                            <input id="other" type="checkbox" name="other" value="Other">
                             <span aria-hidden="true"></span>
                         </div>
                         <label for="other">Other</label>