JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">


<div class="main container">

<p>
  Please fill out this form
</p>

<div id="contact-form"></div>



</div>

CSS

html,body {
  color: #454545;
}

.main.container {
  margin-top: 5%;
}

JavaScript

const json_form = `{
  "name": "contact-form",
  "attributes": {
    "action": "/ajax/forms/contact-form",
    "accept-charset": "utf-8",
    "autocomplete": "on",
    "enctype": "multipart/form-data",
    "method": "post",
    "name": "contact-form",
    "rel": false,
    "target": false
  },
  "elements": {
    "inputs": {
      "uname": {
        "type": "text",
        "id": "uname",
        "name": "uname",
        "required": true,
        "value": false
      }
    }
  }
}`;

const form_object = JSON.parse(json_form);

console.log(form_object.attributes);