Custom Forms

With the bbbx_forms settings you can easily load a custom form. This way you can attach whatever info you want to user created entries.

Creating the form

You can use all standard html form elements and there are some special attributes available to add validation to your fields. To begin, create a new html file for example: form.html

Validation

If you add the attribute data-validation-rule to your input fields you can list validations rules (separated by pipe symbol) that need to be applied on that form element. Below you find a list of validation rules you can add to an element.

You can also combine multiple validation rules like so:

<input type="text" name="email" id="email" data-validation-rule="required\|valid_email" value="" />

Subscribe checkbox

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>

Full example

Below is a big form example that you can use to get started with custom forms.

<label for="name">Name:
    <span>*</span>
</label>
<input type="text" name="name" id="name" value="" data-validation-rule="required" />
<label for="email">Emailaddress:
    <span>*</span>
</label>
<input type="text" name="email" id="email" data-validation-rule="required\|valid_email" value="" />
<label for="repeat_email">Repeat emailaddress:
    <span>*</span>
</label>
<input type="text" name="repeat_email" id="repeat_email" data-validation-rule="required\|valid_email\|matches[email]" value="" />
<label for="company">Company:
    <span>*</span>
</label>
<input type="text" name="company" id="company" value="" />
<label for="model">Smartphone:</label>
<select id="model" name="model">
  <option value="iphone">iPhone</option>
  <option value="windows8">Windows 8</option>
  <option value="android">Android</option>
</select>
<br /><br />
<div class="checkbox">
    <input type="checkbox" name="subscribe" id="subscribe" value="true" data-callback="http://mysite.com/trigger_subscribe.php">
    <label for="subscribe">Subscribe to our newsletter</label>
</div>

Upload attachment button

It’s possible to add an upload button to your form so users can attach a file to their entry. For the moment the attachment upload button only supports video and image files.

Below is the code you can use to place an upload element on your form:

<div data-bbbx-init="upload" class="bbbx-button" id="upload3" data-bbbx-type="attachment">
    <div class="bbbx-upload-label">Choose your image</div>
    <div class="bbbx-upload-progress">Uploading file <span data-bbbx-init="upload.progress">0</span>%</div>
    <div class="bbbx-upload-success">File is uploaded</div>
</div>

The attachment will be visible under entry meta data. The name of the attachment will be based on the div id attribute. In the above example the meta key would be “upload3”.

Upload and configure setting

If your form is ready then upload it to your sever. Next thing to do is add following setting to your javascript code:

var bbbx_forms = {
    view: 'http://mybucket.s3.amazonaws.com/form.html'
};

And replace http://mybucket.s3.amazonaws.com/form.html with the url where you’ve uploaded your form. Also make sure you have the form option enabled on your widget (Widget > Settings > Forms > Enable form).