Customers
User information
 Loading ...
Show article in Knowledge Base

 The Simple Forms page Export knowledge base Export     SubscribeSubscribe      Show article info

Simple Forms - the way to create your own web page for VisionProject.

Simple forms is a way of creating issues in VisionProject from a form outside VisionProject.

In this way, you could have a form on your web page where your customers could enter a question/report a bug etc. and it will be created as an issue in your project.

There are a couple of basic code examples, and then a table for the form fields.

 

Code samples: These will help you set up your own forms. A good start is to copy one of these, either the simple or more advanced one, and then modify it for your needs. The example includes everything needed for the page to communicate with the project you are working in (the 2nd line includes the field "projectHash", which is the reference to your project).

If you are unfamiliar with how this works, you can test to create an .html-file on your computer and insert the text from the simple example below. The information you put in to the form will then automatically create an issue in the project that you copied the code from.

 

Note: The text encoding of the file is important. It should be in UTF-8 to support national characters in text or in data values. Having non-latin characters in a file not encoded with UTF-8 may result in values with national characters not being imported properly to the created issue.

 

 

Simple example

    <form action="https://www.visionflow.com/NewIssueFromPOST.do" id="newIssueForm" name="newIssueForm" method="post" enctype="multipart/form-data">
        <input type="hidden" name="projectHash" value="u6o8IG6EI9LIkAwL">
        <input type="hidden" name="issueTypeName" value="Support issue">
        <input type="hidden" name="afterSuccessGoToThisPage" value="http://www.visionflow.com">
        <!-- <input type="hidden" name="successMessage" value="Your question has been submitted!<br><br>We will respond to you with an email as soon as possible!"> -->

        <p>
           <label>Your name:</label><br />
           <input type="text" id="username" name="username" value="" />
        </p>
        <p>
           <label for="email">E-mail:</label><br />
           <input type="text" id="email" name="email" value="" />
        </p>

        <p>
           <label for="email">Question:</label><br />
           <input type="text" id="name" name="name" value="" />
        </p>
        <p>
           <label for="description">Details:</label><br />
           <textarea id="description" name="description" rows=10 cols=30></textarea>
        </p>

        <p><input type="submit" value="Submit"></p>
   </form>

 

 

Advanced example with file attachment and "spam protection"

 <!-- For spam protection we set "#" for the action attribute below! -->
    <form action="#" id="newIssueForm" name="newIssueForm" method="post" enctype="multipart/form-data" accept-charset="utf-8">
        <input type="hidden" name="projectHash" value="u6o8IG6EI9LIkAwL">
        <input type="hidden" name="afterSuccessGoToThisPage" value="http://www.visionflow.com">
        <!-- <input type="hidden" name="successMessage" value="Your question has been submitted!<br><br>We will respond to you with an email as soon as possible!"> -->

        <p>
        <label>Type of enquiry:</label>
            <input type="radio" name="issueTypeName" value="Incident">Incident
            <input type="radio" name="issueTypeName" value="Support issue">Support issue
            <input type="radio" name="issueTypeName" value="Idea">Idea
        </p>
        <p>
           <label>Your name:</label><br />
           <input type="text" id="username" name="username" value="" />
        </p>
        <p>
           <label for="email">E-mail:</label><br />
           <input type="text" id="email" name="email" value="" />
        </p>

        <p>
           <label for="email">Summary:</label><br />
           <input type="text" id="name" name="name" value="" />
        </p>
        <p>
           <label for="description">Details:</label><br />
           <textarea id="description" name="description" rows=10 cols=30></textarea>
        </p>
        <p>
           <label for="Extra_More-info">More info:</label><br />
           <textarea id="Extra_More-info" name="Extra_More-info" rows=10 cols=30></textarea>
        </p>
        <p>
           <label for="theFile0">File:</label><br />
           <input type="file" id="theFile0" name="theFile0" size="90" style="width:640px">
        </p>

        <!-- For spam protection we have a "button" instead of submit below and set the action attibute dynamically. -->   
        <p><input type="button" value="Submit" onclick='var issueform=document.getElementById("newIssueForm");issueform.setAttribute("action", "https://www.visionflow.com/NewIssueFromPOST.do");issueform.submit();'></p>
   </form>

 

The Form tag

<form action="https://www.visionflow.com/NewIssueFromPOST.do" id="newIssueForm" name="newIssueForm" method="post" enctype="multipart/form-data">

 

 

Form fields

A reference for all the allowed fields in forms.

 

Form fieldRequired?DescriptionReal samplesValid values
projectHash YES Required by VisionFlow. (The value that you see here is what you should use for this project) <input type="hidden" name="projectHash" value="u6o8IG6EI9LIkAwL"> u6o8IG6EI9LIkAwL
issueTypeName YES Type of issue. <input type="hidden" name="issueTypeName" value="Support issue">
  • Incident
  • Support issue
  • Idea
afterSuccessGoToThisPage YES (or successMessage) An URL that will be shown after submit. <input type="hidden" name="afterSuccessGoToThisPage" value="http://www.visionflow.com"> Any URL
successMessage YES (or afterSuccess
GoToThisPage)
A message that should be shown after submit. <input type="hidden" name="successMessage" value="Your question has been submitted!<br><br>We will respond to you with an email as soon as possible!"> Any text
afterFailureGoToThisPage NO An URL that should be shown after an unsuccessful submit. <input type="hidden" name="afterFailureGoToThisPage" value="http://www.visionflow.com/failure.html"> Any text
username YES The name of the user. <input type="text" name="username" value=""> Any text
email YES The email for the user. <input type="text" name="email" value=""> Valid email address
userPhone NO The phone for the user <input type="text" name="userPhone" value=""> Any text
userCellPhone NO The cellphone for the user <input type="text" name="userCellPhone" value=""> Any text
userHomePhone NO The home phone for the user <input type="text" name="userHomePhone" value=""> Any text
name YES The title for the issue. <input type="text" name="name" value=""> Any text
description NO The text in this field will be inserted in the description of the issue. <textarea id="description" name="description" rows=10 cols=30></textarea> Any text
theFile0 NO Use this to be able to attach files to the issue. You can have up to 20 files attached at the same time. The field name for these files are theFile0, theFile1, theFile2, up to theFile19. <input type="file" size="90" name="theFile0" style="width: 640px;"> A file path

 

 

The columns are:

  • Form field- the name/id of the form field
  • Required - whether the field must be present or not. Yes -> It must be present in the form.
  • Description - tells you what the field is for
  • Real samples - sample code for the form field
  • Valid values - what values the form field can be set to. 

 

Custom fields

It is possible to link simple forms to custom issue fields that has been added to the issue field configuration for your project.

 

This feature is a bit hidden but can be achieved by:

  • Go to the issue field configuration for your project
  • find the field that you want to add as a simple form field
  • Click on the Question mark (?) and you should see something like
  • Custom field?:Yes
    Field type: Multi select list
    Index:2
  • In your form add a new field that looks something like below (please note that the 2  is the index above):
    <select name="companyCustomField2"> 
         <option value="Toyota" selected="selected">Toyota</option>
         <option value="Ford">Ford</option>
    </select>

 

Note that only issue fields that are text fields or select lists are supported.

 

 

For more information go to your project in VisionProject > Settings > Simple forms


User comments
 Loading ...