Broadgun Forms Help

Contact

If you need help in any way please don't hesitate to contact Craig Broadbear from Broadgun Software.
email: craig@broadgun.com
phone: +61 3 9028 5252

Video Tutorials

Video tutorials are available here.


The Form Process

1

Create a Word document form template

Create a normal Word document containing form fields. Each form field is a name surrounded by curly braces like this {{name}}.

2

Upload Word document

Once you have created an account you can upload your Word document. An online form will be automatically created from the Word document. You can optionally edit the form using the Form Builder.

3

Share the form

Once you are happy with the form and have tested it out, you can share the forms unique URL to those you wish to fill out the form.

4

Analyze the results: PDFs and Excel

Once people begin submitting form results you can see each result, download all the results as an Excel spreadsheet and download all the completed PDF forms.

Example Word documents to build a form


Job Application.docx
Photo Consent.docx
Multi Section Form.docx - where each section is to be completed by a different person.


Download these files, login to forms.broadgun.com then upload them after you click the 'create new form' button. A web form will be automatically created for your use.




{{ Form Fields }}

Make sure your Word document contains form fields. Form fields are placeholders for data captured by the online form. Form fields are just plain text wrapped in curly braces. e.g. a {{first name}}. Form fields can also have filters applied to define the field type.




Field Types / Filters

Field types define what the control will look like on the form as well as what can be entered. For example a text field displays a text box. Text can be entered and will be shown on the PDF. Filters can be used to set the field type. If no filter is used, Broadgun forms will have a guess at the field type based on the field name eg {{start date}} will default to be a date field. Otherwise the fields default to text fields. The field type can also be changed in the Form Builder user interface.

Most filters in the Liquid templating language are supported.

  • text : {{Name|text}} or {{Name}}
  • multiline : {{Comments|multiline}}
  • date : {{startDate|date: "MMMM Do YYYY"}}
  • money : {{amount|money }}
  • number : {{numItems|number}}
  • checkbox : {{news | checkbox}} I would like to receive newsletters
  • checklist : {{ days of attendance | choices: "Monday", "Tuesday", "Wednesday", "Thursday", "Friday" }}
  • upload : {{Please upload qualifications and references relevant to your experience | upload }}
  • signature : {{ sign here | signature }}
  • max / min : {{ Address | max 50 }}
  • desc : {{age | desc "Please enter your age"}}
  • special dates : {{ $date }}
  • countries : {{ Country | countries }}
  • states : {{ States | states: "USA" }}
  • special dates : {{ $date }}
  • radio boxes / drop down list : {{ title | choices: "Mr", "Mrs", "Miss", "Ms", "Dr", "Sir" }}
  • show_if : {{ somefield | show_if: " option == 'yes' " }}

Tags

Tags are used to control form behaviour. Tags are just normal text surrounded by {% ... %} characters. e.g. To create some text to display on your online form you can use the {% label %} tag. Most tags in the Liquid templating language are supported.

  • break : {% break %}
  • section : {% section sectionName %}
  • label tag : {% label %} Photographs must be less than one year old {% endlabel %}



Filters

You can optionally use filters on your placeholders to manipulate the data entered into the form and to specify what type of control will be displayed on the online form for the field.

e.g. 1
{{ amount | money }} will format the number amount as a currency in the PDF, such as $12.22

e.g. 2
{{ start_date | date "Do MMMM YYYY" }} will format the date like "3rd March 2019".

"Do" - the day
"MMMM" - the month
"YYYY" - the year

Multiple filters can be piped together (where appropriate). e.g.
{{ participants | min 1 | max 4 }}




date filter

Formats a date. Takes as a parameter the desired output format. Uses the moment.js library.
e.g. date("output format")

The 'moment' output format is described at: date formats

            Input:  The date is {{ startdate |  date: "MMMM Do YYYY" }}
            Output: The date is March 3rd 2016
                    
            Input:  The date is {{ startdate |  date: "YYYY-MM-DD" }}
            Output: The date is 2016-03-03
            



money filter

Money formatter. Uses the accounting.js library .
The money filter optionally takes parameters :
currency symbol, precision, thousands separator, decimal separator, format

            Input:  The amount owed is {{ amount |  money }}
            Output: The amount owed is $1,230.00
                    
            Input:  The amount owed is {{ amount  | money: "€", 2, ".", ","}}
            Output: The amount owed is €1.230,00
                    
            Input:  The amount owed is {{ amount  | money: "$", 2, ",", "."}}
            Output: The amount owed is $1,230.00
                    



number filter

Number formatter. Uses the accounting.js library .
The number filter optionally takes parameters :
precision, thousands separator, decimal separator

            Input:  The number of items is {{ amount |  number }}
            Output: The number of items is 1,230.00
            
            Input:  The number of items is {{ amount  | number: 2, ".",  "," }}
            Output: The number of items is 1.230,00
            



max / min filters

If you want to control the maximum or minimum number of characters entered into a control then set one of these. e.g.

            {{ Address | max 50 }}
            A maximum of 50 characters is allowed.

            {{ Name | max 20 | min 3 }}
            A maximum of 20 characters is allowed and a minimum of 3 is required.

                    



multiline

Used to allow multiple lines of text to be entered into a field.

            {{additional comments | multiline}}
                    



checkbox

Used to display a checkbox. Position the checkbox to the left of the text to set the default description of the label in the web form.

            {{agree | checkbox}} I agree to the terms and conditions
                    

In the above example, result in the PDF would show as follows, with either a checked or unchecked box depending on the selection made when filling out the form.
                         I agree to the terms and conditions




checklist

Used to display a multi-select list of checkboxes.

                    {{ meals | choices: "breakfast", "lunch", "dinner" | checklist }}
                    

