Form Basics

Change Doctype to <!DOCTYPE html>
Change image links to be absolute
Change form action to #, method to POST
Change dashes to underscores
Remove value=""

Checkboxes
<input type="checkbox" name="checkboxName" value="checkboxValue" />Label<
<input type="checkbox" name="checkboxName" value="checked" id="checkboxName" {{checkboxName}} /><label for="checkboxName">Label</label><
  <input type="checkbox" name="(\w+)" value="checkboxValue" />(.*)<
  <input type="checkbox" name="\1" value="checked" id="\1" {{\1}} /><label for="\1">\2</label><

Radio Buttons
<input type="radio" name="SampleGroup" value="SampleGroupChoice1">Choice1<
<input type="radio" name="SampleGroup" value="SampleGroupChoice1" id="SampleGroupChoice1" x-sel="{{SampleGroup}}"><label for="SampleGroupChoice1">Choice1</label><
   <input type="radio" name="(\w+)" value="(\w+)" />(.*)<
   <input type="radio" name="\1" value="\2" id="\2" x-sel="{{\1}}" /><label for="\2">\3</label><

Text Fields
>Label<br /><input class="dsR95" type="text" name="textfieldName" value="" size="20" maxlength="20"
><label for="textfieldName">Label</label><br /><input class="dsR95" type="text" name="textfieldName" id="textfieldName" size="20" maxlength="20"
   >(.*)<br /><input class="(\w+)" type="(\w+)" name="(\w+)" value="" size="(\w+)" maxlength="(\w+)"
   ><label for="\4">\1</label><br><input class="\2" type="\3" name="\4" id="\4" size="\5" maxlength="\6"

Text Areas
>Label<br /><textarea class="dsR95" name="textareaName" rows="4" cols="60"
><label for="textareaName">Label</label><br /><textarea class="dsR95" name="textareaName" id="textareaName" rows="4" cols="60"
   >(.*)<br><textarea class="(\w+)" name="(\w+)" rows="(\w+)" cols="(\w+)"
   ><label for="\3">\1</label><br /><textarea class="\2" name="\3" id="\3" rows="\4" cols="\5"

Special Input Types
input type="date"
input type="tel"
input type="email"
input type="number" id="quantity" name="quantity" min="1" max="5"

Disable Multiple Submissions
Add onclick="this.disabled = true" to end of submit code

Disable Enter key on Submit
Use <input type="button" onclick="disableentry()" value="Submit form"> for Submit button
add:
<script>function disableentry() {document.getElementById("myForm").submit();} </script>

Fieldset and Legend

fieldset {
   background-color: #eeeeee;
}

legend {
   background-color: gray;
   color: white;
   padding: 5px 10px;
}

<fieldset>
<legend>legendname:</legend>

(content)

</fieldset>

example

Template Basics

Remove Submit, LuxSci bug, Signature, Signature script, required, background color, placeholders

Text fields
<input class="dsR95" type="text" name="textfieldName" id="textfieldName" size="20" maxlength="20"/>
<input class="dsR95" type="text" name="textfieldName" id="textfieldName" value="{{textfieldName}}" size="20" maxlength="20"/>
   <input class="(\w+)" type="(\w+)" name="(\w+)" id="(\w+)" size="(\w+)" maxlength="(\w+)"
   <input class="\1" type="\2" name="\3" id="\4" value="{{\4}}" size="\5" maxlength="\6"

Text Area boxes
<textarea class="dsR95" name="textareaName" id="textareaName" rows="4" cols="60"></textarea>
<div id="textareabox">{{textareaName}}</div>
#textareabox { background-color: #fff;} if necessary
   <textarea class="(\w+)" name="(\w+)" id="(\w+)" rows="(\w+)" cols="(\w+)"></textarea>
   <div id="textareabox">{{\2}}</div>

Select boxes
<select name="Sample" size="1"> <option> … </option>
<input type="text" value="{{Sample}}" name="Sample" size="24" />
   <select name="(\w+)" size="1">\D+<option(.+)</option>\D+</select>
   <input type="text" value="{{\1}}" name="\1" size="24" />

LuxSci

secure.highlandwebforms.com

The Highland Group, LLC
info@highlandgroup.net

Acknowledgement
<p style="text-align: center;"><br />Thanks for submitting our New Patient Form<br /><br /><br />It has been securely sent to our office – <br />we look forward to seeing you at your next appointment!</p>

Electronic Ink
Head
<script type="text/javascript" src="//d3nojzhs96djbd.cloudfront.net/static/js/ink_signatures_v6.js"></script>

Body
<script type="text/javascript">new sform.Signature({
id: 'inksig',
form_name: 'Form_Name',
field_name: 'signature',
caption: 'Signature',
w: 500,
h: 75,
bg: '#E4E4E4'
});</script>

Disable <enter> key

Place just before Submit

<script>
document.getElementById("FormName").onkeypress = function(e) {

var key = e.charCode || e.keyCode || 0;
if (key == 13) {
e.preventDefault();
}
}
</script>

Eliminate Duplicate Submittal

Place at end of <form> statement

