Setting up Web Forms is super simple, very powerful, and is yet another one of the useful core features of BlueberryCMS. You can design and customize your Web Form with ease using our form builder and then put a {bb_webform} tag on any page, page template or content holder.
Let's create a simple contact form.
• In the Website Portal, access the Content > Web Forms section.
• Click the "New Web Form" button.
First take a look at the Tabs at the top of the page. You can navigate through all of the available options before creating your new form. Settings, Fields, Autoresponder, and Customize.
Settings Tab
The Settings tab is where you edit the basic information about a Web Form.
• Begin by entering a "Form Name" for your new Web Form. Keep in mind that the Form Name will be displayed within the Live Feed and Workflow notices.
• Use Workflow is an awesome feature that kickstarts a notification Workflow. Workflows allow you to send email notices to 3rd party recipients as well as Website Users that have certain Roles assigned to their accounts. Check out Web Forms Recipients and Workflows to learn how to use this feature. It's easy as pie!
• The Secure Zone field will allow you to create forms that relate to access Secure Zones areas of your website that require membership.
• Create Sales Opportunity creates both a Marketing Contact and a Sales Opportunity for that Contact after the form has been submitted. Coming soon!
• Confirmation Page overrides the default Web Form Submission page that is defined in the Site > System Settings > Pages section of the Website Portal. This option allows you to specify any Web Pages within BlueberryCMS as the page a visitor is redirected to after they submit a form. Keep in mind if you'd like to display the results of the Web Form on the confirmation page, use the {bb_webformresults} tag on your page as such:
<div class="form-results">
{bb_webformresults}
</div>
• Enable CAPTCHA enables the Google CAPTCHA challenge/response checkbox. When enabled on a Web Form, it is required to be checked off before the user submits the form. We highly recommending not unchecking this option to ensure your Workflow and Autoresponder notices are received.
Fields Tab
Next is the Fields tab is where you add the many different form fields for the information you want to collect from the visitor. Every Web Form must contain these three fields: first name; last name; email address, so they are added by default.
Simply select a Field category on the left, and click on any item to have it automatically added to the form. The Contacts group of field selections are stored within actual CRM record data that can be accessed under the Marketing > Contacts section.
Autoresponder Tab
The Autoresponder feature allows the person who submitted the form to receive an email confirmation that you can customize under this tab. Feel free to edit the message and place the Web Form fields, known as "Available Tags" anywhere on your email layout.
Be sure to click the Enabled checkbox to enable the feature and then just fill out the Email Subject, From Address, From Name, and the Format option. Then in the body of the message, you can at the very least:
{{workflowWebFormResults}}
Which will display a nice table format of the Web Form fields the user filled out. Otherwise you can customize the display yourself using the Available Tags.
Customize Tab
This is the final step in creating a Web Form. Under the Customize tab click the Sync button to generate the basic HTML for your form. This also gives you an opportunity to view and modify the HTML markup of your Web Form to your liking.
Anytime you add new Fields to a form, you will need to go back to the Customize tab and click the Sync button to get the most up-to-date HTML markup. Keep in mind that by clicking the Sync button it will overwrite any previous customizations you may have entered in this editor. So we suggest you copy your current HTML and paste into a text editor. When you are finished, click either Save & Close or Update.
Taking a look at the code, you'll find that the most important lines in this HTML are the beginning <form> element which has a action="/SubmitForm" URL which is unique to your Web Form. Then at the bottom of the Web Form you will also find validation JavaScript which ensures your website visitors fill out the required fields. Don't remove this code unless you know what you're doing. You're welcome to use your own validation scripts if you'd like, otherwise, keep this code in place.
Inserting a Web Form on a Web Page
Finally, it's just a matter of inserting a Web Form on one of your Web Pages, Page Templates, or Include Files that you have within BlueberryCMS! All you need to do is use this code:
{bb_webform source="Contact"}
For more advanced options on this tag, check out the Developers article for this tag here: {bb_webform}
