Converting Drafts Prompts to HTML Previews?

So I’m very excited by the new HTML preview possibilities in Drafts 21. I have knowledge of HTML and CSS, but I don’t have any experience working with forms or the javascript associated with them. Looking at @agiletortoise 's example at the bottom of this help page is useful, but over my head at this point. Basically, I’m not sure how to read the “serialize” function in that example. Looking at the MDN documentation is also a little over my head.

Basically, I have some existing prompts in Drafts that loop through JSON objects to produce a series of prompts that ask me questions (e.g., about what I did this day, what progress was made on specific goals, etc.) and then store the responses in that same JSON file. I’m sort of lost on what I would need to learn about to be able to convert from Drafts prompts to richly styled HTML previews.

I already have experience creating HTML files based on the JSON data in order to view the data. I don’t use the HTML preview step for this because I want to view them in the browser, but I think I could figure out how to create the HTML/CSS for the prompt easily enough.

Where I’m not sure about is:

  • how to create the form elements (checkboxes and text areas)
  • how to send those responses back to my JSON

If anyone else is recreating prompts into previews and knows the specific javascript techniques that are necessary, I could use some help figuring out what search terms to use in looking for tutorials. So much of the stuff I see seems specific to web work and the Drafts aspect adds wrinkles that confuse me.

1 Like