{"id":576,"date":"2021-10-08T11:24:29","date_gmt":"2021-10-08T11:24:29","guid":{"rendered":"https:\/\/spyrowptheme.com\/documentation\/?page_id=576"},"modified":"2021-10-08T11:25:17","modified_gmt":"2021-10-08T11:25:17","slug":"spyro-form","status":"publish","type":"page","link":"https:\/\/spyrowptheme.com\/documentation\/spyro-form\/","title":{"rendered":"Spyro Form"},"content":{"rendered":"<div  class=\"tatsu-HkZEMOi64Y tatsu-section  tatsu-bg-overlay   tatsu-clearfix\" data-title=\"\"  data-headerscheme=\"background--dark\"><div class='tatsu-section-pad clearfix' data-padding='{\"d\":\"90px 0px 90px 0px\"}' data-padding-top='90px'><div class=\"tatsu-row-wrap  tatsu-wrap tatsu-row-has-two-cols tatsu-medium-gutter tatsu-reg-cols  tatsu-clearfix tatsu-SJlNfOs6NK\" ><div  class=\"tatsu-row \" ><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-one-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-HJIf_i6NY\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-sidebar tatsu-ByhGOjpVt   \"  ><div class=\"widget_nav_menu widget\"><h6>Related Articles<\/h6><div class=\"menu-others-container\"><ul id=\"menu-others\" class=\"menu\"><li id=\"menu-item-594\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-594\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/404-error-after-demo-import\/\" title=\"404 Error after Demo Import\">404 Error after Demo Import<\/a><\/li>\n<li id=\"menu-item-538\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-538\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-performance\/\" title=\"Site Performance\">Site Performance<\/a><\/li>\n<li id=\"menu-item-536\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-536\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/multi-language-support\/\" title=\"Multi Language Support\">Multi Language Support<\/a><\/li>\n<li id=\"menu-item-537\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-537\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/site-translation\/\" title=\"Site Translation\">Site Translation<\/a><\/li>\n<li id=\"menu-item-540\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-540\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/set-up-single-page-site\/\" title=\"Set up Single Page Site\">Set up Single Page Site<\/a><\/li>\n<li id=\"menu-item-534\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-534\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-theme\/\" title=\"Update Theme\">Update Theme<\/a><\/li>\n<li id=\"menu-item-535\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-535\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/update-plugins\/\" title=\"Update Plugins\">Update Plugins<\/a><\/li>\n<li id=\"menu-item-550\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-550\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/change-log\/\" title=\"Change Log\">Change Log<\/a><\/li>\n<li id=\"menu-item-542\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-542\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/typehub\/\" title=\"Typehub\">Typehub<\/a><\/li>\n<li id=\"menu-item-541\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-541\"><a href=\"https:\/\/spyrowptheme.com\/documentation\/list-of-articles-others\/colorhub\/\" title=\"Colorhub\">Colorhub<\/a><\/li>\n<\/ul><\/div><\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-HJIf_i6NY.tatsu-column{width: 25%;}.tatsu-HJIf_i6NY.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-HJIf_i6NY > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-HJIf_i6NY > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-HJIf_i6NY > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-HJIf_i6NY > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-HJIf_i6NY.tatsu-column{width: 25%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-HJIf_i6NY.tatsu-column{width: 25%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-HJIf_i6NY.tatsu-column{width: 100%;}}<\/style><\/div><div  class=\"tatsu-column  tatsu-bg-overlay tatsu-three-fourth tatsu-column-image-none tatsu-column-effect-none  tatsu-SkgLGOi6VF\"  data-parallax-speed=\"0\" style=\"\"><div class=\"tatsu-column-inner \" ><div class=\"tatsu-column-pad-wrap\"><div class=\"tatsu-column-pad\" ><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HJ57OjpVF   \" ><style>.tatsu-HJ57OjpVF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HJ57OjpVF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p><a href=\"spyro-modules\/\" target=\"_blank\" rel=\"noopener\"><span class=\"tatsu-inline-link-style2\">CATEGORY &gt; SPYRO MODULES<\/span><\/a><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJPSOjaNY   \" ><style>.tatsu-SJPSOjaNY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJPSOjaNY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Spyro Form<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJTIdiaEK   \" ><style>.tatsu-SJTIdiaEK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJTIdiaEK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using Form you can create amazing Contact Forms that are completely customizable letting you control every aspect of the layout, structure, and spacing. Collect any data with 10+ different fields with complete control over form style. <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">The form is also a multilevel module consisting of multiple fields of the same type where each field is an Individual Sub Module, which will have the controls necessary for setting the service, while the parent module will have settings that affect the entire service or all individual service such as Email ID collection for Mailing Lists or Integration with MailChimp Service, Styling things like form type, colors, typography, and the button.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">To add the Spyro Form Module to your page first, edit the page using Tatsu and add a section with a column\/row and then add the Spyro Form module in it.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJWO_saEt   \" ><style>.tatsu-SJWO_saEt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJWO_saEt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Form Fields<\/h4>\n<\/div><\/div><div  class=\"tatsu-single-image tatsu-module tatsu-image-lazyload tatsu-S1C__oTEY  \" ><div class=\"tatsu-single-image-inner \" style=\"width : 1740px;\" ><div class = \"tatsu-single-image-padding-wrap\" style = \"padding-bottom : 36.551724137931%;\" ><\/div><a class = \"mfp-image\" href = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Form-Form-Fields.png\" ><img class = \"tatsu-gradient-border\" alt = \"Spyro Form - Form Fields\" title = \"Spyro Form &#8211; Form Fields\" data-src = \"https:\/\/spyrowptheme.com\/documentation\/wp-content\/uploads\/sites\/24\/2021\/10\/Spyro-Form-Form-Fields.png\" src =\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\"  \/><\/a><\/div><style>.tatsu-S1C__oTEY .tatsu-single-image-inner{border-style: solid;max-width: 100%;}.tatsu-S1C__oTEY.tatsu-single-image{transform: translate3d(0px,0px, 0);}<\/style><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByTo_iTVt   \" ><style>.tatsu-ByTo_iTVt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByTo_iTVt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\"><span class=\"palette-3\" style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">With Spyro Form, you can have as many form fields as you like. You can customize\/ add content and style to each field. There are a total of 10 Field types such as:&nbsp;<\/span><\/p>\n<ul style=\"margin-top: 0;margin-bottom: 0\">\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Short Text<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Short Text Field for collecting Names, and short addresses<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Long Text<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for collecting information like Full Address, Feedback, Comments, etc.<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Phone<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for collecting phone numbers with a field for selecting country codes<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Date<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for collecting input as date using a date picker<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Number<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for collecting input as a negative or positive integer<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Email <\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">&#8211; Used for collecting email addresses<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Radio<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for collecting any one of a predefined set of mutually exclusive options. For Example Gender.<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Checkbox<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for a choice between one of two or more possible mutually exclusive options. For Example Skills, Age, etc.<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">DropDown<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for displaying a drop-down list of options pre-defined by you.<\/span><\/span><\/p>\n<\/li>\n<li style=\"list-style-type: disc;font-size: 11pt;font-family: Arial;color: #000000;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">\n<p dir=\"ltr\" style=\"line-height: 1.38;margin-top: 0pt;margin-bottom: 0pt\" role=\"presentation\"><span class=\"palette-3\"><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: bold;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">Country DropDown<\/span><span style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\"> &#8211; Used for displaying a drop-down list of countries in the world<\/span><\/span><\/p>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p class=\"MsoNormal\"><span id=\"docs-internal-guid-87333b93-7fff-4ca1-f913-df4943006eb6\" class=\"palette-3\">&nbsp;<\/span><span class=\"palette-3\" style=\"font-size: 11pt;font-family: Arial;background-color: transparent;font-weight: 400;font-style: normal;font-variant: normal;text-decoration: none;vertical-align: baseline\">So, the list of available configuration options will differ and depend upon what field type you&rsquo;ve chosen.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BJmlFi6Vt   \" ><style>.tatsu-BJmlFi6Vt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BJmlFi6Vt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Short Text<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HJfWFipVF   \" ><style>.tatsu-HJfWFipVF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HJfWFipVF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Short Text will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Placeholder Text, Pattern (for validating input element&#8217;s value against on form submission), Is Optional? For making the field be filled compulsorily by the user and a relevant icon for the field.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-S13MYop4Y   \" ><style>.tatsu-S13MYop4Y .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-S13MYop4Y .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Long Text<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByrmtiaVt   \" ><style>.tatsu-ByrmtiaVt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByrmtiaVt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Long Text will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Placeholder Text, Pattern (for validating input element&#8217;s value against on form submission), Is Optional? For making the field be filled compulsorily by the user and a relevant icon for the field.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ryyNKiT4K   \" ><style>.tatsu-ryyNKiT4K .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ryyNKiT4K .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Phone<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1o4KopNF   \" ><style>.tatsu-H1o4KopNF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1o4KopNF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Phone will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Placeholder Text, Pattern (for validating input element&#8217;s value against on form submission), Is Optional? For making the field be filled compulsorily by the user, a relevant icon for the field and Use Country Code? Option to enable county code drop down in the blank field.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ryFSFsaNt   \" ><style>.tatsu-ryFSFsaNt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ryFSFsaNt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Date<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-S1HLKop4F   \" ><style>.tatsu-S1HLKop4F .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-S1HLKop4F .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Date will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Placeholder Text, Pattern (for validating input element&#8217;s value against on form submission), and Is Optional? For making the field be filled compulsorily by the user.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-H1JPtoa4t   \" ><style>.tatsu-H1JPtoa4t .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-H1JPtoa4t .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Number<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkqPKia4F   \" ><style>.tatsu-BkqPKia4F .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkqPKia4F .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Number will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Placeholder Text, Pattern (for validating input element&#8217;s value against on form submission), Is Optional? For making the field be filled compulsorily by the user, a relevant icon for the field and Min &amp; Max numbers the user can enter.\u00a0<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BJHuYop4K   \" ><style>.tatsu-BJHuYop4K .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BJHuYop4K .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Email<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rygKYsTEY   \" ><style>.tatsu-rygKYsTEY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rygKYsTEY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Email will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Placeholder Text, Is Optional? For making the field be filled compulsorily by the user and a relevant icon for the field.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Hk8YKjT4Y   \" ><style>.tatsu-Hk8YKjT4Y .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Hk8YKjT4Y .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Radio<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-HyJcKopNK   \" ><style>.tatsu-HyJcKopNK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-HyJcKopNK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Radio will have options like Label of the field, Name of the field, Radio Style i.e. Normal or Button Set, Mailchimp Map Filed (if you are building mailing lists), Options for listing the various radio options, Is Optional? For making the field be filled compulsorily by the user.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-B1_5FsT4t   \" ><style>.tatsu-B1_5FsT4t .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-B1_5FsT4t .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Checkbox<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-B1-oYipEt   \" ><style>.tatsu-B1-oYipEt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-B1-oYipEt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Checkbox will have options like Label of the field, Name of the field, Checkbox Style i.e. Normal or Button Set, Mailchimp Map Filed (if you are building mailing lists), Options for listing the various checkbox options, Is Optional? For making the field be filled compulsorily by the user.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SyYjKop4K   \" ><style>.tatsu-SyYjKop4K .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SyYjKop4K .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>DropDown<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-rJ3hKsTNY   \" ><style>.tatsu-rJ3hKsTNY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-rJ3hKsTNY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Dropdown will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Options for listing the various dropdown options, Is Optional? For making the field be filled compulsorily by the user.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-S1zpYjTEF   \" ><style>.tatsu-S1zpYjTEF .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-S1zpYjTEF .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h4>Country DropDown<\/h4>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r110YjTEt   \" ><style>.tatsu-r110YjTEt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-r110YjTEt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Field Type Country Dropdown will have options like Label of the field, Name of the field, Mailchimp Map Filed (if you are building mailing lists), Exclude Country for excluding the listed country from the dropdown, Is Optional? For making the field be filled compulsorily by the user.<\/span><\/p>\n<p><span lang=\"EN-GB\" style=\"font-size: 11.0pt;line-height: 115%;font-family: 'Segoe UI',sans-serif\">Also, every individual field can be styled using Width, Space On the Right, and Space On the Bottom for Desktop, Laptop, Tablet, and Mobile Devices<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r1Vl9j6EY   \" ><style>.tatsu-r1Vl9j6EY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-r1Vl9j6EY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Form Content<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-r1gWco6NK   \" ><style>.tatsu-r1gWco6NK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-r1gWco6NK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">In the Content Tab, you can configure what happens with the collected user data. With the Action After Submit option, You can either use the collected <strong>Email<\/strong> for building your own mailing list or send the emails to the <strong>Mailchimp <\/strong>mailing service for marketing purposes.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">If you opt for collecting Email, then you will further have to set the Prefered Email Address and choose between Admin Email or another receiver email and you can set what message to show&nbsp; After Success, After Failure, and If the user is already in the mailing list.<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Or, if you opt for the MailChimp mailing service then you need to specify the Receiver Email, MailChimp API Key, MailChimp List ID, and enable a user to double Optin and you can set what message to show&nbsp; After Success, After Failure, and If the user is already in the mailing list.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-SJXfcopNY   \" ><style>.tatsu-SJXfcopNY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-SJXfcopNY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Form Styling<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-ByxQcs6Vt   \" ><style>.tatsu-ByxQcs6Vt .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-ByxQcs6Vt .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Using the Style tab you can style the form and choose the Form Type, Set colors to various components like Accent, Label Text, Placeholder, Input Text, Active Input Text, Field background, Field Border Focus, Input Icon, Input Border,\u00a0 ISD Code, and Icon <\/span><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">Control the Typography for fields like Label Text and Input Text. Style the Form Button with Button Text, Size, Shape, Alignment and add Normal &amp; Background Color for Button background and Text.<\/span><\/p>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-BkASqi6EK   \" ><style>.tatsu-BkASqi6EK .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-BkASqi6EK .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<h3>Form Advanced Options<\/h3>\n<\/div><\/div><div  class=\"tatsu-module tatsu-inline-text clearfix tatsu-Hk5L9i6NY   \" ><style>.tatsu-Hk5L9i6NY .tatsu-inline-text-inner{width: 100%;text-align: left;}@media only screen and (max-width: 767px) {.tatsu-Hk5L9i6NY .tatsu-inline-text-inner{width: 100%;}}<\/style><div class=\"tatsu-inline-text-inner tatsu-align-center\">\n<p class=\"MsoNormal\"><span lang=\"EN-GB\" style=\"font-family: 'Segoe UI',sans-serif\">You can also modify the working and behavior of the tabs with advanced options like <strong>Spacing<\/strong>, <strong>Border<\/strong>, <strong>Box Shadow<\/strong>, <strong>Animation<\/strong>, <strong>CSS Identifiers<\/strong>, and its <strong>Visibility<\/strong>.\u00a0<\/span><\/p>\n<\/div><\/div><\/div><\/div><div class = \"tatsu-column-bg-image-wrap\"><div class = \"tatsu-column-bg-image\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-column-overlay tatsu-animate-none\" ><\/div><\/div><style>.tatsu-row > .tatsu-SkgLGOi6VF.tatsu-column{width: 75%;}.tatsu-SkgLGOi6VF.tatsu-column > .tatsu-column-inner > .tatsu-column-overlay{mix-blend-mode: normal;}.tatsu-SkgLGOi6VF > .tatsu-column-inner > .tatsu-top-divider{z-index: 9999;}.tatsu-SkgLGOi6VF > .tatsu-column-inner > .tatsu-bottom-divider{z-index: 9999;}.tatsu-SkgLGOi6VF > .tatsu-column-inner > .tatsu-left-divider{z-index: 9999;}.tatsu-SkgLGOi6VF > .tatsu-column-inner > .tatsu-right-divider{z-index: 9999;}@media only screen and (max-width:1377px) {.tatsu-row > .tatsu-SkgLGOi6VF.tatsu-column{width: 75%;}}@media only screen and (min-width:768px) and (max-width: 1024px) {.tatsu-row > .tatsu-SkgLGOi6VF.tatsu-column{width: 75%;}}@media only screen and (max-width: 767px) {.tatsu-row > .tatsu-SkgLGOi6VF.tatsu-column{width: 100%;}}<\/style><\/div><\/div><\/div><\/div><div class=\"tatsu-section-background-wrap\"><div class = \"tatsu-section-background\" ><\/div><\/div><div class=\"tatsu-overlay tatsu-section-overlay\"><\/div><style>.tatsu-HkZEMOi64Y .tatsu-section-pad{padding: 90px 0px 90px 0px;}.tatsu-HkZEMOi64Y .tatsu-section-offset-wrap{transform: translateY(-0px);}.tatsu-HkZEMOi64Y > .tatsu-bottom-divider{z-index: 9999;}.tatsu-HkZEMOi64Y > .tatsu-top-divider{z-index: 9999;}.tatsu-HkZEMOi64Y .tatsu-section-overlay{mix-blend-mode: normal;}<\/style><\/div>\n","protected":false},"excerpt":{"rendered":"<div><a href=\"https:\/\/spyrowptheme.com\/documentation\/spyro-form\/\" class=\"exp-read-more exp-read-more-underlined\">Read More<\/a><\/div>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-576","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=576"}],"version-history":[{"count":0,"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/pages\/576\/revisions"}],"wp:attachment":[{"href":"https:\/\/spyrowptheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}