Changes for page Embedded Forms - How to Create an Embedded Form
Last modified by Admin on 2023/08/14 16:54
Summary
-
Page properties (4 modified, 0 added, 0 removed)
-
Attachments (0 modified, 28 added, 0 removed)
- Form Bottom.png
- Form Top.png
- Screen Shot 2016-12-07 at 5.43.26 PM.png
- Screen Shot 2021-09-23 at 4.20.31 PM (2).png
- Screen Shot 2021-09-24 at 3.05.47 PM 1(2).png
- media_1352398034919.png
- media_1430428383541.png
- media_1430428408807.png
- media_1430428555772.png
- media_1430513939421.png
- media_1430763892412.png
- media_1430764964000.png
- media_1430765149355.png
- media_1430765247198.png
- media_1430765839162.png
- media_1430766909283.png
- media_1430773371034.png
- media_1430938547197.png
- media_1430938787682.png
- media_1430938961950.png
- media_1430939101634.png
- media_1430939154859.png
- media_1430939226453.png
- media_1430939299804.png
- media_1430939444248.png
- media_1431545519730.png
- media_1431550698440.png
- media_1477585237131.png
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Title
-
... ... @@ -1,1 +1,1 @@ 1 -Forms - How to Create a Form 1 +Embedded Forms - How to Create an Embedded Form - Parent
-
... ... @@ -1,0 +1,1 @@ 1 +Create and Manage Your Inventory - Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. steven@one-count_com1 +XWiki.Admin - Content
-
... ... @@ -4,8 +4,10 @@ 4 4 5 5 6 6 {{id name="Start ScreenSteps Content"/}} 7 - and questions. Creatingaformis as simpleasdefiningbasicforminformation,setting thenumberof rowsandcolumnsintheform,dragging androppingquestionsintodefinedlayout,and settingoptionalvaidationsfor each question. Whenasercompletes andsubmitsaform,allofthe demographicand transactioninformation fromtheform is savedintheONEcountdatabase.7 +The Embedded Forms tool allows you to create, edit, delete, and manage forms that are embedded within a brand, or within an iframe on a web page that you host on your site. The Embedded Form Builder is NOT designed to be a full-featured, WYSIWYG form builder. For that functionality, please see the [[doc:Form Builder]]. 8 8 9 +Creating an embedded 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. 10 + 9 9 Please refer to the [[Quick Start Guide~~-~~- Questions and Forms>>doc:Quick Start Guide - Questions and Forms]] for information on basic concepts and rules relating to forms. 10 10 11 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. ... ... @@ -26,12 +26,12 @@ 26 26 Note that there are two methods you can use for a form to display in your brand's look and feel. 27 27 28 28 (% style="text-decoration: underline;" %)**Method 1**(%%) 29 - 31 +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 30 31 31 (% style="color: rgb(0,0,0);" %)You must include the following markers on the brand page you create in your CMS: 32 32 33 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 - 36 +(% 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 35 36 36 If you require a separate header/footer page for mobile, you must also create that page. 37 37 ... ... @@ -38,23 +38,23 @@ 38 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 39 40 40 (% style="text-decoration: underline;" %)**Method 2**(%%) 41 - 43 +Create a custom header and/or footer when creating a form. 42 42 43 43 === OPEN THE MANAGE FORMS WINDOW === 44 44 45 -**Select INVENTORYfrom the main menu.**47 +**Select SETUP from the main menu.** 46 46 47 -[[image:attach: media_1430428383541.png||align="center"]]49 +[[image:attach:Screen Shot 2021-09-23 at 4.20.31 PM (2).png||thumbnail="true" height="250"]] 48 48 49 - 51 +\\ 50 50 51 -**Select "Form s" from the sub-menu.**53 +**Select "Form Builder" from the sub-menu.** 52 52 53 -[[image:attach: media_1430428408807.png||align="center"]]55 +[[image:attach:Screen Shot 2021-09-24 at 3.05.47 PM 1(2).png||thumbnail="true" height="250"]] 54 54 55 55 This will open the Manage Forms window where you can select to create a new form. (See below.) 56 56 57 - 59 +\\ 58 58 59 59 **Click "Create Form"**. 60 60 ... ... @@ -98,7 +98,7 @@ 98 98 99 99 (11) **Email Confirmation (Yes/No) **is where you select whether a confirmation email will be sent upon subscription to/registration for any products listed on the form. 100 100 101 - 103 +\\ 102 102 103 103 (% style="text-align: center;" %) 104 104 **Front-End View Screenshots** ... ... @@ -105,7 +105,7 @@ 105 105 106 106 [[image:attach:Form Top.png||width="666" align="center"]] 107 107 108 - 110 +\\ 109 109 110 110 [[image:attach:Form Bottom.png||width="666" align="center"]] 111 111 \\ ... ... @@ -112,11 +112,11 @@ 112 112 113 113 [[image:attach:media_1430765149355.png||align="center"]] 114 114 115 - 117 +\\ 116 116 117 - 119 +\\ 118 118 119 - 121 +\\ 120 120 121 121 ==== Enter Acknowledgement Email Information. (See Items #7-10 below.) ==== 122 122 ... ... @@ -125,14 +125,14 @@ 125 125 (% style="color: rgb(255,0,0);" %)This is where you can create customized 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. 126 126 127 127 (7) Enter the subject of the email in "New Thank You Email Subject" field. 128 - 130 +(8) Enter the content of the email in "New Thank You Email" field. 129 129 Body markers that may be used in the text are as follows: 130 - 131 - 132 - 133 - 134 - 135 - 132 +%%USERNAME%% – will replace the body marker %%USERNAME%% with the subscriber's username. 133 +%%PASSWORD%% – will replace the body marker %%PASSWORD%% with the subscriber's password. 134 +%%ONECOUNTID%% – will relace the body marker %%ONECOUNTID%% with the subscribers account number/ONEcount ID. 135 +%%RECEIPTDISPLAY%% – will replace the body marker %%RECEIPTDISPLAY%% with a receipt for purchase amount, if any. 136 +(9) Enter the subject of the email in the "Updae Thank You Email Subject" field. 137 +(10) Enter the content of the email in the "Update Thank You Email" field. 136 136 137 137 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. 138 138 ... ... @@ -143,7 +143,7 @@ 143 143 [[image:attach:media_1430938547197.png||align="center"]] 144 144 145 145 (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. 146 - 148 +(2) Drag **Questions** into the **workspace (3).** You can quickly find questions by searching by name or question ID #. 147 147 (4) Set **Question Options** and validations for each question. 148 148 149 149 More detail on each of the above steps is provided below. ... ... @@ -162,16 +162,16 @@ 162 162 163 163 First Name, Last Name, Email, Address1, Address2, City, and State have been dragged and dropped into the form. 164 164 Once a question is placed in a form, it is removed from the list of questions. 165 - 166 - 167 +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. 168 +To return to the full list questions not yet placed on the form, delete "zip" from the search box. 167 167 168 168 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. 169 - 171 +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.** 170 170 171 171 [[image:attach:media_1430939101634.png||align="center"]] 172 172 173 173 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. 174 - 176 +To set options, simply click on the question and select options. 175 175 176 176 ==== Set Question Options ==== 177 177 ... ... @@ -178,24 +178,23 @@ 178 178 [[image:attach:media_1430939154859.png||align="center"]] 179 179 180 180 Available **Question Options** are: 181 - 183 +**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. 182 182 183 183 (% style="text-decoration: underline; color: rgb(0, 0, 0)" %)**Validations**(% style="color: rgb(0,0,0);" %)**:~*~***(%%) 184 - 185 - 186 +(% 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.(%%) 187 +(% 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. Validation looks to match following REGEX : /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i (%%) 186 186 (% style="color: rgb(0,0,0);" %)**Number Only **– Only numbers can be entered, i.e. for a numbers-only code.(%%) 187 - 188 - 189 - 189 +(% style="color: rgb(0,0,0);" %)**Text Only **– Only text can be entered, i.e. for a text-only code.(%%) 190 +(% style="color: rgb(0,0,0);" %)**Number and Text** – Numbers and text can be entered.(%%) 191 +(% style="color: rgb(0,0,0);" %)**Match Email** – For an email field, this will add a "Confirm Email" entry on the form. 190 190 191 191 (% 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.) 192 192 193 193 (% 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.(%%) 194 - 196 +(% 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. 195 195 196 196 (% 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.**(%%) 197 - 198 -(% 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). 199 +\\(% 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). 199 199 200 200 [[image:attach:media_1430939226453.png||align="center"]] 201 201 ... ... @@ -215,7 +215,7 @@ 215 215 [[image:attach:media_1430939444248.png||align="center"]] 216 216 217 217 To delete a row, click the trash can icon at the far right of the row. 218 - 219 +**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." 219 219 220 220 **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.** 221 221 ... ... @@ -231,9 +231,9 @@ 231 231 [[image:attach:media_1431545519730.png||align="center"]] 232 232 233 233 The Review and Save window provides a basic preview of the form and allows you to adjust question response field lengths. 234 - 235 +To see a full preview of the form in your site's look and feel, click "Save". 235 235 236 - 237 +\\ 237 237 238 238 (% style="text-align: center;" %) 239 239 **Example of what a form might look like on your web site.** ... ... @@ -241,10 +241,10 @@ 241 241 [[image:attach:media_1431550698440.png||align="center"]] 242 242 243 243 **1 ~-~-** Form Name 244 - 245 - 246 - 247 - 245 +**2 ~-~-** Form Description 246 +**3 ~-~-** Questions in custom layout 247 +**4 ~-~-** Product Prompt Text 248 +**5 ~-~-** Products attached to the form (notice products subscribed to are identified with "You are currenty receiving:" highlighted in green. 248 248 249 249 (% style="text-align: center;" %) 250 250 ==== Example of the customized acknowledgement email with receipt confirmation sent to a NEW subscriber/purchaser. ==== ... ... @@ -251,7 +251,7 @@ 251 251 252 252 [[image:attach:media_1352398034919.png||align="center"]] 253 253 254 - 255 +\\ 255 255 256 256 257 257 ... ... @@ -332,27 +332,27 @@ 332 332 {{/expand}} 333 333 {{/panel}} 334 334 335 - 336 +\\ 336 336 337 - 338 +\\ 338 338 339 339 ** 340 340 ** 341 341 342 - 343 +\\ 343 343 344 - 345 +\\ 345 345 346 - 347 +\\ 347 347 348 - 349 +\\ 349 349 350 350 ** 351 351 ** 352 352 353 - 354 +\\ 354 354 355 - 356 +\\ 356 356 {{/layout-cell}} 357 357 {{/layout-section}} 358 358 {{/layout}}
- Form Bottom.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +84.6 KB - Content
- Form Top.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +115.9 KB - Content
- Screen Shot 2016-12-07 at 5.43.26 PM.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +127.9 KB - Content
- Screen Shot 2021-09-23 at 4.20.31 PM (2).png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +41.5 KB - Content
- Screen Shot 2021-09-24 at 3.05.47 PM 1(2).png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +40.9 KB - Content
- media_1352398034919.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +99.1 KB - Content
- media_1430428383541.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +21.7 KB - Content
- media_1430428408807.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +19.4 KB - Content
- media_1430428555772.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +36.2 KB - Content
- media_1430513939421.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +44.3 KB - Content
- media_1430763892412.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +92.8 KB - Content
- media_1430764964000.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +54.3 KB - Content
- media_1430765149355.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +24.4 KB - Content
- media_1430765247198.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +29.0 KB - Content
- media_1430765839162.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +53.3 KB - Content
- media_1430766909283.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +85.2 KB - Content
- media_1430773371034.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +37.5 KB - Content
- media_1430938547197.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +49.4 KB - Content
- media_1430938787682.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +39.0 KB - Content
- media_1430938961950.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +30.5 KB - Content
- media_1430939101634.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +33.0 KB - Content
- media_1430939154859.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +17.8 KB - Content
- media_1430939226453.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +36.5 KB - Content
- media_1430939299804.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +5.3 KB - Content
- media_1430939444248.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +2.3 KB - Content
- media_1431545519730.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +65.3 KB - Content
- media_1431550698440.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +147.2 KB - Content
- media_1477585237131.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.XWikiGuest - Size
-
... ... @@ -1,0 +1,1 @@ 1 +252.0 KB - Content
- Confluence.Code.ConfluencePageClass[0]
-
- id
-
... ... @@ -1,1 +1,1 @@ 1 - 233317961 +66345 - url
-
... ... @@ -1,1 +1,1 @@ 1 -https://info.onecount.net//wiki/spaces/OD/pages/ 23331796/Forms - How to Create a Form1 +https://info.onecount.net//wiki/spaces/OD/pages/66345/Embedded Forms - How to Create an Embedded Form