HTML Preview Form Example

Posted by agiletortoise, Last update almost 4 years ago

Demonstrates how an HTML Preview can be used to display a form, and pass the form values back to the action for use in subsequent script steps.

For more details on this technique, see Advanced HTML Previews in the User Guide.


  • htmlpreview

    <!DOCTYPE html>
    <html dir="auto">
      <meta name="viewport" content="width=device-width, initial-scale=1">
        @charset "utf-8";
        html {
          font-size: 100%;
          font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
           background-color: #ddd;
           color: #222;
        body {
          margin: 0;
          padding: 1em;
        form {
           padding: 1em;
    <p>Demo action showing how JavaScript in an HTML Preview can send values back to the action for use in subsequent action steps.</p>
    <form id="data-form" class="form">
    <legend>Form Values</legend>
    <div class="pure-control-group">
        <label for="input-1">Input 1</label>
        <input id="input-1" type="text" placeholder="Input 1" value="Sample text">
    	<label for="select-1">Select 1</label>
    	<select id="select-1">
        <label for="checkbox-1">
        <input type="checkbox" id="checkbox-1" />&nbsp;Checkbox 1</label>
    <div style="margin: 1em 0 3em 0;">
    <button onclick="submitFormById('data-form');return false;">
    // load form values to an object
    let serialize = (form) => {
        let data = {};
        for(let e of form.elements) {
            if (e.type && e.type === 'checkbox') {
                data[] = e.checked;
            else {
                data[] = e.value;
        return data;
    // send values to Drafts action, then continue...
    let submitFormById = (id) => {
    	let f = document.getElementById(id);
    	let data = serialize(f);
    	Drafts.send("formValues", data);
  • script

    // get the values set by HTML Preview step...
    let vals = context.previewValues["formValues"];
    // display them...
    let s = "";
    for (let k of Object.keys(vals)) {
    	s += `==${k}:
  • script

    // See online documentation for examples


  • After Success Default
    Notification Info
    Log Level Info
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.