Widget - FormsDB
Forms allow you to capture information submitted by users by using a number of elements and then sending it by email or storing it in a database for later manipulation or export.Forms allow you to capture information submitted by users by using a number of elements and then sending it by email or storing it in a database for later manipulation or export.
View a quick video tutorial on how to create a basic form that captures some basic information for an example newsletter, emails it on submission and saves to the database.
Video Tutorial
Help Documentation
The Zamic form widget is created by clicking the Form button on the widgets toolbar. You can then drag the form into the desired position on your page. You can then click the edit widget button to start creating your form.
Design Tab
The design tab allows you to create the elements on your form to capture the required information from the end user.
To add to the form, drag the required element from the right hand side to the desired position on the form. You can change the order of the elements at any stage by dragging them up and down the form canvas. To delete an element, click the X icon on the top right hand side of the element.
Once the element is on the form canvas, you can then edit the properties by clicking the pencil icon at the top right hand side of the element. You have the ability to change things like whether the user is required to complete the element, change the label, add some help text, change the name of the element or adding element options. More information on each of the elements is further down this page.
Once you have completed your form, click the Save button or if you wish to start from scratch, click the Clear button.
Data Tab
The data tab is where the platform saves the submitted form data if enabled in the settings. From here you can search for records that have been submitted, refresh, export and clear the captured data.
Refresh
The refresh button will refresh the the data in the table.
Export Data
The export button will export all of the data to you by email. When clicking the export button, an export job will be queued and once run, the export will be emailed. Make sure that your email is capable to receiving large attachments.
Clear Data
The clear data button will remove all of the data in the database.
Search
When you enter text into the search field, Zamic will search for all records containing that search string inside your dataset and display the results as you type.
Number of records to display
You can select the number of records to be displayed in the data grid by clicking this dropdown.
Columns to display
When clicking this drop down, you can select what items to show inside the data grid.
Settings Tab
The settings tab allows you to configure how the widget handles submitted user data. From here you can control how the email looks and email addresses it is sent to, whether the data is saved to the database or just emailed out, the ability to add additional system fields like username and row IDs.
If you are saving the captured data to the database, you can schedule when and how to export this data and where to email it to. Once you have made the required changes, click the Save Settings button.
Form Email Notification
The Form Email Notification sub panel controls how the submitted form is emailed and whether to show the end user a dropdown list of names/text allowing the submitted form to be sent to different email addresses.
Email Subject
The default email subject for when a form is emailed is 'Zamic.com - New Form Submission', enter something else into this box if you would like a different subject.
Use Template
Checking the Use Template box will enable the template tab inside the form widget. Using a template allows the submitted form email to be customized and formatted to your requirements rather than using the default table format. More information on this below.
Email To
The Email To box allows you to change the address of where the submitted form email is to sent. If the checkbox is unticked, no email is sent.
Selectable Send
The selectable send places a drop down menu at the bottom of the form allowing the user to choose an option, the resulting option will change the destination of where the form is emailed to. The Name option is what is displayed in the drop down menu, the email is not displayed to the end user but is the destination of where the submitted form is emailed to. If the checkbox is unticked, no selectable dropdown menu is displayed to the end user.
Form Data
The Form Data sub panel controls how the submitted form data is stored on the Zamic platform.
Save To Database
The save to database checkbox enables the form to save the submitted form data to the form's database. If you enable this option, a database is created for your form and any data submitted is saved to this database for later manipulation.
Display ID
The display ID option will display a unique ID in the dataset. This is required to be able to edit the data inside the database.
Capture Username
When a user that is logged into the Zamic platform submits a form, the username is captured inside the database.
Display Data Grid
Whether to display the database data grid on the form. This will allow users that have view access to the page have access to the database along with functions like the ability to search for records inside the dataset. Note: it is not recommended to enable this on public pages, as public users would have access to view the submitted data of other users.
Allow Edit
Allow edit gives users who can view the page the ability to edit the contents inside the database allowing them to update records inside the dataset. Note: It is not recommended to enable this option on public pages as it would give them the ability to view and edit submitted data of other users.
Data Export Scheduling
The Data Export Scheduling subgroup allows you to schedule exports of captured form data and how to export those datasets.
Schedule Export
The Schedule Export checkbox enables the scheduled export functionality of your data and the email address to send the data to.
Schedule
The schedule allows you to pick when the export is to be emailed. You can select a minimum of by the hour up to by the year. Note: The minute option is disabled in the current version of Forms.
Export Type
Select the Export Type allows you to choose the format of the export you receive. You can choose from comma delimited (CSV), tab delimited (TAB) or Excel formatting.
New Records Only
When this checkbox is selected, only new records that have been created since the last scheduled export was run will be sent.
Notify No New
When this checkbox is selected, the Forms widget will send a notification that new data has been created. This is useful to confirm that the system is still checking for newly created items on your set schedule.
Template Tab
The template tab allows you to format the email that is sent when a form is submitted. To modify the template, the User Template checkbox needs to be checked in the settings menu, this will enable the template tab. The template editor allows you to modify styles, create tables for the sent email.
Once you have got your layout sorted, you can replace areas on the template with data that is submitted by the end user. To do this you need to get the name of the field, this can be done by going back to the design tab, editing the component and getting the name from the name field. In the example below, the name is text-test-0
Go back to the template tab, and where you would like to replace the area with form data, you would place it in between a ==/ and /== text, so in this example it would look like ==/text-test-0/==
Once you have made the change, click the Save Template button. You can test that it is working by adding some test data using the preview tab.
Form Elements
Zamic forms has a number of elements that you can use to capture data from end users. Each of the elements have a number of different options that can be set depending on how you would like the user to interact with the element, or how the element is to interact with the database. To get into the element options, click on the pencil icon at the top of the element. To stop editing the element, click the same pencil icon.
Autocomplete
When an end user starts typing into the autocomplete element, text from the options list will start being presented allowing the user to select a presented option. You can force the end user to select one of the options, or enter in their own option outside the pre-defined list by checking/unchecking the 'Only accept a pre-defined option' checkbox.
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Place Holder
The placeholder will display some text inside the element that will hint the user of something to type in. The text will appear a lighter shade of the text the user actually enters.
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
Options
A list of options that will appear when the end user starts typing into autocomplete element. To add options, click the Add Option + button. The left hand side e.g. 'Option 1' is the text that is displayed to the end user, the right hand site e.g. 'option-1' is the text that is sent or stored in the database when the form is submitted. You can remove options at any time by click the x icon.
Only accept a pre-defined option
When this checkbox is checked, only the options that have been created in the option list can be selected. If the box is unchecked, the end user can enter in their own text and it will be valid when they click the submit button.
Checkbox Group
A checkbox group will place a selection of checkboxes on the form that the end user can select. This is ideal where more that one option should be chosen. If you enable the 'Other' option, the end user can check the 'other' checkbox and enter some text into the text field next to it.
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Toggle
Will create on/off toggle buttons instead of the standard checkbox.
Inline
The inline option will place the checkboxes horizontally rather than vertically
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
Options
A list of checkboxes that will be presented to the end user. To add options, click the Add Option + button. The left hand side e.g. 'Option 1' is the text that is displayed to the end user, the right hand site e.g. 'option-1' is the text that is sent or stored in the database when the checkbox is selected and the form is submitted. You can remove options at any time by click the X icon.
Date Field
The date field element allows the user to pick a date from a popup calendar
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Place Holder
The placeholder will display some text inside the element that will hint the user of something to type in. The text will appear a lighter shade of the text the user actually enters.
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
Value
The default value of the calendar in the format of "2022-03-30"
Header
Some header text for the form. This is just text and does not capture any information from the end user.
Label
The label of the element that is presented to the end user.
Type
The header type which relates to the size of the header, h1 being the largest through to h6 being the smallest.
Number
The number element is a text box that will only accept numbers, you also have the ability to set a minimum, maximum and a step that the numbers can be incremented in. When a number is entered, the number will be validated against these fields. The number element also adds up and down arrows to the right of the element that the user can click to increment and decrement the number inside the element depending on the step set.
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Place Holder
The placeholder will display some text inside the element that will hint the user of something to type in. The text will appear a lighter shade of the text the user actually enters.
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
Value
The default number inside the number element.
Min
The minimum value that the end user can choose.
Max
The maximum value that the end user can choose.
Step
When using the increment/decrement arrows at the right of the element, the value inside the element will increment by this value. If the user manually enters in a value, it must also be aligned to this step value. If min is 1 and step is 2, the user can enter in for example 1,3,5,7,9 etc.
Paragraph
The paragraph element does not capture any user data and allows you to display a paragraph of text to the end user. You can choose how this is displayed, in a paragraph, blockquote etc.
Content
The text that is to be displayed to the end user
Type
How the content is to be displayed to the end user. Usually you would just use the p (paragraph) option, but you might also like to have it displayed as a block quote.
Radio Group
The radio group element provides a list of radio boxes that the end user can pick a single option from.
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Inline
The inline option will place the checkboxes horizontally rather than vertically.
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
A list of radio boxes that will be presented to the end user. To add options, click the Add Option + button. The left hand side e.g. 'Option 1' is the text that is displayed to the end user, the right hand site e.g. 'option-1' is the text that is sent or stored in the database when the checkbox is selected and the form is submitted. You can remove options at any time by click the X icon.
Select
The select element provides a list of options in a dropdown, you can also allow multiple selections where the user can select a number of options from the select box element.
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Place Holder
The placeholder will display some text inside the element that will hint the user of something to type in. The text will appear a lighter shade of the text the user actually enters.
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
Allow Multiple Selections
Enabling this checkbox will allow the user to select multiple options by holding the ctrl key and clicking the options that they require. Selecting this option will display a select box rather than a drop down.
A list of options inside the dropdown/select box that will be presented to the end user. To add options, click the Add Option + button. The left hand side e.g. 'Option 1' is the text that is displayed to the end user, the right hand site e.g. 'option-1' is the text that is sent or stored in the database when the option is selected and the form is submitted. You can remove options at any time by click the X icon.
Text Field
The text field element allows you to capture text from the end user, this box is ideal for smaller text captures like names, addresses etc.
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Place Holder
The placeholder will display some text inside the element that will hint the user of something to type in. The text will appear a lighter shade of the text the user actually enters.
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
Value
This is the default value that will be in the element, the user has the ability to change this.
Type
The type of text box you would like to display.
Text-Field: A standard textbox that will capture text
Password: This will capture the text that the user enters, but will hide the text by displaying bullet text as the user type.
Email: End user is required to enter a valid email address.
Color: This will change the textbox to a color picker, the color will be sent of saved to the database in a HEX format e.g. #7d2121
Tel: The text entered should follow a telephone format.
Max Length
The maximum number of characters that the text field will accept.
Text Area
The text area is designed to capture a larger amount of text from the user. This would usually be used for something like a description, notes
There are options to allow the user to set formatting of the content.
Required
Whether the user submitting the form is required to complete/fill in this element.
Label
The label of the element that is presented to the end user.
Help Text
Adding some help text will add a ? icon beside the element, when the end user mousses over this icon, the help text in this box will be displayed.
Place Holder
The placeholder will display some text inside the element that will hint the user of something to type in. The text will appear a lighter shade of the text the user actually enters.
Name
The name of the element should be unique, not contain any spaces or symbols apart from a hyphen. The name you select here will also be the name inside a submitted email or inside the database (if you select that option inside the settings). Note: If you change the name while you already have data inside the database, data for that column will be lost so please make sure you export first.
Value
This is the default value that will be in the element, the user has the ability to change this
Type
By default this is set to Text Area