Forms - How to Create a Form (v12.x)

The Forms tool allows you to create, edit, delete, and manage forms and questions. Creating a form is as simple as defining basic form information, setting the number of rows and columns in the form, dragging and dropping questions into defined layout, and setting optional vaidations for each question. When a user completes and submits a form, all of the demographic and transaction information from the form is saved in the ONEcount database.

8

9

Please refer to the Quick Start Guide~-~- Questions and Forms for information on basic concepts and rules relating to forms.

10

11

(% style="color: rgb(0,0,0);" %)When a user completes and submits a form, all of the information gathered from the form is entered into the ONEcount database. Plan forms carefully to ensure that you include questions and possible responses that will provide you with all the data you wish to collect from subscribers/purchasers.

12

13

(% style="color: rgb(255,0,0);" %)**Questions are shared among ALL forms, so any changes made to question type, text, responses, alias, report header (See Question Builder - Create and Manage Questions for more detail) will change ALL forms, not just the form you are working on. Deleting a question will remove that question from ALL forms as well. **(%%)

14

(% style="color: rgb(255,0,0);" %)**Changes made to form information, form layout, order of questions, and optional validations. will NOT universally change forms – these changes will be applied only to the form you are working on.**

15

16

Form-related tasks include:

17

18

* creating database fields/questions available for placement in online forms; (See Question Builder - Create and Manage Questions for more detail.)

19

* creating new forms;

20

* managing existing forms;

21

* creating source codes that are used to track the source of a name/transaction;

22

* and creating individually branded forms.

23

24

The first task listed above – creating questions is accomplished using the Question Builder tool. The next two tasks – creating new forms and managing existing forms – are carried out using the Form Builder tool under INVENTORY. Creating source codes is handled under Source Codes and creating branded forms is handled under Brands. All of these tools are found under INVENTORY.

25

26

Note that there are two methods you can use for a form to display in your brand's look and feel.

27

28

(% style="text-decoration: underline;" %)**Method 1**(%%)

29

Use Brand tool in ONEcount. Using the Brand tool, you create a blank page in your CMS with only the header and footer for your brand, then create a code for that brand that will fetch that page when the form is called. The code you create using the Brand tool allows you to use that brand's look and feel for any form simply by appending &brand=[[CODE>>doc:CODE]] to the URL.

30

31

(% style="color: rgb(0,0,0);" %)You must include the following markers on the brand page you create in your CMS:

32

33

(% style="color: rgb(37,81,115);" %)**<!-**(% style="color: rgb(37, 81, 115); text-decoration: line-through" %)**onecount_header**(% style="color: rgb(37,81,115);" %)**->**(%%) Place in the page where the header will END

34

(% style="color: rgb(37,81,115);" %)**<!-**(% style="color: rgb(37, 81, 115); text-decoration: line-through" %)**onecount_footer**(% style="color: rgb(37,81,115);" %)**->**(%%) Place in the page where the footer will START

35

36

If you require a separate header/footer page for mobile, you must also create that page.

37

38

Because ONEcount uses SSL, there may be issues with non-SSL brand pages using this method, so you may choose to use method 2 described below. (See ONEcount SSL and non-SSL Client Brand Pages for more detail.)

39

40

(% style="text-decoration: underline;" %)**Method 2**(%%)

41

Create a custom header and/or footer when creating a form.

42

43

=== OPENING THE "CREATE NEW" FORM WINDOW ===

44

45

=== Select INVENTORY from the main menu. ===

46

47

[[image:attach:media_1430428383541.png||align="center"]]

48

49

=== Select "Forms" from the sub-menu. ===

50

51

[[image:attach:media_1430428408807.png||align="center"]]

52

53

This will open the Manage Forms window where you can select to create a new form. (See below.)

54

55

=== Click "Create Form". ===

56

57

[[image:attach:media_1430428555772.png||align="center"]]

58

59

This will ope the "Form Builder - Part 1" window where you begin creation of your new form.

60

61

=== CREATE FORM PART 1 - INFORMATION ===

62

63

