Docs
HTML forms

HTML forms

Learn how to integrate Lucid Forms with your html forms.

Integrate with HTML forms

Lucid Forms can be integrated with your html forms, this is done by just adding the action attribute to your form.

đź’ˇ

Make sure to add the method="POST" attribute to your form, this is required for Lucid Forms to work.

<form action="https://app.lucidforms.co/s/[form-id]" method="POST">
  <input type="text" name="name" placeholder="Name" />
  <input type="email" name="email" placeholder="Email" />
  <button type="submit">Submit</button>
</form>

This will send the form data to the Lucid Forms API, and the form will be submitted to the endpoint you have configured.

Submission success redirect

You can add redirect urls to your form via the dashboard, this will redirect the user to the url after the form is submitted successfully.

To add a redirect url, go to the dashboard and click on the Settings tab, then add the url in the “Redirect URL” field.

If the “Redirect URL” left empty, by default all the success submissions will redirect to https://lucidforms.co/success/.

Submission error redirect

if the submission failed then it will redirect to the same url with “?error=true” appended to the url, which can be used to show form state on the page.

const error = new URLSearchParams(window.location.search).get('error')
if (error === 'true') {
  // show error state
}

Adding custom data

You can add custom data to your form, this will be sent to the Lucid Forms API, and can be used to store data in your database.

<form action="https://app.lucidforms.co/s/[form-id]" method="POST">
  <input type="text" name="name" placeholder="Name" />
  <input type="email" name="email" placeholder="Email" />
  <input type="hidden" name="custom_data" value="custom data" />
  <button type="submit">Submit</button>
</form>

HTML form validation

Resources:

example:

<form action="https://app.lucidforms.co/s/[form-id]" method="POST">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <button type="submit">Submit</button>
</form>
integrations API