onsubmit="myButton.disabled = true; return true;"

Add to Submit statement

name="myButton"

If Validation Script present

Add to end of validation script:

form.myButton.disabled = true;
return true;

Add to Submit statement

name="myButton"

reference

Duplicate Fields

onchange="duplicateN()"

      <script type='text/javascript'>
      function duplicateS()
{
   var f = document.getElementById('PatientSSN');
   var f = document.getElementById('PatientSSN2');

   f.value = f.value;
}
</script>

add id="name value"

Required Signature

Head <script>
function reqsig()
{
   var isSigned = signature.isSigned('signature');
      if (isSigned < 50) {
         alert('Please enter your signature.');
         return false;
      }
      else {
         return true;
      }
}
</script>

Body script
<script type="text/javascript">
signature = new sform.Signature({
id: 'inksig',
form_name: 'Form Name',
field_name: 'signature',
caption: 'Signature',
w: 500,
h: 75,
bg: '#E4E4E4'
});</script>

Add to Submit button line
      onclick="return reqsig();"

example

Required Checkboxes

<script src="/https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
   var requiredCheckboxes = $('.vaccines :checkbox[required]');
   requiredCheckboxes.change(function(){
      if(requiredCheckboxes.is(':checked')) {
         requiredCheckboxes.removeAttr('required');
      } else {
         requiredCheckboxes.attr('required', 'required');
      }
   });
});</script>

wrap checkbox set in <xx class="vaccines"> add required to each line
example

Conditional Logic

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('XXX').checked) {
    document.getElementById('DDD').style.display = 'block';
    }
    else document.getElementById('DDD').style.display = 'none';
}
</script>

Yes <input type="radio" onclick="javascript:yesnoCheck();" id="XXX">
No <input type="radio" onclick="javascript:yesnoCheck();" >

<div style="clear:both;">
<div id="DDD" style="display:none">

    (content)
</div></div>

add aria-live="polite" to hidden divs

reference

alternative example

Today's Date

<input type="date" id="DateSigned">

Before </form>
<script>
(function() {
var date = new Date().toISOString().substring(0, 10);
var field = document.querySelector('#DateSigned');
field.value = date;
console.log(field.value);
}());
</script>

example

Checkbox Enlargement

Add to head

input[type=checkbox] {

-ms-transform: scale(1.5); /* IE */
-moz-transform: scale(1.5); /* FF */
-webkit-transform: scale(1.5); /* Safari and Chrome */
-o-transform: scale(1.5); /* Opera */
padding-right: 10px;
}

Floating Labels

CSS

:root {
--color__accent: #6200ee;

--field__background: #f5f5f5;
--field__background--hover: #e9e9e9;
--input__border: rgba(0, 0, 0, 0.42);
--input__border--hover: rgba(0, 0, 0, 0.62);
--label__color: #222;

--font__size: 16px;
--font__family: Roboto, Arial, sans-serif;
}

.floating {
margin-bottom: 2rem;
background-color: var(--field__background);
transition: background-color 0.2s ease;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

.floating:hover,
.floating:focus-within {
background-color: var(--field__background--hover);
}

.floating__input {
padding: 1.8rem 1rem 0.6rem;
font-size: 1rem;
border-bottom: 0.1rem solid var(--input__border);
transition: border-color 0.2s ease;
caret-color: var(--color__accent);
}

.floating:hover .floating__input {
border-color: var(--input__border--hover);
}

.floating__input::placeholder {
color: rgba(0, 0, 0, 0);
}

.floating__label {
display: block;
position: relative;
max-height: 0;
font-weight: 500;
pointer-events: none;
}

.floating__label::before {
color: var(--label__color);
content: attr(data-content);
display: inline-block;
filter: blur(0);
backface-visibility: hidden;
transform-origin: left top;
transition: transform 0.2s ease;
left: 1rem;
position: relative;
}

.floating__label::after {
bottom: 1rem;
content: "";
height: 0.1rem;
position: absolute;
transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
opacity: 0;
left: 0;
top: 100%;
margin-top: -0.1rem;
transform: scale3d(0, 1, 1);
width: 100%;
background-color: var(--color__accent);
}

.floating__input:focus + .floating__label::after {
transform: scale3d(1, 1, 1);
opacity: 1;
}

.floating__input:placeholder-shown + .floating__label::before {
transform: translate3d(0, -2.2rem, 0) scale3d(1, 1, 1);
}

.floating__label::before,
.floating__input:focus + .floating__label::before {
transform: translate3d(0, -3.12rem, 0) scale3d(0.82, 0.82, 1);
}

.floating__input:focus + .floating__label::before {
color: var(--color__accent);
}

html

<div class="floating">
<input id="input__username" class="floating__input" name="username" type="text" placeholder="Username" />
<label for="input__username" class="floating__label" data-content="Username">
<span class="hidden--visually">
Username</span></label>
</div>

<div class="floating">
<input id="input__password" type="password" class="floating__input" name="password" type="text" placeholder="Password" />
<label for="input__password" class="floating__label" data-content="Password"><span class="hidden--visually">Password</span></label>
</div>

link (html and css only)