The forms module allows you to ask your users for some information when they participate in your challenges. This is such an important module that we even created a challenge where the goal is simply filling in such a form, this is the sweepstakes challenge.
BuboBox supports three ways of adding forms to your challenge. In order of increasing complexity, these are:
The forms module can be enabled during the creation of your challenge in the modules step or afterwards through the Manage modules page of your challenge. You can find the Manage modules in the menu on the left when you’re on your challenge dashboard.
Both pages will look pretty much the same. To enable the forms module, simply locate it in the list of modules and press the enable button. After enabling the module, a configure button will appear, allowing you to jump straight to the forms module configuration page. Don’t worry if you’re not in the mood to configure it just yet though, on your challenge dashboard in the menu on the left, there will also be a link to the forms module configuration page under Activate Modules.
There are two components to the form module, the title for your form and the form itself. The title will usually be displayed above your form.
The easiest way to use the forms module is with one of our pre-defined forms. At the time of writing these include Name and email and Name and email (required), both ask your users for a name and an email. The difference is that the first one lets users choose whether or not they want to fill in this data while the (required) version obligates them to fill in your form.
You can select one of these forms from the dropdown.
If you want to customize your form a bit more, you can use our Form builder by clicking on the Create your own form button. The form builder will allow you to build a form by adding elements to it yourself. The Form builder will open in a new window, so check your popup blocker if nothing happens when you click the button!
To add elements to your form, just drag and drop them form the left to the right, easy as that. Now that you have added the elements to your form, you still need to configure them (give them a name, make them required, …), you can do this by clicking once on an item that is already in your form on the right. A popup will appear with options for that form element.
| Configuration item | Description |
| ID/Name | This is the name of your form field, this will be used in the backend to identify the form elements. Only alphanumerical characters and underscores are allowed, no spaces here. |
| Label Text | This is the text your users will see above or next to your form elements |
| Placeholder | The grayed out text that will be shown inside the form element before your users start typing in it, you could use it to give them an example or hint as to what they should fill in. |
| Starting text | The same as placeholder. |
| Group name | This is the same as the ID/Name property but for checkboxes and radiobuttons. If you add multiple sets of radiobuttons with the same Group name they will be seen as belonging together, which means only one of them can be selected at the same time. |
| Checkboxes | The text your users will see next to the checkoboxes, for every line you fill in a new checkbox will be created. |
| Checkboxes values | The values for your checkboxes, the value on the first line will be for the first checkbox in the Checkboxes item above, the second value for the second checkbox and so on. |
| Radios | Same as Checkboxes but for radiobuttons |
| Radios values | Same as Checkboxes values but for checkboxes |
| Required | Turns that element into an element the user is required to fill in |
| Valid email | Makes sure that users can only enter email addresses in that element |
| Must be numeric | Makes sure that users can only enter numerical values in that element |
When you are done building your form, click the Save your form button at the bottom of the page.
This is advanced functionality requiring some knowledge of web development.
Should the Form builder not be flexible enough for your needs, there is always the possibility to create your own forms in HTML. You do this by creating an HTML file and uploading it somewhere publicly accessible. After uploading it, you can enter the URL to your form on the forms module configuration page by clicking on Show advanced options to show the Remote form URL field.
Your HTML file should not contain tags like html, head, body or form, you can simply start adding form elements in the file and we will wrap the rest around it for you. You can add anything you want in your form, it doesn’t all have to be input fiels and labels, you can add just about any HTML you want. Below is the source code for our pre-defined Name and email (required) form.
<label for="name">Name *</label>
<input type="text" name="name" id="name" value="" data-validation-rule="required" />
<label for="email">Email *</label>
<input type="email" name="email" id="email" value="" data-validation-rule="required|valid_email" />
As you can see, this is just plain HTML with one exception. You can add the data-validation-rule to form elements to enable validation of the values your users fill in. In this example we use required to make sure the fields are always filled in and valid_email to ensure they fill in a valid emailaddress. You can combine rules by adding a | symbol between them. Below is a table with some of the more common validation rules you can add, but we also support all the rules that are defined in this CodeIgniter article.
| Rule | Description |
|---|---|
| required | Invalid if the form element is empty. |
| valid_url | Invalid if the form element does not contain a valid url address. |
| valid_email | Invalid if the form element does not contain a valid email address. |
| alpha | Invalid if the form element contains anything other than alphabetical characters. |
| numeric | Invalid if the form element contains anything other than numeric characters. |
| matches[form_item] | Invalid if the form element does not match the one in the parameter. form_item needs to match the name-parameter of the element you want to match. |
On a subscribe box you can add a special attribute “data-callback”. If the checkbox is selected and the user hits the proceed button a POST request will be done to that url with all the info from the form. This can for example be used to subscribe the user to your newsletter.
<div class="checkbox">
<input type="checkbox" name="subscribe" id="subscribe" value="true" data-callback="http://preview.sitebase.be/trigger.php">
<label for="subscribe">Subscribe to our newsletter</label>
</div>
Can't find an answer to your question?
Can't find an answer to your question or problem? Support requests are the most efficient way for us to handle your support inquiries.