Connecting Netlify to a conditionally-rendered Next.js form?

Support
,
1

My website has two contact forms, one at the bottom of the page and one inside the sidebar. I was able to successfully connect Netlify-forms to the bottom contact form and receive data, but it doesn’t seem to be working with the one in the sidebar. My theory is that because the sidebar form doesn’t render until it’s opened (Next.js), Netlify isn’t able to connect to it, at least with the way things are set up now. Could anyone give me some insight as to how to fix this?

My site: https://leonndp.com/

Code for the contact form:

import { PaperAirplaneIcon } from "@heroicons/react/solid";

function ContactForm({ name = "contact" }) {
  return (
    <form
      name={name}
      method="POST"
      action="/success"
      data-netlify="true"
      /* data-netlify-recaptcha="true" */
      /* netlify-honeypot={honeypot} */
      className="space-y-8"
    >
      <input className="hidden" name="form-name" type="text" value={name} />
      <input
        className="contact-field"
        name="name"
        type="text"
        placeholder="Full Name"
      />
      <input
        className="contact-field"
        name="email"
        type="email"
        placeholder="E-Mail"
      />
      <input
        className="contact-field"
        name="subject"
        type="text"
        placeholder="Subject"
      />
      <textarea
        className="contact-field"
        name="message"
        rows="5"
        placeholder="Your Message"
      />
      {/* <div
        id={`${name}-recaptcha`}
        className="g-recaptcha"
        data-sitekey={process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY}
      ></div> */}

      <button
        type="submit"
        className="group bg-indigo-500 hover:bg-indigo-700 p-4 px-6 text-xl font-bold uppercase text-shadow-xl flex items-center justify-center space-x-4 relative duration-200 font-orbitron"
      >
        <PaperAirplaneIcon className="h-7" />
        <span>Send</span>
      </button>
    </form>
  );
}

export default ContactForm;

Code for the Drawer component used by the sidebar:

import { useState, useEffect } from "react";
import NavLink from "./NavLink";
import { XIcon } from "@heroicons/react/solid";

function Drawer({ children, onClose }) {
  const [showDrawer, setShowDrawer] = useState(false);

  useEffect(() => {
    handleOpen();

    return () => {
      setShowDrawer(false);
    };
  }, []);

  const handleOpen = (e) => {
    document.body.style.overflow = "hidden";
    setShowDrawer(true);
  };

  const handleExit = async (e) => {
    setShowDrawer(false);
    document.body.style.overflow = "auto";
    onClose();
  };

  return (
    <aside>
      <div
        onClick={(e) => handleExit()}
        className={`z-20 fixed bg-black ${
          showDrawer ? "bg-opacity-80" : "bg-opacity-0"
        } top-0 left-0 h-screen w-screen duration-300`}
      ></div>
      <div
        className={`z-30 fixed top-0 ${
          showDrawer ? "right-0" : "-right-1/2"
        } bg-gray-800 h-screen w-96 duration-300`}
      >
        <button
          onClick={(e) => handleExit()}
          className="rounded-sm bg-purple-500 p-3 absolute top-10 left-0 -translate-x-full cursor-pointer z-50 group hover:bg-purple-700 duration-150"
        >
          <XIcon className="h-7 text-gray-800" />
        </button>
        <div className="relative w-full h-full p-8 overflow-y-scroll">
          {children}
        </div>
      </div>
    </aside>
  );
}

export default Drawer;

Code for the sidebar with the Contact form:

{showAboutDrawer && (
        <Drawer onClose={(e) => setShowAboutDrawer(false)}>
          <div className="relative w-full h-60 lg:h-96">
            <img className="object-cover w-full h-full" src="/me.jpg" alt="" />
          </div>
          <h3 className="mt-7 font-orbitron text-center">Leon N. Dela Pena</h3>
          <a
            href={attributes.resume}
            target="_blank"
            rel="noreferrer"
            className="group my-7 w-full bg-purple-500 hover:bg-indigo-700 py-5 text-2xl font-bold uppercase text-shadow-xl flex items-center justify-center space-x-2 relative duration-200 font-orbitron"
          >
            <DocumentDownloadIcon className="h-10" />
            <span>Download CV</span>
          </a>
          <ContactForm name="contact-sidebar" />
        </Drawer>
      )}
2

Hey @leonndp,

It’s a general piece of advice that you should put a static HTML version of your form in the static directory of the site to ensure it’s always detected. Then it doesn’t matter how you render it using JavaScript. As long as the form is detected, it would work.

1 Like
3

Hi! Thanks for your reply; how would I go about achieving this in Next.js?

4

Hi, @leonndp. We have a support guide with the answer here:

If that doesn’t work for you or if there are other questions, please let us know.