Customizing & Scripting Forms From Scratch
For the list of ways to customize and script forms, please see this page.
Form Builder
As we transition into using Form Builder by default, there are some things to keep in mind. See this page for information on how to create and style forms using the form builder.
Honeypot check
All forms must include a hidden input field with a name attribute set to “formId”
<input type="hidden" name="formId">
One of the CMS tranformers will attach an additional field to the form with a name and id set to _comments_input. When a form entry is submitted if this field has not been submitted or if it is not empty the submission will result in a 400 BadRequest.
Address Fields
The address field set has a bit of a different setup in the scala - this is because all address fields always contain the same components. The last piece of the name will always be the same.
Depending on your personal preference, you may prefer to get the scala for your form from different places in the banno-cms-forms repo. For this example, we’ll be using a file within banno-cms-forms > tree > master > test > models > forms > site. If your scala looks like this within that file:
address = OptionAddress(Some("123 main st"),Some("waverly"),Some("Iowa"),Some("50677")),
At the most basic level, the address group in this case is simply called “address”, but depending on the complexity of the form the backend team may choose to call it something else. So, since you can’t have a bunch of fields with the same name, here is how to name each individual field if your group is called “address”.
The suite/apartment # field is completely optional and can be left out - as you can see, it’s not even included in the code above. All address groups will have this field built in, however, if you want to include it for yours.
- Street:
address.street - Suite/apartment #:
address.streetTwo - City:
address.city - State:
address.city - Zip:
address.zip
Captcha
When a form has captcha, you need to set the captcha property in the form JSON to true.
HTML Tag:
<banno:captcha></banno:captcha>
Example Sites
File Input Form Fields
First, your form tag in your HTML will need to be slightly different. Be sure to remove class=“ajax-form” from the form tag.
<form id="FORMID" data-parsley-validate method="post" action="/_/api/form/FORMID/entries" enctype= "multipart/form-data">
HTML
For a form requiring an attachment, you will need to include an input field like the code provided below. For the “accept” portion, make sure you’re following the rules as defined on this page.
<div class="form-group">
<label for="fileInput">
<strong>Attach Resume (PDF, JPG, etc.)</strong>
</label>
<input type="file" name="file" id="fileInput">
</div>
Styles
To set up custom styling for a file input field, see this page.
Script
Your form submit function will need to be different as well.
$('.file-submission-form button[type="submit"]').on('click',function() {
if ($('.file-submission-form').parsley().isValid() ) {
$('.file-submission-form').ajaxForm({
beforeSend: function() {
$('.loading').show(); //show ajax loader gif
},
uploadProgress: function(event, position, total, percentComplete) {},
success: function() {
$('.ajax-form-container .form-container').hide();
$('.success-container').fadeIn(); // success message in editable area
},
complete: function(xhr) {
$('.loading').hide();
},
error: function(xhr) {
$('.error').show();
$('.loading').hide()
}
});
} else {
$('.file-submission-form').parsley();
}
});
Along with this script you will need to add a js plugin jquery.forms.js. Just put it into your script plugins folder and it will be included automatically when you build the zip.
Troubleshooting File Uploads
- In general: Make sure the “Submit” button is an actual button with type submit (rather than an input field with a type of submit).
- Form goes to a blank page instead of doing the whole “hide-the-container, show-the-success-message” deal, but everything still submits to the CMS okay
- Solution: Older sites tend to have VERY old setups which don’t even have parsley. If the site doesn’t seem to have parsley, try taking it out of the first if {} statement. (a.k.a It will literally go straight from the button click into the .ajaxform({… stuff.)
- Form submits but the file doesn’t go through
- Solution: Check and see if the form has class=“ajax-form”. If it does, make sure to also add the class file-submission-form. Otherwise the form will just submit itself normally rather than using the specific setup you have for the file submission.