Only selected responses will be inserted into the PDF form. eg. lunch,dinner




upload

Used to allow PDFs to be uploaded and appended to the final PDF.

            Please upload any references in PDF form {{ references | upload}}
                    



desc

If you want to override the default control field description. You can also override the description by configuring the field in the Form Builder.

            {{age | desc: "Please enter your age"}}
                    

In the above example, the description label on the web form would be 'Please enter your age'.

            {{Your age | desc }}
            

In the above example, the description label on the web form would be 'Your age'.




signature

A signature filter will place a signature pad on the online form. This allows the signature to be captured by mouse (or finger on a touch device) and then placed on the form. .

            {{ Sign here |signature }}
            



countries

A select control containing a list of all countries.

            {{ Country | countries }}
            



states

A select control containing a list of states for the given country. The country can be an abbreviation or the full name.

            {{ State | states USA }}
            {{ State | states Australia }}
            



$date, $datetime

These are special variables that are replaced with the current date or date and time. You can also apply date filters. e.g.

            Input:  The form was submitted on {{ $date }}
            Output: The form was submitted on 2019-04-03

            Input:  The form was submitted on {{ $date | date "MMMM Do YYYY" }}
            Output: The form was submitted on April 3rd 2019

            Input:  Date and time of form submission: {{ $datetime }}
            Output: Date and time of form submission: 2019-04-03 23:02

            Input:  Form completed on {{ $datetime | date "Do MMMM YYYY h:mm:ss a }}
            Output: Form completed on 2019-04-03 11:02:00 pm

            

If you are using sections you can use {{date1}} to refer to the date the first section was completed, {{date2}} to refer to the date the second section was completed and so on. {{$date}} without a number will always be the date of submission of the form.







{{ Options | choices: "yes", "no" }}

If your placeholder has options such as yes or no, you can provide those options in the word document next to the placeholder separated by the colon character. These options will mean the control will either be a radio group (less than 5 options) or a drop down select if the number of options is greater than 5.

e.g.

            Input:  Do you want lunch?  {{ lunch | choices: "YES", "NO" }}
            Output: Do you want lunch? YES

            Input:  What is your favorite color?  {{ color | choices: "orange", "red", "green", "yellow", "black" }}
            Output: What is your favorite color?  yellow

            



show_if

This filter can be used to conditionally display the control in the browser. The "show_if" takes a parameter which is a boolean expression using field names in the form.

NOTE 1: This filter will only work if the field names used in the expression are single words. i.e. no spaces between words.

NOTE 2: All field names used in the expression must be lower case.

NOTE 3: If doing numeric comparisons, make sure the fields you are comparing number or money types.

            Enter your age: {{ age | number }}
            Parents phone number:  {{ parents phone | show_if: "age < 18"}}

            Enter your age: {{ your age | number }}
            Parents phone number:  {{ parents phone | show_if: "your age < 18"}}  // BAD!!! this will not work as the field name "your age" has a space between it.


            Please select your favourite color:  {{color | choices: "red", "green", "blue", "other"}}
            Other:  {{ other color | show_if: 'color == "other"'}}   // will only be shown in the browser if color is "other"

            Enter your age: {{ age | number }}
            Enter your weight (kg): {{ weight | number }}
            Doctors Name:  {{ doctor name | show_if: "age > 60 and weight > 90"}}


            

Tags




{%label%} Label tag {%endlabel%}

Used to allow labels (text only, no user entry) on the form. The text between the {%label%} {%endlabel%} tags is 'kept' in the Word file as well as used in the online form.

e.g.
            {%label%}Persons younger than 21 years require the signature of a parent or guardian {%endlabel%}
                    
label style

Label tags can optionally take a 'style' parameter. The style parameter defines the font used in the html rendering of the label. The styles can be any one of the class names listed in Vuetify Typography.

e.g.
            {% label display-4 %}This will be displayed on the html page  in a really big font {% endlabel %}
                    
            {% label overline %}This will be displayed on the html page as all caps {% endlabel %}}
                    



Section

Sections in a form allow the form to be completed by more than one person. They divide the fields on the form into areas to be filled out by different individuals. At the end of a section completion a new link is generated that must be given to the person who should complete the next section. If you have sections then you must have more than one section.
Section fields are placed before the fields that belong to that particular section. See the video tutorial.

e.g. A form with two sections to be filled out by an applicant and supervisor

            {% section Applicant %}
            {{name}}
            {{email}}
            {% section Supervisor %}
            {{supervisor name}}
            {{signature}}
                



break

This is an optional special tag used to group controls on a page.

e.g. the following will define a form with 3 pages.

            First Name: {{first name}}
            Last Name: {{last name}}
            {% break %}
            Age: {{age}}
            Sex: {{sex}}
            {% break %}
            Email: {{email}}

            



Form Builder

The Form Builder is used to make any adjustments to the form after you have uploaded the Word file that forms the basis of the document. You can also edit a form using the Form Builder by selecting Edit from the Form list.
Fields default to one field per window in the online form.

Using the Form Builder you can :

  • Rearrange the order of fields.
  • Add additional controls that won't display on the form (eg labels).
  • Add/Remove page separators to change the number of fields on a window in the online form.
  • Add sections to the form.
  • Configure the field control (eg make field required, set a default value).
  • Upload a modified Word file.
  • Change the form title, description or background
  • Configure whether the completed forms get emailed to you.
  • Download the Word file used for the form.
  • Set the logo for the form.



Video Tutorials

Simple Demo

This tutorial shows you how to create a Word template document, upload it, share the form, fill out the form and download a PDF.




Multiple Sections

This tutorial shows you how to create and fill out a form that has multiple sections. Each section is filled out by a different person.