Menu
Accessibility Tool

This tool uses cookies, click confirm below to use this tool

Confirm

PressShift + a to open/close this menu

Grayscale
Contrast
Invert Colors
Invert
Cursor Size
Cursor
Font Size
Reset Accessibility Options

Custom Forms

Quick Links:
Creating Custom Forms
Marking Up Your Own Form
Elements for Forms
Syntax for Forms

What does customization include?

  • Begin process with TeleVox Solutions Standard Forms
  • Modify the text fields on the form (add/edit/remove)
  • The client’s existing logo can be added but not edited
    • Must be supplied in a vector format: ai, jpg or eps
  • If Essentials package, the font/color will be styled to match the client’s custom design. There is no design consultation on this.

What is not customized?

  • We are unable to adjust the following:
    • Form layout on website
    • Form display on the associated PDF  
    • Print layout 

Creating Custom Forms

  1. Log in to the administration area of the website using your username and password.
  2. Once you have logged in, you will hover over the four colored dots in the left top corner of the screen and click "Forms Administration".

  3. When you click on Forms Administration, it will take you to Secure Form Library. You will see a listing of all the standard forms under the "Global Form Templates" area.
  4. Scroll down to the bottom of the screen where you see the section titled "Local Form Templates".
  5. On the right top area of that section you will see a green plus sign next to the "add form template". Click on that link.

  6. This will take you to a new window. In the template content area, you will add the code for your form.

    7. Note - Many times it is better to start with an existing form that is similar to the form you would like to create. In doing that, you can simply change or rearrange the appropriate fields.

    **Note – make sure that you click on the "source button" in the top left of the edit box in order to paste your code.

    See Marking Up Your Own Form section for actual coding instructions

  7. In the "Form Details" section, you will add the pertinent site information. This is the exact same process as adding a standard form.
    1. The only addition to the instructions below is to update the name field with the name of your new form. (Please see the screenshot if you need help finding those areas.)

    2. "After Submission" – you will change this to "redirect to specific url", then a new field pops up directly below.
    3. "Redirect Url" – you will put the following text - /thank-you

      4. **Please verify that there is a thank you page at that location.

    4. "Email Address" – you may list multiple email addresses, but only one per line. Do not use commas to separate the email addresses and make sure that there are no spaces before or after the email address. This will cause the form to error when you try to save it.
    5. "Password" and "Confirm Password" – in this field, you will enter the same password that the client uses to log into their website.
    6. In the bottom right hand corner, you will then click "Next".

      7. **Note: if you are getting validation errors when trying to create your form, you can paste your form on the following website for hints on the errors. https://www.xmlvalidation.com/

  8. You are now at a new screen that shows each field in the form. Scroll to the very bottom of the page and click on the button labeled "Publish Form Template".

  9. Once you click on this button, you will have successfully created and saved a custom form to your website.

**Alternate submission option

  1. Alternative to After Submission Redirect
    1. In the After Submission” area, you may also select "Show Specific Thank You Message".
    2. A new dropdown will show up directly below, titled "Submission Message".
    3. In this field you will enter the message you would like to see displayed in a pop up window after submit is clicked.
    4. The standard message used is, “Thank you! Your information has been submitted to our office. We look forward to seeing you soon.”
    5. If the client has another message they would prefer to use, this is where you would put it.

Marking Up Your Own Form

Form Structure

For grouping purposes, a Section, would include everything within a given area of the form.  For example, the first section on a form generally includes standard patient information, such as:

Name, address, phone, age, birthdate…

Other sections might include Insurance Information, Emergency Contact Information, Medical History etc.

Form Areas

The basic structure of your form will look a bit like the following:

<div id="secure-form">
<section>
<div class="form-group">
<div class="form-element"></div>
<div class="form-element"></div>
<div class="form-element"></div>
</div>
<div class="form-group">
<div class="form-element"></div>
<div class="form-element"></div>
<div class="form-element"></div>
</div>
<div class="form-group">
<div class="form-element"></div>
<div class="form-element"></div>
<div class="form-element"></div>
</div> 
</section>
<section>
<div class="form-group">
<div class="form-element"></div>
<div class="form-element"></div>
<div class="form-element"></div>
</div>
<div class="form-group">
<div class="form-element"></div>
<div class="form-element"></div>
<div class="form-element"></div>
</div>
<div class="form-group">
<div class="form-element"></div>
<div class="form-element"></div>
<div class="form-element"></div>
</div> 
</section>
</div>

For examples of the different field types you can use within a form element, see below:

Text field

<label for="HomeAddress">Home Address: </label><input id="HomeAddress" name="HomeAddress" type="text" />

Phone Number

<label for="Phone">Primary Phone Number: </label><input id="Phone" maxlength="20" name="Phone" placeholder="Example: 111-222-3333" title="Please enter your phone number including the area code" type="tel" /></div>

