How to integrate with Netlify Forms for dynamic inputs

[adiroiban]

Netlify has a nice feature that allows to implement contact forms without any extra backend code

The documentation is here https://docs.netlify.com/manage/forms/setup/#html-forms

The project is that Netlify will do post-processing for the HTML code ... and then vitepress load the page with Hydration completed but contains mismatches.

Has anyone integrated vitepress with Netlify forms?

Any idea for workarounds ?

I also tried the Ajax version, but the hidration error is still triggered.

Thanks!

[brc-dd]

Hmm, not sure but seems like it just works? https://vitepress-theme-default-plus.lando.dev/support.html (https://github.com/lando/vitepress-theme-default-plus/blob/main/docs/support.md?plain=1). Are you sure the hydration error is coming from the form? Can you try temporarily deploying the debug version (update command to DEBUG=true vitepress build) and see which nodes are mismatching?

[adiroiban]

Many thanks for the response. This is encouraging :)

I can confirm that the forms rendered via raw HTML / Markdown works.

The DEBUG=true during build helped a lot. Thanks!

The issue is that I have the form generated via a Vue component

For example, I have this input to help detect the source of the form request and I also have a fa-icon UI candy.

<script>
import {useRouter} from 'vitepress'
const router = useRouter()
</script>

<template>
<form
  action="/confirmation/test-request"
  method="POST"
  name="test-request"
  data-netlify="true"
  >
  <fa-icon icon="fa-solid fa-envelope" />
  <input
    type="email"
    name="email"
    autocomplete="email"
    placeholder="Your email"
    required
  />
  <input type="hidden" name="source" :value="router.route.path">
  <PrimaryButton text="Send requst" action="submit"></PrimaryButton>
</form>
</template>

As long as don't use fa-icon, a custom component or the input with a dynamic value, it works.

I was able to work around the hidration issue, by removing any component and bypassing vuejs. For the template I got

  <input id="form-soure" type="hidden" name="source" :value="router.route.path">

And then in the JS I got

import {onMounted} from 'vue'
onMounted(() => {
  const source_input = document.getElementById('form-soure')
  source_input.value = document.URL
})

[adiroiban]

I guess that this will work, as long as your have static markup... but as long as you add vuejs into the mix, things break apart.

I have documented a workaround to still get some dynamic inputs ... not idea... but for a simple form it should so the job.

Thanks again for the feedback!

[adiroiban]

I am reopening this.... even with static inputs and the form in the Markdown, it works when you load the page.... but if you navigate to a different page and then come back to the page, the forms no longer works

The implementation from https://vitepress-theme-default-plus.lando.dev/support.html seems to work... I am not sure what I am not doing right in my code.

---

From Netlify docs

When Netlify parses the static HTML for a form you’ve added, the build system automatically strips the data-netlify="true" or netlify attribute from the

tag and injects a hidden input named form-name. In the resulting HTML that’s deployed, the data-netlify="true" or netlify attribute is gone, and the hidden form-name input’s value matches the name attribute of like this:

So, to keep the "hydration" process to match to Netlify markup, make sure that you add the hidden input.