{"id":4146,"date":"2017-06-09T06:53:40","date_gmt":"2017-06-09T01:23:40","guid":{"rendered":"\/?p=4146"},"modified":"2019-08-22T17:10:09","modified_gmt":"2019-08-22T11:40:09","slug":"aem-forms-what-you-need-to-know","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/","title":{"rendered":"AEM Forms &#8211; What you need to know"},"content":{"rendered":"<h4><strong>Overview<\/strong><\/h4>\n<p>AEM has provided AEM Forms tool in AEM 6 that simplify creation and management of complicated forms and form fragments. This tool ease the creation of interactive adaptive forms and authoring is similar to authoring components in pages. AEM forms uses \u201cLazy loading\u201d i.e. components are loaded only when they are required so forms will be loaded faster.<\/p>\n<p>It gives variety of features:<\/p>\n<ul>\n<li>Pre-filling of forms<\/li>\n<li>Theme development console<\/li>\n<li>Inbuilt complex submit actions like PDF generation of HTML form<\/li>\n<li>Rule editor<\/li>\n<li>E-sign<\/li>\n<li>File attachment<\/li>\n<li>Scribble signature<\/li>\n<li>Form fragment<\/li>\n<li>Emailing the form data to an applicant on successful submission<\/li>\n<li>You can easily write your custom submit action if needed.<\/li>\n<li>and much more.<\/li>\n<\/ul>\n<h5><strong>Steps to create an adaptive form:<\/strong><\/h5>\n<h5><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">i. Go to touch UI main console and select forms.<\/span><\/span>\u00a0<img decoding=\"async\" class=\"alignnone size-full wp-image-4151\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/project.png\" alt=\"\" width=\"1330\" height=\"605\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/project.png 1330w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/project-300x136.png 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/project-768x349.png 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/project-1024x466.png 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/project-1080x491.png 1080w\" sizes=\"(max-width: 1330px) 100vw, 1330px\" \/><\/h5>\n<p><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">ii. Select Forms and Documents<\/span><\/span><\/p>\n<p>iii. Now create a new adaptive form by clicking the create button on top right corner.\u00a0<img decoding=\"async\" class=\"alignnone size-full wp-image-4158\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/options.png\" alt=\"\" width=\"323\" height=\"384\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/options.png 323w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/options-252x300.png 252w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">iv. Now select a theme , you can use by default theme or you can make your own theme and use it. For the time being let\u2019s select tabbed enrollment.<\/span><\/span><\/p>\n<p>v. Now provide basic information about the form you want to make.<\/p>\n<p>vi. Now create and open it.<\/p>\n<p>vii. Your basic form will look like this , let\u2019s understand it\u2019s components.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-4157\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/form.png\" alt=\"\" width=\"1305\" height=\"578\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/form.png 1305w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/form-300x133.png 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/form-768x340.png 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/form-1024x454.png 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/form-1080x478.png 1080w\" sizes=\"(max-width: 1305px) 100vw, 1305px\" \/><\/p>\n<p>&nbsp;<\/p>\n<ol>\n<li>We can divide our form in sections\/tabs so that unrelated fields or the different sections of forms and be separated. We can add or remove these sections and we can rename these section by simply clicking on it and change its property in sidekick.<\/li>\n<li>These are the default fields we can change its field label , input type field , Placeholder, Regex in the property field in the sidekick.<\/li>\n<li>We can add more fields in the form by dragging those from parsys.<\/li>\n<li>We can configure logo of the form by simply clicking on the logo icon and edit it . we can select an image from DAM or we can upload it from our file system.we can also edit the logo title by simply clicking it and editing it.<\/li>\n<li>Form title can also be configured and if we want we can also exclude it to come in the final report which will be sent after submit.<\/li>\n<li>This is help content, we can provide this with each field, it is of 2 types short and long.We can provide this while providing properties to field below the patterns section.<\/li>\n<li>These are the basic buttons, we can modify their backend and frontend like any other form component.<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">viii. Now you can add any no. of fields in any section and make your AEM form.<\/span><\/p>\n<h5><strong>List of available form components<\/strong><\/h5>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-4153\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list1.png\" alt=\"\" width=\"283\" height=\"373\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list1.png 283w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list1-228x300.png 228w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/>\u00a0<img decoding=\"async\" class=\"alignnone wp-image-4154\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list2.png\" alt=\"\" width=\"275\" height=\"374\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list2.png 280w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list2-220x300.png 220w\" sizes=\"(max-width: 275px) 100vw, 275px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-4155\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list3.png\" alt=\"\" width=\"284\" height=\"374\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list3.png 284w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list3-228x300.png 228w\" sizes=\"(max-width: 284px) 100vw, 284px\" \/>\u00a0<img decoding=\"async\" class=\"alignnone size-full wp-image-4156\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/available-list4.png\" alt=\"\" width=\"289\" height=\"118\" \/><\/p>\n<h5><strong>Rule Editor<\/strong><\/h5>\n<p>There are so many situations when we want certain rules to be applied to forms in the fields like in the drop down if India is selected in one list then other list must show states of India and in case of USA states of USA\u2019s states must display, or when user enter pincode then name of city automatically comes in next field or you want to perform certain calculations.<\/p>\n<p>AEM Forms provide very easy console for these rules here one can set up rules without writing single word of code.<\/p>\n<ol>\n<li>To make or apply a rule select the section on which you want to apply the rule and select the rule editor symbol(hammer and plate).<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4159\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor.png\" alt=\"\" width=\"1239\" height=\"461\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor.png 1239w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor-300x112.png 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor-768x286.png 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor-1024x381.png 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor-1080x402.png 1080w\" sizes=\"(max-width: 1239px) 100vw, 1239px\" \/><\/li>\n<li>Select the section from sidekick in the left.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4161\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor1.png\" alt=\"\" width=\"1355\" height=\"551\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor1.png 1355w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor1-300x122.png 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor1-768x312.png 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor1-1024x416.png 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditor1-1080x439.png 1080w\" sizes=\"(max-width: 1355px) 100vw, 1355px\" \/><\/li>\n<li>Select create (plus + icon on top).<\/li>\n<li>Select the type of operation you want to perform viz. When, Show, Hide, Enable , Set value, validate etc.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4163\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorWhen.png\" alt=\"\" width=\"1335\" height=\"513\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorWhen.png 1335w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorWhen-300x115.png 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorWhen-768x295.png 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorWhen-1024x393.png 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorWhen-1080x415.png 1080w\" sizes=\"(max-width: 1335px) 100vw, 1335px\" \/><\/li>\n<li><span style=\"font-weight: 400;\">Set the desired operation eg.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4162\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorAdd.png\" alt=\"\" width=\"463\" height=\"419\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorAdd.png 463w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/ruleeditorAdd-300x271.png 300w\" sizes=\"(max-width: 463px) 100vw, 463px\" \/><br \/>\n<\/span><\/li>\n<\/ol>\n<h5><strong>Form Fragment<\/strong><\/h5>\n<p>A form designer is used to create common segments which will be used generic for all the forms like name and address, family details, income details, and so on. These reusable, generic and standalone segments are called adaptive form fragments and are widely used to design forms in AEM.<\/p>\n<h5><strong>How to create form fragment<\/strong><\/h5>\n<ol>\n<li>Select create adaptive form fragment from form console<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4165\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/adaptiveForm1.png\" alt=\"\" width=\"295\" height=\"364\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/adaptiveForm1.png 295w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/adaptiveForm1-243x300.png 243w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/li>\n<li>Fill the basic details like name and description.<\/li>\n<li>Open it.<\/li>\n<li>A blank page with a parsys will appear now drop the required components and make your form fragment.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4166\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/adaptiveForm2.png\" alt=\"\" width=\"317\" height=\"441\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/adaptiveForm2.png 317w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/adaptiveForm2-216x300.png 216w\" sizes=\"(max-width: 317px) 100vw, 317px\" \/><\/li>\n<li>All of your progress will be auto saved so just perform your task and go back.<\/li>\n<\/ol>\n<h5><strong>Using the emulator:<\/strong><\/h5>\n<p><span style=\"font-weight: 400;\">While making the forms we can see how it will look in different breakpoints(i.e. Screen sizes)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This feature is available at top of the form.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4167\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator.png\" alt=\"\" width=\"1328\" height=\"571\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator.png 1328w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator-300x129.png 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator-768x330.png 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator-1024x440.png 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator-1080x464.png 1080w\" sizes=\"(max-width: 1328px) 100vw, 1328px\" \/><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We can select device and \u00a0change its \u00a0orientation very easily with few mouse click.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4168\" src=\"http:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator1.png\" alt=\"\" width=\"1329\" height=\"566\" srcset=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator1.png 1329w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator1-300x128.png 300w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator1-768x327.png 768w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator1-1024x436.png 1024w, https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/emulator1-1080x460.png 1080w\" sizes=\"(max-width: 1329px) 100vw, 1329px\" \/><br \/>\n<\/span><\/p>\n<ol>\n<li>This shows list of various android and ios phones and tablets.<\/li>\n<li>This button changes orientation of device.<\/li>\n<\/ol>\n<p>Other than reference themes and fragments there are many ways Adobe Experience Manager Forms makes form creation and usage easy, quick. Consistent throughout multiple channels.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview AEM has provided AEM Forms tool in AEM 6 that simplify creation and management of complicated forms and form fragments. This tool ease the creation of interactive adaptive forms and authoring is similar to authoring components in pages. AEM forms uses \u201cLazy loading\u201d i.e. components are loaded only when they are required so forms &#8230; <a title=\"AEM Forms &#8211; What you need to know\" class=\"read-more\" href=\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/\">Read more<\/a><\/p>\n","protected":false},"author":9,"featured_media":6654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","content-type":"","footnotes":""},"categories":[66],"tags":[73,74,75,76],"yst_prominent_words":[2387,1115,534,1117,865,903,1831,2390,1114,2382,1116,2389,2386,2388,2380,2374,2384,2383,2381,2385],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v14.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AEM Forms - What you need to know<\/title>\n<meta name=\"description\" content=\"Adobe has developed AEM Forms tool in 6.x that not only makes the development of complex form very easy but also simplifies their management.\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AEM Forms - What you need to know\" \/>\n<meta property=\"og:description\" content=\"Adobe has developed AEM Forms tool in 6.x that not only makes the development of complex form very easy but also simplifies their management.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Argil DX\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-09T01:23:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-22T11:40:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/AEM-Forms-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.argildx.us\/#website\",\"url\":\"https:\/\/www.argildx.us\/\",\"name\":\"Argil DX\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.argildx.us\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.argildx.us\/wp-content\/uploads\/2017\/06\/AEM-Forms-1.jpg\",\"width\":1440,\"height\":542,\"caption\":\"AEM Forms\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/#webpage\",\"url\":\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/\",\"name\":\"AEM Forms - What you need to know\",\"isPartOf\":{\"@id\":\"https:\/\/www.argildx.us\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/#primaryimage\"},\"datePublished\":\"2017-06-09T01:23:40+00:00\",\"dateModified\":\"2019-08-22T11:40:09+00:00\",\"author\":{\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/7583783869e92b1d4ccd40dbb2aef076\"},\"description\":\"Adobe has developed AEM Forms tool in 6.x that not only makes the development of complex form very easy but also simplifies their management.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.argildx.us\/technology\/aem-forms-what-you-need-to-know\/\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/7583783869e92b1d4ccd40dbb2aef076\",\"name\":\"Arpit Rathi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/20e56987516b8528ddbcb4f9fa8aabe6?s=96&d=mm&r=g\",\"caption\":\"Arpit Rathi\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/4146"}],"collection":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/comments?post=4146"}],"version-history":[{"count":0,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/4146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media\/6654"}],"wp:attachment":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media?parent=4146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/categories?post=4146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/tags?post=4146"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/yst_prominent_words?post=4146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}