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.
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.
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.
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:
Short Text – Short Text Field for collecting Names, and short addresses
Long Text – Used for collecting information like Full Address, Feedback, Comments, etc.
Phone – Used for collecting phone numbers with a field for selecting country codes
Date – Used for collecting input as date using a date picker
Number – Used for collecting input as a negative or positive integer
Email – Used for collecting email addresses
Radio – Used for collecting any one of a predefined set of mutually exclusive options. For Example Gender.
Checkbox – Used for a choice between one of two or more possible mutually exclusive options. For Example Skills, Age, etc.
DropDown – Used for displaying a drop-down list of options pre-defined by you.
Country DropDown – Used for displaying a drop-down list of countries in the world
So, the list of available configuration options will differ and depend upon what field type you’ve chosen.
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’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.
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’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.
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’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.
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’s value against on form submission), and Is Optional? For making the field be filled compulsorily by the user.
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’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 & Max numbers the user can enter.
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.
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.
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.
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.
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.
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
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 Email for building your own mailing list or send the emails to the Mailchimp mailing service for marketing purposes.
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 After Success, After Failure, and If the user is already in the mailing list.
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 After Success, After Failure, and If the user is already in the mailing list.
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, ISD Code, and Icon Control the Typography for fields like Label Text and Input Text. Style the Form Button with Button Text, Size, Shape, Alignment and add Normal & Background Color for Button background and Text.
You can also modify the working and behavior of the tabs with advanced options like Spacing, Border, Box Shadow, Animation, CSS Identifiers, and its Visibility.