feat: add marketo form

.env.example

@@ -7,3 +7,7 @@ GATSBY_ALGOLIA_APP_ID=
 GATSBY_ALGOLIA_SEARCH_ONLY_KEY=
 GATSBY_ALGOLIA_INDEX_NAME=
 ALGOLIA_ADMIN_KEY=
+
+GATSBY_NEWSLETTER_FORM_MUNCHKIN_ID=
+GATSBY_NEWSLETTER_FORM_ID=
+GATSBY_NEWSLETTER_FORM_URL=

.github/workflows/pr-deploy.yml

@@ -6,6 +6,9 @@ env:
   GATSBY_DEFAULT_DOC_URL: https://mdr-ci.staging.k6.io/docs/${{ github.ref }}
   GATSBY_DEFAULT_BLOG_URL: https://k6.io/blog
   GATSBY_DEFAULT_APP_URL: https://app.staging.k6.io
+  GATSBY_NEWSLETTER_FORM_URL: https://go2.grafana.com
+  GATSBY_NEWSLETTER_FORM_MUNCHKIN_ID: 356-YFG-389
+  GATSBY_NEWSLETTER_FORM_ID: 1420
 
 on:
   pull_request:

.github/workflows/production.yml

@@ -21,6 +21,9 @@ env:
   GATSBY_DEFAULT_DOC_URL: https://${{ secrets.PROD_CI_MAIN_URL }}/docs
   GATSBY_DEFAULT_MAIN_URL: https://${{ secrets.PROD_CI_MAIN_URL }}
   GATSBY_GOOGLE_API_KEY: ${{ secrets.PROD_CI_GATSBY_GOOGLE_API_KEY }}
+  GATSBY_NEWSLETTER_FORM_URL: https://go2.grafana.com
+  GATSBY_NEWSLETTER_FORM_MUNCHKIN_ID: 356-YFG-389
+  GATSBY_NEWSLETTER_FORM_ID: 1420
 
 jobs:
   update-dependencies:

.github/workflows/staging.yml

@@ -21,6 +21,10 @@ env:
   GATSBY_DEFAULT_DOC_URL: https://staging.k6.io/docs
   GATSBY_DEFAULT_MAIN_URL: https://staging.k6.io
   GATSBY_GOOGLE_API_KEY: ${{ secrets.STAGING_CI_GATSBY_GOOGLE_API_KEY }}
+  GATSBY_NEWSLETTER_FORM_URL: https://go2.grafana.com
+  GATSBY_NEWSLETTER_FORM_MUNCHKIN_ID: 356-YFG-389
+  GATSBY_NEWSLETTER_FORM_ID: 1420
+
 jobs:
   update-dependencies:
     name: Update node module dependencies

package.json

@@ -32,6 +32,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.1.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@sentry/gatsby": "^7.21.1",
@@ -70,10 +71,12 @@
     "react-clipboard.js": "^2.0.16",
     "react-cookie-banner": "^4.1.0",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.43.9",
     "react-instantsearch-dom": "^6.38.1",
     "react-tooltip": "^4.5.1",
     "runes": "^0.4.3",
-    "sass": "^1.56.1"
+    "sass": "^1.56.1",
+    "yup": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",

src/components/blocks/footer/footer.view.js

@@ -1,3 +1,4 @@
+import SubscribeForm from 'components/shared/subscribe-form';
 import { Link } from 'gatsby';
 import React, { useState, useEffect } from 'react';
 import Logo from 'svg/logo-with-grafana-labs.inline.svg';
@@ -318,6 +319,8 @@ export const Footer = () => {
         </div>
       </div>
 
+      <SubscribeForm />
+
       <div className={'container'}>
         <div className={'row'}>
           <div className={'col-md-2 col-sm-12 col-auto'}>

src/components/shared/form-message/form-message.module.scss

@@ -0,0 +1,31 @@
+.wrapper {
+  text-align: center;
+  width: 100%;
+}
+
+.success-icon {
+  margin-bottom: 10px;
+  svg {
+    display: block;
+    margin: 0 auto;
+  }
+}
+
+.success-text {
+  font-size: $font-size-sm;
+}
+
+.error-text {
+  font-size: $font-size-sm;
+  color: $color-error;
+
+  a {
+    color: $color-error;
+    font-weight: bold;
+    text-decoration: none;
+
+    @include hover-supported {
+      text-decoration: underline;
+    }
+  }
+}

src/components/shared/form-message/form-message.view.js

@@ -0,0 +1,33 @@
+import MarketoForm from 'components/shared/marketo-form';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import styles from './form-message.module.scss';
+import SuccessSVG from './svg/success.inline.svg';
+
+const FormMessage = ({ type }) => (
+  <div className={styles.wrapper}>
+    {type === 'success' && (
+      <>
+        <div className={styles.successIcon}>
+          <SuccessSVG />
+        </div>
+        <span className={styles.successText}>
+          Your message has been successfully sent
+        </span>
+      </>
+    )}
+    {type === 'error' && (
+      <span className={styles.errorText}>
+        Your message has not been sent. Please, if the problem persists, contact{' '}
+        <a href={'mailto:support@k6.io'}>support@k6.io</a>.
+      </span>
+    )}
+  </div>
+);
+
+MarketoForm.propTypes = {
+  type: PropTypes.string.isRequired,
+};
+
+export default FormMessage;

src/components/shared/form-message/index.js

@@ -0,0 +1,3 @@
+import FormMessage from './form-message.view';
+
+export default FormMessage;

src/components/shared/marketo-form/index.js

@@ -0,0 +1,3 @@
+import MarketoForm from './marketo-form.view';
+
+export default MarketoForm;

src/components/shared/marketo-form/marketo-form.view.js

@@ -0,0 +1,23 @@
+import useMarketo from 'hooks/use-marketo-form';
+import PropTypes from 'prop-types';
+import React, { memo } from 'react';
+
+const MarketoForm = memo(({ debug, formId }) => {
+  useMarketo({
+    formId,
+    callback: () => {},
+  });
+
+  return <form id={`mktoForm_${formId}`} hidden={!debug} aria-hidden="true" />;
+});
+
+MarketoForm.defaultProps = {
+  debug: false,
+};
+
+MarketoForm.propTypes = {
+  debug: PropTypes.bool,
+  formId: PropTypes.string.isRequired,
+};
+
+export default MarketoForm;

src/components/shared/subscribe-form/index.js

@@ -0,0 +1,3 @@
+import SubscribeForm from './subscribe-form';
+
+export default SubscribeForm;