version 1.0 release

- added a few minor elements
- tweaked and cleaned up documentation
- did some minor refactoring

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 `<br>` 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 `<legend>` items in the form
+* Add a `placeholder` parameter
+* Write tests for key functionality
+* Add form display options for subtext
+
+Just submit a pull request!

_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:

_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 = "<div id = \"form-div\" class = \"form-wrapper\">\n <form id = \"form\" action = \"" .. action .. "\">\n"
+    local form_start = "<div id = \"" .. formid .. "-div\" class = \"form-wrapper\">\n <form id = \"" .. formid .. "\" action = \"" .. action .. "\">\n"
     local form_end = "</form></div>\n"
 
     -- Fields for the Form --
@@ -180,7 +184,7 @@ return {
     form_start = form_start .. "<br>\n<div class=\"form-group\">\n"
     form_start = form_start .. "  <input type=\"submit\" value = \"" .. submit_text .. "\" class=\"btn btn-primary\">\n</div>\n"
     form_start = form_start .. form_end
-    quarto.log.output(form_start)
+    -- quarto.log.output(form_start)
     return pandoc.RawInline("html", form_start)
 
 

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 `"?><div ali --: !---` is probably a bad idea and will break your form.
+:::
+
+The form elements are:
 
 | Key     | Purpose     | Values | Required? | 
 |---------|------------|---------|--------|
 | `action`| path to action | `filepath` | Required |
 | `submit`| text for submit button | `string` | Optional (Default: `Submit`) |
 | `fields`| list of fields | `...` | `fields` | Required |
+| `id` | an id for the form | `string` | Option (Default: `form`) | 
 
 
 This is specified as follows:
@@ -96,6 +104,7 @@ This is specified as follows:
 form:
   action: "pathto/action/file.js"
   submit: "Submit Form"
+  id: FormID
   fields:
   - ...
 ```
@@ -158,7 +167,7 @@ form:
   - text: ---
 ```
 
-The `---` will insert a horizontal rule in the form.
+Using `---` will insert a horizontal rule in the form.
 
 
 # Example Form

submit_form.md

@@ -5,12 +5,5 @@ function submit() {
         alert("Submitted!");
 
     }
-/*const form  = document.getElementById('form');
-
-form.addEventListener('submit', (event) => {
-    //handle the form data
-    console.log("Submitted!")
-
-});*/
 
 </script>