Troubles when submitting forms

[fluid needle]

When I submit a form - my form values get added to the URL of the page and my onSubmitHandle function doesn't even get called.
I've tried adding method='post' to my <form> element but then the page reloads and nothing happens, still no api call.

[magic wadi]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[jolly bone]

Can you show me your code?

[fluid needle]

@jolly bone

 const ContactForm = ({ className }: Props) => {
  const t = useTranslations();

  const handleContactSubmit = async (values: ContactFormValue) => {
    try {
      await api.contact.contactPerformai(values);
    } catch (err) {
      utils.toastError(err);
    }
  };

  return (
    <section className={classNames("home__form", className)}>
      <h2>{t("Form.header")}</h2>
      <h3 className="home__form__explanation">{t("Form.paragraph")}</h3>

      <Form
        onSubmit={handleContactSubmit}
        render={() => (
          <form method="post">
            <Field
              component={InputField}
              id="fullName"
              name="fullNAme"
              type="text"
              label={t("Form.fullName")}
            />
            <Field
              component={InputField}
              id="email"
              name="email"
              type="email"
              label="EMAIL"
            />
            <Field
              component={InputField}
              id="Phone Number"
              name="phoneNumber"
              type="number"
              label={t("Form.phoneNumber")}
            />
            <Field
              component={InputField}
              id="companyName"
              name="companyName"
              type="text"
              label={t("Form.companyName")}
            />
            <Button type="submit">{t("Form.button")}</Button>
          </form>
        )}
      />
    </section>
  );
};

[jolly bone]

Where is that Form (not form) from?

I think that Form already renders a form component for you. Change the <form> to a <>

[fluid needle]

it's from react-final-form

[jolly bone]

Then you need to pass the handleSubmit prop like so

The method=post is irrelevant here, remove it

[fluid needle]

the problem was that i didnt pass handleSubmit from FinalForm to form onSubmit

      <Form
        onSubmit={handleContactSubmit}
        render={({ handleSubmit }) => (
          <form onSubmit={handleSubmit}>