diff --git a/README.md b/README.md index d6b0537..cc68eb2 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,6 @@ This extension allows you to add an HTML form to your Quarto HTML pages, using the the `form` shortcode - - ## Installing ```bash @@ -53,13 +51,22 @@ Fields which take multiple entry values take a `values` parameter, which looks l You can see more detailed (and better-formatted) documentation in the example, below. -## To Do: - -* Add `orientation` option (removes `
` tag to make thing horizontal or vertical) -* Add CSS classes from Bootswatch theming -* Add a JS example for form output - ## Example Here is the source code for a minimal example: [example.qmd](example.qmd). +![Example](media/example.png) + + +# Contributing + +This project is open and welcome contributions. Here are a couple of things you could do: + +* Modify all of the HTML classes to use variables instead of built-ins, to make the easier to manage or adjust +* Add some of the rarer form elements I didn't already code +* Create support for `` items in the form +* Add a `placeholder` parameter +* Write tests for key functionality +* Add form display options for subtext + +Just submit a pull request! diff --git a/_extensions/forms/_extension.yml b/_extensions/forms/_extension.yml index 43c5e2a..03a73fd 100644 --- a/_extensions/forms/_extension.yml +++ b/_extensions/forms/_extension.yml @@ -1,6 +1,6 @@ title: Forms author: Jonathan Graves -version: 0.1.0 +version: 1.0.0 quarto-required: ">=1.2.0" contributes: shortcodes: diff --git a/_extensions/forms/forms.lua b/_extensions/forms/forms.lua index 378af32..aa8ada2 100644 --- a/_extensions/forms/forms.lua +++ b/_extensions/forms/forms.lua @@ -28,10 +28,14 @@ return { local submit_text = pandoc.utils.stringify(meta["form.submit"]) local action = pandoc.utils.stringify(meta["form.action"]) + local formid = "form" + if not isEmpty(meta["form.id"]) then + form_id = pandoc.utils.stringify(meta["form.id"]) + end -- These are the form items -- action (form.action) describes the handler function for the form submit - local form_start = "
\n
\n" + local form_start = "
\n \n" local form_end = "
\n" -- Fields for the Form -- @@ -180,7 +184,7 @@ return { form_start = form_start .. "
\n
\n" form_start = form_start .. " \n
\n" form_start = form_start .. form_end - quarto.log.output(form_start) + -- quarto.log.output(form_start) return pandoc.RawInline("html", form_start) diff --git a/example.qmd b/example.qmd index c8617a4..d03e5fc 100644 --- a/example.qmd +++ b/example.qmd @@ -7,6 +7,7 @@ format: toc: true form: + id: MyFormID submit: "Submit" action: "javascript:submit()" fields: @@ -75,18 +76,25 @@ form: This page demonstrates how to use the `form` shortcode. A form consists of a set of YAML keys and a shortcode. -Insert the shortcode where you want the form to appear. The form is wrapped in a `div` which you can use to style the form, using CSS. +Insert the shortcode where you want the form to appear. The form is wrapped in a `div` which you can use to style the form, using CSS. The default form style uses whatever theme you have chosen from the [Bootswatch](https://bootswatch.com/) themes supported by Quarto. + +If you use a custom theme, you will likely need to provide CSS for the form element classes, if you don't like the default. # Form Elements -The elements are: +:::{.warning} +For most of the form elements that are not intended as labels, you should use HTML-safe names. Calling an form's name `"?>
{ - //handle the form data - console.log("Submitted!") - -});*/ \ No newline at end of file