{"id":1200,"date":"2022-02-24T07:36:54","date_gmt":"2022-02-24T07:36:54","guid":{"rendered":"https:\/\/doc.dnngo.com\/powerforms\/?page_id=1200"},"modified":"2022-02-25T07:13:03","modified_gmt":"2022-02-25T07:13:03","slug":"effect-list","status":"publish","type":"page","link":"https:\/\/doc.dnngo.com\/powerforms\/effect-list\/","title":{"rendered":"Effect List"},"content":{"rendered":"

[vc_row el_id=”Addnew”][vc_column]

<\/span>

Effect List<\/h3><\/span><\/div>[vc_separator css=”.vc_custom_1645690764970{margin-bottom: 30px !important;}”][vc_column_text]The module contains 7 effects in all, and every effect is different, you can use it according to your needs.<\/p>\n

[\/vc_column_text][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row el_id=”Effect_01_Responsive”][vc_column][vc_empty_space height=”40px”]

<\/span>
Effect_01_Responsive<\/h5><\/span><\/div>[vc_column_text]We provide 3 different form appearances for you to choose from. line, border, background<\/p>\n

[\/vc_column_text][vc_column_text customcss=”mb-10″]line:<\/strong>[\/vc_column_text][vc_single_image image=”1329″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]border:<\/strong>[\/vc_column_text][vc_single_image image=”1331″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]background:<\/strong>[\/vc_column_text][vc_single_image image=”1332″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Forms Style – Set the form style.
\nForms Size – Set the form size.
\nForms Color – Set the form color.
\nForms Align – Set the alignment of the fields.
\nDisplay controls in one row – Set whether to display the fields and button in the same row.[\/vc_column_text][vc_single_image image=”1362″ img_size=”full” style=”vc_box_shadow”][\/vc_column][\/vc_row][vc_row el_id=”Effect_02_Basic_Group”][vc_column][vc_empty_space height=”40px”]

<\/span>
Effect_02_Basic_Group<\/h5><\/span><\/div>[vc_column_text customcss=”mb-10″]You can use this effect to display some fields in groups.[\/vc_column_text][vc_single_image image=”1341″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]You need to add some groups in Groups.[\/vc_column_text][vc_single_image image=”1342″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Finally, the form will display in this way:[\/vc_column_text][vc_single_image image=”1344″ img_size=”full” style=”vc_box_shadow”][\/vc_column][\/vc_row][vc_row el_id=”Effect_03_Collapsible_Group”][vc_column][vc_empty_space height=”40px”]
<\/span>
Effect_03_Collapsible_Group<\/h5><\/span><\/div>[vc_column_text customcss=”mb-10″]You can use this effect to expand or contract the field in one group, see below:[\/vc_column_text][vc_single_image image=”1347″ img_size=”full” style=”vc_box_shadow”][\/vc_column][\/vc_row][vc_row el_id=”Effect_04_FancyBox”][vc_column][vc_empty_space height=”40px”]
<\/span>
Effect_04_FancyBox<\/h5><\/span><\/div>[vc_column_text customcss=”mb-10″]You can use this effect to display the form fields as Lightbox.<\/p>\n

Also you can set the animation in Lightbox through Form Options interface.[\/vc_column_text][vc_single_image image=”1349″ img_size=”full” style=”vc_box_shadow”][\/vc_column][\/vc_row][vc_row el_id=”Effect_05_HoverFancyBox”][vc_column][vc_empty_space height=”40px”]

<\/span>
Effect_05_HoverFancyBox<\/h5><\/span><\/div>[vc_column_text customcss=”mb-10″]There will be a Contact Us button on the left side of the screen, the form will display as Lightbox on clicking this button.<\/p>\n

Also you can set the animation in Lightbox though Form Options interface.[\/vc_column_text][vc_single_image image=”1351″ img_size=”full” style=”vc_box_shadow”][\/vc_column][\/vc_row][vc_row el_id=”Effect_06_Responsive2″][vc_column][vc_empty_space height=”40px”]

<\/span>
Effect_06_Responsive2<\/h5><\/span><\/div>[vc_column_text customcss=”mb-10″]Below is the screen shot for effect:[\/vc_column_text][vc_single_image image=”1353″ img_size=”full” style=”vc_box_shadow”][\/vc_column][\/vc_row][vc_row el_id=”Effect_07_Multi_Step_Form”][vc_column][vc_empty_space height=”40px”]
<\/span>
Effect_07_Multi_Step_Form<\/h5><\/span><\/div>[vc_column_text customcss=”mb-10″]Below is the screen shot for effect:[\/vc_column_text][vc_single_image image=”1354″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Each group represents one step.[\/vc_column_text][vc_single_image image=”1356″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Group Name – Set the title of description area.[\/vc_column_text][vc_single_image image=”1357″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Description – Set the content of description.[\/vc_column_text][vc_single_image image=”1358″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Anchor Title – Set the titles of steps.[\/vc_column_text][vc_single_image image=”1359″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Last, you need to select groups for the fields.[\/vc_column_text][vc_single_image image=”1360″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row el_id=”Effect_08_ExternalFancyBox”][vc_column][vc_empty_space height=”40px”]
<\/span>
Effect_08_ExternalFancyBox<\/h5><\/span><\/div>[vc_column_text customcss=”mb-10″]You can insert external links to other modules, after clicking this link, the form will show up as lightbox. You can click this address to see the demo. http:\/\/www.dnngo.net\/OurModules\/PowerForms\/ExternalFancyBox.aspx<\/p>\n

Find HTML for external links in Form Options.<\/p>\n

Setup steps as follows:<\/p>\n

Step 1. Find HTML for external links in Effect Options.[\/vc_column_text][vc_single_image image=”1353″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]Step 2. Insert this HTML to any module.[\/vc_column_text][vc_single_image image=”1363″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text]The link can be image or text.<\/p>\n

data-text – text for the link.<\/p>\n

data-image -URL address for the image link.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

[vc_row el_id=”Addnew”][vc_column][vc_separator css=”.vc_custom_1645690764970{margin-bottom: 30px !important;}”][vc_column_text]The module contains 7 effects in all, and every effect is different, you can use it according to your needs. [\/vc_column_text][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row el_id=”Effect_01_Responsive”][vc_column][vc_empty_space height=”40px”][vc_column_text]We provide 3 different form appearances for you to choose from. line, border, background [\/vc_column_text][vc_column_text customcss=”mb-10″]line:[\/vc_column_text][vc_single_image image=”1329″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]border:[\/vc_column_text][vc_single_image image=”1331″ img_size=”full” style=”vc_box_shadow”][vc_empty_space height=”20px”][vc_column_text customcss=”mb-10″]background:[\/vc_column_text][vc_single_image image=”1332″ img_size=”full” […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/pages\/1200"}],"collection":[{"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/comments?post=1200"}],"version-history":[{"count":6,"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/pages\/1200\/revisions"}],"predecessor-version":[{"id":1382,"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/pages\/1200\/revisions\/1382"}],"wp:attachment":[{"href":"https:\/\/doc.dnngo.com\/powerforms\/wp-json\/wp\/v2\/media?parent=1200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}