Operations CMS - Create CMS Contact Forms

1. Navigate to "CMS"

   To create a contact form, navigate to the “CMS” section in the operations portal.

   

2. Click "Pages"

   Then, click “Pages”. In order to access and update “Pages” you will need to be set up either as an “administrator” or a “superuser”, or have the roles of: “contentView” and “contentEdit”.

   

3. Click the "Add Page" button

   Click the "Add Page" button.

   

4. Select "Gutenberg"

   And select "Gutenberg" from the options.

   

5. Click the "x" icon

   If you already have a predefined layout, you can select from here. If you're starting from scratch, simply click the “x” icon to exit the predefined layout selection.

   

6. Click the "Add block" icon

   You are now in the page editor. Click the "Add block" icon.

   

7. Key in "Form"

   Some blocks will appear from the default options but you can enter "Form" to search for the Form block.

   

8. Select the “Form” block

   Now, select the “Form” block to add it to the page.

   

9. Select "Contact Us"

   Click "Contact Us" to work on a basic contact form and adjust based on your preference.

   

10. Select an input field

    Now you have the contact us form template to work with. Select an input field to start customizing your form.

    

11. Click the “Block” tab

    Then, click the "Block" tab on the right pane to see and update the input field settings.

    

12. "Input Name" field

    "Input name" field is what reference the field when a form is submitted. This is what the admin will see in the backend when he receives the form.

    

13. "Input type" field

    The "Input type" field will define what type of characters the input field will accept.

    

14. "Input label" field

    The “Input label” is the title of the field, and what the user will see above the field.

    

15. "Placeholder" field

    "Placeholder" is a short, descriptive text displayed inside an empty input field (like a text box) to guide users on what they should enter.

    

16. "Required" button

    You can make the input field required to be filled out by users when you turn on the "Required" slider button.

    

17. Click "Preview" button

    Click the “Preview” button to check your updates before saving.

    

18. Preview page

    You will be redirected to the page to preview the form.

    

19. Click the “Save” button

    Once everything looks good, click the “Save” button to save the changes you’ve made.