[[image:attach:media_1430513939421.png||align="center"]]

64

65

=== Enter Form Information. (See items #1-6 below.) ===

66

67

[[image:attach:media_1430765839162.png||align="center"]]

68

69

(1) Enter the **Form Name**. The **Form Name** field is displayed at the top of the form in the front end view. This is the name of the form the user will see on your website. (See screen shot of front end view below.)

70

71

(2) Enter the **Form Description** (optional). The **Form Description** field is also displayed at the top of the form, under the Form Name, in the front end view. This is the text the user will see with instructions on what to do, e.g. "Complete the form below to receive a free subscription to our weekly newsletter." Form Description text may be styled using the pop-up styling toolbar that appears when you click in the Form Description field, including images, special characters, and links . (See screen shot of front end view below.)

72

73

(3) Select what Source Code to apply to the form by selecting from the drop-down **Source Code List.** Source Codes are not displayed on the form~-~-this is a back-end function.

74

75

**Source Codes** are used to track the source of a transaction, ie the source of the user/name in the ONEcount database. The source code assigned to a form is attached to a user record when the form is completed online. This identifies the form that the user completed, thereby identifying the source of the name in the database. See Source Codes- How to Create and Manage Source Codes for more information.

76

77

If you want to assign a Source Code and there are none, you should save your form, create a new code, then return to your form and select that code.

78

79

(4) Enter the **Product Prompt** text (optional). The **Product Prompt** is the instructional text found above the list of products on the form. (See screen shot of front end view below.) If you leave this field blank, the default text of "Please check the box for each of the products you would like to receive/continue receiving. Unchecked products will not be updated." will be used. Any text you enter here will replace the default text, and you can include html to change the font color, size, etc.

80

81

(5) Enter a **Redirect URL** (optional). A **Redirect URL** is a URL to open upon form submission. Redirect URLs are not displayed on the form~-~-this is a back-end function.

82

83

(6) Select a **Submission Option**. (See screen shots of front end view below.)

84

85

* Product Selection Required (The user must select a product to submit the form. If no product is selected, a message will appear below the product prompt text instructing the user to select at least one product to continue.)

86

* Product Selection Not Required - Display Warning (The form may be submitted without a product selection, but a pop-up message will appear asking if the user is sure he/she wishes to continue without selecting a product.)

87

* Product Selection Not Required - No Warning (The form may be submitted without a product selection, and no warning message will appear.)

88

89

=== Front-End View Screenshots ===

90

91

[[image:attach:media_1430763892412.png||align="center"]]

92

93

[[image:attach:media_1430764964000.png||align="center"]]

94

95

[[image:attach:media_1430765247198.png||align="center"]]

96

97

[[image:attach:media_1430765149355.png||align="center"]]

98

99

=== Enter Acknowledgement Email Information. (See Items #7-10 below.) ===

100

101

[[image:attach:media_1430766909283.png||align="center"]]

102

103

(% style="color: rgb(255,0,0);" %)This is where you can create cusotmized acknowledgement emails specific to the form/product attached to the form. Creating these customized emails is optional, as default acknowledgement emails not specific to any form and/or product are configured in the Configuration Manager.

104

105

(7) Enter the subject of the email in "New Thank You Email Subject" field.

106

(8) Enter the content of the email in "New Thank You Email" field.

107

Body markers that may be used in the text are as follows:

108

%%USERNAME%% – will replace the body marker %%USERNAME%% with the subscriber's username.

109

%%PASSWORD%% – will replace the body marker %%PASSWORD%% with the subscriber's password.

110

%%ONECOUNTID%% – will relace the body marker %%ONECOUNTID%% with the subscribers account number/ONEcount ID.

111

%%RECEIPTDISPLAY%% – will replace the body marker %%RECEIPTDISPLAY%% with a receipt for purchase amount, if any.

112

(9) Enter the subject of the email in the "Updae Thank You Email Subject" field.

113

(10) Enter the content of the email in the "Update Thank You Email" field.

114

115

As with Form Description text, Email content may be styled using the pop-up styling toolbar that appears when you click in the Form Description field, including images, special characters, and links.

116

117

=== Click the red "Next" button when done with Form Information. ===

118

119

This will open the "Build Form" window, as shown below.

120

121

=== CREATE FORM PART 2 - BUILD FORM ===

122

123

[[image:attach:media_1430938547197.png||align="center"]]

124

125

(1) **Rows** and **Columns.** Determine the number of rows and how many columns in each of those rows. The number of columns may be set on a row-by-row basis, i.e. the number of columns does not necessarily have to be the same for each row, and rows may be added at any time during form construction.

126

(2) Drag **Questions** into the **workspace (3).** You can quickly find questions by searching by name or question ID #.

127

(4) Set **Question Options** and validations for each question.

128

129

More detail on each of the above steps is provided below.

130

131

=== Set the number of rows and columns. ===

132

133

[[image:attach:media_1430938787682.png||align="center"]]

134

135

The form layout above was completed in two steps: Step 1 was to select Rows: 5 / Column: 1 then click "Add" and Step 2 was to select Rows: 1 / Column: 3 then click "Add".

136

137

As stated in the previous step, the number of rows and columns can be set on a row-by-row basis and can be done at any time during form construction.

138

139

=== Drag and Drop Questions into Workspace. ===

140

141

[[image:attach:media_1430938961950.png||align="center"]]

142

143

First Name, Last Name, Email, Address1, Address2, City, and State have been dragged and dropped into the form.

144

Once a question is placed in a form, it is removed from the list of questions.

145

Notice that the "Zip/Postal Code:" question was found by doing a quick search for "zip". This question can now be dragged and dropped into column 3 of row 6, as shown below.

146

To return to the full list questions not yet placed on the form, delete "zip" from the search box.

147

148

Note that you can create a new question here by clicking on **+Create New Question**. This will bring up a pop-up where you can create a question on the fly.

149

You can also edit questions here, but be careful! (% style="color: rgb(255,0,0);" %)**Any changes made to the Question Text, Response Type, Question Alias, Question Tage, and Lookup Question are universal and will change ALL forms in the system, not just the form you are working on.**

150

151

[[image:attach:media_1430939101634.png||align="center"]]

152

153

Once all questions are placed on the form, set Question Options. Alternatively, question options may be completed as each question is placed on the form.

154

To set options, simply click on the question and select options.

155

156

=== Set Question Options ===

157

158

[[image:attach:media_1430939154859.png||align="center"]]

159

160

Available **Question Options** are:

161

**Auto Populate:** (% style="color: rgb(0,0,0);" %)This check box allows you to tell the form what fields to pre-populate from information already in the database when a user clicks a link to a form. If audited, per audit rules, you cannot pre-populate certain demographics, even if the information is in your database. Auto Populate works in conjunction with the "&renewal=true" string in form linkouts. (Find more about form linkouts in the Quick Start Guide-Questions and Forms or Links section of How to Mange Forms.) When the Auto Populate box is checked and the form linkout has "&renewal=true" appended to the end, the only information that will be pre-populated on the form is the information for the questions that have the Auto Populate box checked. If "&renewal=true" is not appended to the link to the form, then all questions on the form that have responses in the ONEcount database will be pre-populated, even if the Auto Populate box is not checked. If audited, use this feature carefully to be sure you are following audit bureau reporting rules on what fields can be pre-populated in a renewal (or any) form.

162

163

(% style="text-decoration: underline; color: rgb(0, 0, 0)" %)**Validations**(% style="color: rgb(0,0,0);" %)**:~*~***(%%)

164

(% style="color: rgb(0,0,0);" %)**Required **– Do you want this to be a required (not optional) question on the form. All required questions will be identified by a(% style="color: rgb(164,10,10);" %) ~*~** (% style="color: rgb(0,0,0);" %)on the form. If a user doesn't complete a required question, he/she will be prompted to do so.(%%)

165

(% style="color: rgb(0,0,0);" %)**Email **– Requires that the information entered on the form be in email format, i.e. c.lechien@dogmail.com. It does not validate whether the email is a real email or not, only that it is in the correct email format.(%%)

166

(% style="color: rgb(0,0,0);" %)**Number Only **– Only numbers can be entered, i.e. for a numbers-only code.(%%)

167

(% style="color: rgb(0,0,0);" %)**Text Only **– Only text can be entered, i.e. for a text-only code.(%%)

168

(% style="color: rgb(0,0,0);" %)**Number and Text** – Numbers and text can be entered.(%%)

169

(% style="color: rgb(0,0,0);" %)**Match Email** – For an email field, this will add a "Confirm Email" entry on the form.

170

171

(% style="color: rgb(0,0,0);" %)~*~* Note that for checkbox- and radio button-type questions, an extra option to set the number of columns for responses appears. For example, if you have a checkbox-type question with 9 possible responses, you can set those checkbox responses to appear within two columns rather than one long list. (See second screenshot below for a front-end view.)

172

173

(% style="color: rgb(0,0,0);" %)You can add multiple validations to a question, e.g. for an Email question you can set validations to required, email, and match email.(%%)

174

(% style="color: rgb(0,0,0);" %)To remove a validation, place the cursor to the right of the validation and press your "backspace" or "delete" key.

175

176

(% style="color: rgb(255,0,0);" %)**Options and validations will NOT universally change forms – these changes will be applied only to the form you are working on.**(%%)

177

178

(% style="color: rgb(0,0,0);" %)In the example below, the Email question has been set to Auto Populate with multiple validations (Email, Match Email, Required).

179

180

[[image:attach:media_1430939226453.png||align="center"]]

181

182

[[image:attach:media_1430773371034.png||align="center"]]

183

184

Checkbox-type question set for responses to appear in two columns.

185

186

=== Move and/or Remove Questions ===

187

188

[[image:attach:media_1430939299804.png||align="center"]]

189

190

To remove a question from a form, click the "x" icon above the question name. This will remove the question, but not the row.

191

To move a question to a different location on the form, click the checkered gray area at the left of the row, drag, and drop.

=== Delete a Row ===

[[image:attach:media_1430939444248.png||align="center"]]

196

197

To delete a row, click the trash can icon at the far right of the row.

198

**Note: You must remove the question(s) before deleting a row.** If you try to delete a row with a question(s), you'll get a pop-up message asking you to "Please remove questions to remove the row."

199

200

=== Once all questions have been placed on the form and options and validations set, click the red "Next" button to move on to Part 3 - Review and Save. ===

201

202

If you wish to go back to Part 1 - Information, click on the red "Back" button. Your work on Part 2 will not be lost, and you can return to it from Part 1 by clicking on "Next". Just be sure to go to Part 3 and save the form before exiting.

203

204

If you leave the form builder from Part 1 or Part 2 BEFORE SAVING IN PART 3:

205

206

* A new form – will not be saved;

207

* An existing form you've opened for editing – changes will not be saved.

208

209

=== CREATE FORM PART 3 - REVIEW AND SAVE ===

210

211

[[image:attach:media_1431545519730.png||align="center"]]

212

213

The Review and Save window provides a basic preview of the form and allows you to adjust question response field lengths.

214

To see a full preview of the form in your site's look and feel, click "Save" and

215

216

=== Below is an example of what a form might look like on your web site. ===

217

218

[[image:attach:media_1431550698440.png||align="center"]]

219

220

**1 ~-~-** Form Name

221

**2 ~-~-** Form Description

222

**3 ~-~-** Questions in custom layout

223

**4 ~-~-** Product Prompt Text

224

**5 ~-~-** Products attached to the form (notice products subscribed to are identified with "You are currenty receiving:" highlighted in green.

225

226

=== The screen shot below is an example of the customized acknowledgement email with receipt confirmation (shown in screen shot above) sent to a NEW subscriber/purchaser. ===

227

228

[[image:attach:media_1352398034919.png||align="center"]]

229

230

[[image:attach:media_1477585237131.png||align="center"]]

**Search all Documentation:**

**Search INVENTORY Documentation:**

**On this page:**