Date

<label for="DOB">Birth Date:</label><input id="DOB" maxlength="12" name="DOB" placeholder="MM-DD-YYYY" title="Enter a date in this format MM-DD-YYYY" type="date" />

Email

<label for="Email">E-mail:</label><input id="Email" name="Email" placeholder="[email protected]" title="Please enter a valid email address" type="email" />

Radio Button Fieldset

    <fieldset>
<legend>Do you like your smile?</legend>
<label for="LikeSmile_Yes">
<input id="LikeSmile_Yes" name="LikeSmile" type="radio" value="Yes" />
Yes</label>
<label for="LikeSmile_No">
<input id="LikeSmile_No" name="LikeSmile" type="radio" value="No" />
No</label>
</fieldset>

Checkbox Fieldset

     <fieldset>
<legend>Do you currently or have you ever had any of the following habits(check all that apply):</legend>
<label for="Habit-Grinding">
<input id="Habit-Grinding" name="Habit-Grinding" type="checkbox" value="Yes" />
Clenching/Grinding Teeth</label>
<label for="Habit-Lip">
<input id="Habit-Lip" name="Habit-Lip" type="checkbox" value="Yes" />
Lip Sucking/Biting</label>
<label for="Habit-MouthBreather">
<input id="Habit-MouthBreather" name="Habit-MouthBreather" type="checkbox" value="Yes" />
Mouth Breathing</label>
<label for="Habit-NailBiting">
<input id="Habit-NailBiting" name="Habit-NailBiting" type="checkbox" value="Yes" />
Nail Biting</label>
<label for="Habit-ThumbSucking">
<input id="Habit-ThumbSucking" name="Habit-ThumbSucking" type="checkbox" value="Yes" />
Thumb/Finger Sucking</label>
<label for="Habit-Chewing">
<input id="Habit-Chewing" name="Habit-Chewing" type="checkbox" value="Yes" />
Chewing/Eating Problem</label>
</fieldset>

Custom Form Elements

1. #secure-form – your entire form will be wrapped in this div.

<div id="secure-form"></div>

2. section

<section></section>

3. h2.heading

<h2></h2>

4. .form-group

<div class=”form-group”></div>

5. .form-element

<div class=”form-element”></div>

6. label

<label> </label>

7. input. The input field is self-closing.

<input ...... />

8. fieldset

<fieldset></fieldset>

9. legend

<legend>Phone Type:</legend>

10. fieldset label and fieldset label input

<label for=" "><input .../> </label>

Label Syntax

For Text Input Types

<div class="form-element"><label for="Zip">Zip: </label><input id="Zip" maxlength="10" name="Zip" placeholder="12345" title="Please enter your five digit zip code" type="tel" /></div>

This can come before or after the input statement-depending on where you would like the caption to be located.

For text input types, you will mainly use the <label for="">[Caption…this will show as the title of the field.]</label>

**Please note that the text inside the <label for ="here"> must match the id and name in the input statement.

For Checkboxes and Radio Buttons

<div class="form-element">
<fieldset>
<legend>Marital Status:</legend>
<label for="MaritalStatus_Single">
<input id="MaritalStatus_Single" name="MaritalStatus" type="radio" value="Single" /> Single</legend>
<label for="MaritalStatus_Married">
<input id="MaritalStatus_Married" name="MaritalStatus" type="radio" value="Married" /> Married</legend>
<label for="MaritalStatus_Divorced">
<input id="MaritalStatus_Divorced" name="MaritalStatus" type="radio" value="Divorced" /> Divorced</legend>
<label for="MaritalStatus_Widowed">
<input id="MaritalStatus_Widowed" name="MaritalStatus" type="radio" value="Widowed" /> Widowed</legend>
<label for="MaritalStatus_SignificantOther">
<input id="MaritalStatus_SignificantOther" name="MaritalStatus" type="radio" value="SignificantOther" /> Significant Other</legend>
</fieldset>
</div>

  1. Label – must match "input id".
  2. Input id – must match "label"
  3. Name – will be the same for all the radio buttons or checkboxes in that fieldset.
  4. Type – this will be either "radio" or "checkbox"
  5. Value – this will be the value submitted when the submit button is clicked. 
  6. Caption – this is the Caption or Title that shows next to the group of buttons or checkboxes.

