Avada Form Builder Elements – Transcribed
With the Avada form builder, you can easily create all manner of forms for your website using the power of other builder and then you form elements. In this video we’ll be looking at each of the various form elements.
I’ve made a brand-new form.
Here, and we can just add the elements here.
The first form element is the checkbox field element.
This element can be used in several ways. At its most basic, it could be used, for example as a checkbox for users to accept certain conditions.
An example of this sort of usage can be seen here. In the sweepstakes prebuilt form here where it says I agree to the rules of entry.
You can however also add multiple options and with the checkbox element users can select as many options as they want.
However, with multiple options, it can’t currently be a required field unless you want users to have to select all options.
Here is an example of this sort of usage in the registration form in the How did you hear about a section?
You can add options manually to this element, select options from the predefined lists or bulk, add your own lists.
You can even assign a value to each option by turning on this show values option.
As with most form elements, there is a field label Anna Field name to set at the very top as well as the ability to make the field required at a tool tip and a tab index option for controlling the flow of fields in a form.
With this element as well, there is a stacked or floated option for controlling whether options go down the page or across.
The next element is the date field element.
This element of course allows the user to select a date from a date Picker.
Again, the usual options are to be found, such as Field label name, required field, as well as placeholder and tooltip text.
And you can also choose which date picker to use.
There is a lightweight custom date picker turned on by default, but you can limit that to desktop or turn it off altogether, in which case the native browser date picker will be used.
You can also select an icon and set a tab index, and you can also find the usual CSS class and ID fields.
Like all form elements, you can determine the size of the column you add the element to and it will resize to fit accordingly.
You can see an example of the date field element here in the reservations prebuilt form.
With the date of reservation field.
I can just click in the field and the date picker pops up.
The email field element is the next form element and one that is used in almost every form. It is a very simple element that accepts and validates an email address.
It has all the usual options and needs very little configuration other than giving it a field label and name and deciding whether it needs to be required or not, which it usually is.
You can also add placeholder text, a tooltip and an icon if wanted.
Here’s an example of the email field element in the standard contact form.
The next element is the hidden field element. This is an advanced element and basically what this does is carry a value in the form that is not visible to the user.
Following this is the image select field element.
This is in the form of a parent and child element.
In the children tab you add the images from which a user can select.
This can also be done in bulk in the general tab.
With this element you can determine if multiple or just a single image can be selected. The width and height of the displayed image is the active and inactive border colours, order size, border radius, whether they should be stacked or floated, plus the usual form element options.
This element isn’t used in any of the prebuilt forms but could be used anytime you wanted your users to be able to pick from a range of images.
The notice element is next, which comes with default success and error messages.
This element should be used in all forms when the form confirmation option is set to display message.
This is a simple element that shows the appropriate message when the form has been submitted.
You can of course customize your messages to display whatever message you like.
The element also displays in the place you added, so if you add it for example to the top of a long form, the page will scroll back to the top and display the message upon submission.
Generally, though, it’s probably best placed above or below the submit button.
As we can see here on the basic contact form, if I just fill out this form and click submit.
The success message appears to let us know the form has been submitted.
The colours for the success and error messages come from the global options for the alert element.
If we head to the global options of other builder elements and alert, we can see the colours come from the error background and accent colour and the success background and accent colour.
So, if you want to change them for the forms, this is where you do it.
OK, the next element is the number element.
Apart from the usual options, you can set a minimum and maximum value.
This could be used to register the number of guests at an event or the number of products to purchase, or many other things.
You can see an example of this in the reservations prebuilt form.
You can either just type a number in here or you can use the up and down arrows.
OK, the password field element is next, and this is a simple text field that records the password but doesn’t show it on the front end.
If we look at the signup prebuilt form, we can see an example of the password field element here.
And if we type a password in, we can see it doesn’t display what we have typed.
As has been done here, you can also use it twice to get users to confirm the password.
The phone number field element comes next and this is a numeric field used to collect mobile or landline numbers. It does not accept spaces or letters.
Examples of this element can be found in several of the previous forms.
Including the Doc Registration form, standard contact form and the reservations form.
This element just has the usual options with no unique options to configure.
The radio field element comes next and this is pretty much identical to the checkbox element, with the one exception that users can only select one option with this element. This is perfect for when you want a specific answer from a pre-set range of options.
Here we can see several examples of this element in the survey prebuilt form. In the coloured sections here.
Following this is the range field options. This is similar to the number element in that it allows a user to choose a number.
But with this element, the number is selected by our slider control between the set minimum and maximum values. You can also determine the range step value and set a default value.
In that way you might have a range between 100.
Let’s set the default of 30 or anywhere else.
There is one other unique option, and that’s the orientation.
Where you can set the value to go from the left to right or the other way round.
You can see an example of this element in the reservations prebuilt form.
Where it has been used as a way of selecting the number of tickets required.
The next element is the rating field element.
You can set a maximum rating limit between one and 10. Choose the icon to be used and select the icon size, colour, and hover colour.
Otherwise, there are the usual form element options.
This has been used on the survey form here with the option of choosing from one to five stars.
The recapture element follows this if you see an error like this when you add the element, it’s because for the element to work. You have to configure recapture on your site first.
If we head to global options forms, Google recapture, you can select which version you want to use.
And then add the corresponding site key and secret key.
With these added, the element shows where it will display, but it will only be seen on the front end. The options for the element will also change depending on the version of recaptcha selected in the global options.
As I chose version two with this example, we have options for the colour scheme and the badge position.
For more information about how to configure recapture, please see the linked document.
The select field element is next. This element has the same options as the checkbox and radio field elements, and like them provides a way for users to choose an option, this time from a set of predefined choices that display in a dropdown.
This is particularly useful for things like choosing your date of birth or which state you live in, etc.
If I click on bulk predefined, you can see the various predefined choices we could add into the form.
Like the countries of the world, the days of the week.
The months of the year, the US states the years going back a century and the days of the month.
You can also bulk at your own choices in the bulkhead section, with or without values.
You can see an example of this element in the signup form where there are two instances of the element for users to select their month and day of birth.
The year could also have been done in the same way, but in this form, it’s just entered as text.
That’s the beauty of the flexibility of other forms. There are multiple ways to do things, depending on your design choices.
OK, so we down to the last five elements. The Next One is the most important of all and is required on all forms. The submit button element.
This is a button element of sorts, and so it has most of the same options. A regular button element has, with the exception of the link URL button, target modal window anchor, and element visibility options.
Style the element as you like and for this submission method, head to the form options and under submission you set what happens to the data when the submit button is clicked.
See the about a form local option stop link below to read more about the possible submission types.
Another regularly used element comes next the text field element.
This of course allows users to add text to the form and can be used for common fields like First name, last name, etc.
The only unique options are the ability to set minimum required and maximum allowed characters.
This element is used in many of the prebuilt forms for names and other simple input fields.
The text area field element of course is very similar but provides a multiline text box for extended amounts of information such as the message field.
In this element, the unique option is the ability to set the Text area row value.
Which is the number of empty text rows that display there by making the input area larger or smaller, I’ll just change this to 12 and we can see it grow immediately.
The penultimate element is the time field element, much like the date field element. This provides a custom Picker to select a specific time.
Or you can just use the browser default.
You can also set a 12.
Hour or a 24-hour Clock.
You can see an example of this element in the reservations form where you can use the arrows to select a time.
Or just add them in manually.
The last form element is the upload field element.
This of course allows your users to upload files with the form submission.
The two unique options for this element are the ability to control the maximum file upload size and the allowed extensions. The default is 2 megabytes, but you can increase it all the way to 100 megabytes if needed.
You can see an example of this element in the upload prebuilt form where it’s a required field for ID purposes.
OK, that’s the about the form elements overtime, no doubt new elements will be added, but even as it is, these elements provide a rich range of possibilities when designing your of other forms.
OK, this concludes our video on the Avada form elements.
Transcribed by ZAAAX Design.
If you need audio transcribed, contact us here.