Forms & Challenges Tutorial

This tutorial will use the Sites and Forms Frameworks to build a form with validation, spam-prevention, email notification and recording to a Base.

Forms Base

First, we need to set up a Web Form Base to include form questions, help, and validations.

1. Click "Website" on the left.

2. Click the add () button in the Workflow menu

3. Select “Content Type”

4. Click the “Edit Type” button () in the Sidebar

5. Enter a concise Title that will be used as an identifier and show in the CMS, e.g. Tutorial Form

6. Click the Advanced tab

7. In the Extends field, choose “Web Form Base”

   1. Click “OK” when prompted to refresh the view

8. Several “meta” fields will already be present, and you can now add your own fields using the button in the Workflow menu

   1. Common fields include email, name, feedback, etc.

   2. It is common to add field validations, such as required fields or email/phone formatting

      1. Click the desired field

         1. You may need to then click the "Edit Field" button (), on the right

      2. Switch to the Advanced tab

      3. Add or edit any validations you'd like to utilize

9. Click "Approve" in the Workflow Menu.

Web Form

Next, we need to set up a Web Form to act as the foundation of form questions, help, validations, a challenge, etc.

1. Click "Website" on the left.

2. Click the button in the Workflow menu

3. Select “Web Form” (not including “Base”)

4. Title your form, e.g. My Web Form

5. Choose your created Web Form Base for Form Questions, e.g. Tutorial Form

6. Optionally add a Challenge to help prevent spam

   1. Expand the field

   2. Click the button in “Challenge”

   3. Choose the appropriate Challenge, e.g. “Google reCAPTCHA”

   4. You can obtain a Site Key and Secret Key from Google for reCAPTCHA

      • This tutorial was created using Google's V2 "Invisible" CAPTCHA

      • Create a new reCAPTCHA instance

        1. Enter a label/title

        2. Choose "reCAPTCHA v2"

           • Choose "Invisible reCAPTCHA badge"

        3. Enter your website domain

           • Also enter your staging address as staging.<account>.webcomand.com (where <account> is the name of your webCOMAND account, which is in the address bar of your web browser like https://<account>.webcomand.com/)

   5. Click "Approve" in the Workflow Menu.

   6. Click blue back button.

7. Ensure your new challenge is present in the Challenge field

8. You can provide a success message or URL for the user in the Success tab

9. Click the Submissions tab

   • For Submission Folder you can choose the “Website” base, or make a dedicated folder therein

   • You can enter an email address for alerts when a form is successfully submitted

     • These results will always be stored in the Submission Folder, with email used for notifications

10. Click “Approve” in the Workflow Menu.

11. Click “Web Pages” on the left.

12. Choose your home page.

13. Click the button in “Sections”.

14. Find and choose “Web Form Reference”.

15. In the Content tab, expand the Web Form field and choose your form.

16. Check the “Enable reCAPTCHA” checkbox if you’re using a challenge

17. Click "Approve" in the Workflow Menu.

18. Click the blue back button.

19. You should see your new Web Form Reference and Preview your Web Page.

20. Create a test form submission to verify everything is working.

    • If you enabled reCAPTCHA v2 Invisible, you should see the appropriate icon from Google in the bottom-right.

    • If you entered your email address in the Submissions tab of your form, you'll receive an email notification.

21. Refresh the tree view on the left and you'll now see "Tutorial Forms" as a collection point for submitted forms.

Conclusion

This tutorial covered the creation of a vary basic form with reCAPTCHA protection. Many fields and validations can be created, as well as advanced pre- and post-processing functionality.

• < Full Site
• Publications >