Input Syntax

  • Fields containing text or numbers

    **This does not include text areas

    Mandatory input information

    • id="Name"
      • this links the label field with the input field.
    • name="Name"
      • this ensures that the value in the field will be included on submit.

      **These two fields must have the exact same information

    • type="" can be
      • type="text"
      • type="date"
      • type="tel"

      **There are other input types available, but these are not used or styled in our forms.

    Optional Input information

    • autofocus=""
      • this allows you to automatically start typing in that box when the page loads. Generally it is used for the first field in the form. If you do not want to use autofocus, simply remove the text from your code.
    • form_mandatory=""
      • options for this are true or false. It requires some information to be entered into that field in order to submit the form.
    • maxlength="75"
      • this defines the number of characters that can be typed into the field. This does NOT define the visual length of the field on the page.
    • title="Please enter your phone number including the area code"
      • this is the text you see when you hover over the input field on the form.
    • placeholder="Please enter your full name"
      • this shows up in the field until you start typing.

      New input types that are not supported by older web browsers, will behave as <input type="text">.
      • Here is an example of a complete input statement.

      <input id="Spouse-DL" maxlength="10" name="Spouse-DL" type="text" />

      *Note – with these types of inputs, do not wrap the input inside the label.

    • A form element for the input statement would be written as follows:

      • <div class="form-element">
      <label for="Name">Patient Name:</label>
      <input id="Name" maxlength="75" placeholder="Please enter your full name" type="text" />
      </div>

Text Areas

A text area field requires the following information:

Instead of using "input id", with text areas, you use "textarea id".

"Rows" - will define the number of visible text lines

<div class="form-element">
<label for="comments">Comments</label>
<textarea id="comments" name="comments"
rows="4"></textarea>
</div>

Fieldsets

  • fieldset - groups several input/labels within a specific question
  • fieldset legend - represents a caption for the content of the fieldset
  • fieldset label - the caption for each individual input.
  • fieldset label input – the area that accepts user data for submission.
    • Within the input area, you will find a “value field”.

    ***Note: in fieldsets, the input element wraps inside the label.

Radio Button Fieldsets

<fieldset>
<legend> Gender: </legend>
<label for="Gender_Male">
<input id="Gender_Male" name="Gender" value="Male" type="radio"> Male
</label>
<label for="Gender_Female">
<input id="Gender_Female" name="Gender" value="Female" type="radio"> Female
</label>
</fieldset>
  • Radio Button Fieldsets are structured as follows:
  • Legend – this is the title or label
  • Label for—the name of the first radio button
  • Input –this is where you tell it to be a radio button.
  • Additional labels and inputs…then end the fieldset.
  • Note that these require a “value” for each input area. 
    • Value - it defines the value associated with the input (this is also the value that is sent on submit)

Checkbox Fieldsets

<fieldset>
<legend>Have you ever had an injury to (select all that apply): </legend>
<label for="Injury-Teeth">
<input id="Injury-Teeth" name="Injury-Teeth" type="checkbox" value="Yes" /> Teeth </label>
<label for="Injury-Mouth">
<input id="Injury-Mouth" name="Injury-Mouth" type="checkbox" value="Yes" /> Mouth </label>
<label for="Injury-Chin">
<input id="Injury-Chin" name="Injury-Chin" type="checkbox" value="Yes" /> Chin </label>
</fieldset>

  • Checkbox Fieldsets are structured as follows:
  • Legend – this is the title or label
  • Label for—the name of the first checkbox
  • Input type –this is where you tell it to be a checkbox.
  • Additional labels and inputs…then end the fieldset.
  • Note that these require a "value" for each input area. 

Long Checkbox Lists

In order to have the longer checkbox lists be responsive, we have created a separate class for these.

<div class="form-element checkboxGroup">
<fieldset>
<legend>Check if you have ever had any of the following:</legend>
<span>
<label for="Med-History-Anemia">
<input id="Med-History-Anemia" name="Med-History-Anemia" type="checkbox" value="Yes" /> Anemia
</label>
<label for="Med-History-Arthritis">
<input id="Med-History-Arthritis" name="Med-History-Arthritis" type="checkbox" value="Yes" /> Arthritis, Rheumatism
</label>
<label for="Med-History-Artificial-Heart-Valves">
<input id="Med-History-Artificial-Heart-Valves" name="Med-History-Artificial-Heart-Valves" type="checkbox" value="Yes" /> Artificial Heart Valves
</label>
</span>
</fieldset>
</div>

Dropdown Lists

<div class="form-element">
<label for="how_did_you_hear_about_us">How did you hear about our practice?
</label>
<select aria-label="how_did_you_hear_about_us" class="formDropdown" id="how_did_you_hear_about_us" name="how_did_you_hear_about_us">
<option value="Select an Option">Select an Option</option>
<option value="Advertisement">Advertisement</option><option value="A Friend">A Friend</option>
<option value="Internet">Internet</option><option value="Staff Member">Staff Member</option>
<option value="Yellow Pages">Yellow Pages</option>
<option value="Other">Other</option>
</select>
</div>

**Note: in dropdown lists, the input is NOT inside the label.

2024 © All Rights Reserved | Website Design By: Televox | Login