Skip to content

Latest commit

 

History

History
64 lines (54 loc) · 2.08 KB

README.md

File metadata and controls

64 lines (54 loc) · 2.08 KB
Raw

Fetch Forms Core

What is Fetch Forms?

Fetch Forms is a headless forms builder designed to help developers build forms and connect data.

Documentation

Add the package to your app

npm install @fetchforms/core
yarn add @fetchforms/core

Quick start

Using the renderForm() function is the quickest way to get started. It'll handle state management, client side validation, and sending the submission to Fetch Forms if applicable. You can add functions to recieve data when the form loads or a submission is completed.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Fetch Forms Javascript</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <main>
      <h2 id="form_name" style="margin-bottom: 25px;"></h2>
      <div id="fetch_form"></div>
      <pre id="result"></pre>
    </main>
    <script>
     import { renderForm } from "@fetchforms/core";

     const onComplete = (data) => {
       document.getElementById("result").innerHTML = JSON.stringify(data, null, 2);
     };
     const onLoad = (data) => {
       document.getElementById("form_name").innerHTML = data.name;
     };

     renderForm(
       "fcd4ca8b-12d4-4b8c-882d-00144d54d02c",
       "fetch_form",
       onComplete,
       onLoad
     );
   </script>
  </body>
</html>

API Reference

There are three methods available:

getForm: Returns the Fetch Form object. Use this to render the form in whatever way you need..
renderForm: Will build out and submit forms for you. You need pass in the ID of an element to attach the form to. Optionally, you can subscribe to the form's details and submission data.
requestBuild: Returns the Fetch Form object based on a source code form.