How to Add a Form on a Page

Navigate To The Page

1. Login to TheWebConsole

2. From the left side menu click Manage Pages and choose Content Pages

3. From the content page list either Add  Page or Edit an existing page

Note: Information on how to Add a New Page and How to edit an Existing Page can be found in more depth within separate knowledgebase articles.

 

Adding A Form Builder Module To The Page

1. Once the drag and drop editor has loaded you will be given the option to add different content modules into the page. All of these content modules first require a “Section” to be added. Once you have added your section and formatted it to your liking, simply click the “Form Builder” content module, located in the side menu. Once clicked, drag the module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

Note: Adding a section is covered in its own knowledge base article.

 

Choosing Your Form

1. Once you have added the form builder content module to the page, hover over the module and click on the form module and click, the edit button that appears as a pencil icon in the top right of the section.

2. Once the edit window loads you will be given the ability to choose the form you wish to add. Simply click the dropdown field labeled “Select Form” and choose the form from the list.

Note: Information on how to create a form can be found in more depth within separate knowledgebase articles.

 

 

Styling Your Form

1. Once you have chosen your form you are given an optional choice to apply styling settings. These are found within the 5 tabs layout, Label Style, Button Style, Field Style, Uploader style, covered below:

• Layout - Allows you to style the overall layout of the form.

  • Show Form Heading - Allows you to hide the form name from the page.

  • Form Heading Type - Allows you to choose the heading size of the form name if its being displayed, note if it's not the first heading on the page we suggest choosing the option “Heading 2”.

  • Background Colour - Allows you choose a background colour for the form itself.

  • Border - Allows you to choose a border to surround the form.

  • Padding and Margin - Allows you to add space between the form and other content.

• Label Style - Allows you to style the field labels.

  • Position - Allows to to choose where the label will sit in relation to the field.

  • Text Color - Allows you to change the colour of the label.

  • Font Family - Allows you to change the font of the label.

  • Font Size - Allows you to choose the size of the label.

  • Font Weight - Allows you to choose the boldness of the label.

  • Line Height - Allows you to choose the space between the lines of text.

• Button Style - Allows you to style the forms buttons.

  • Width - Allows you to set the size of the button in relation to the form.

  • Background colour - Allows you to set a background colour to the button.

  • Text Colour - Allows you to choose a colour for the text of the button.

  • Hover Background Colour - Allows you to set a different background colour when the button is hovered over.

  • Hover Text Colour - Allows you to set a different text colour when the button is hovered over.

  • Button Alignment - Allows to choose the alignment of the button.

  • Text Alignment - Allows you to choose the alignment of the text in the button.

 

• Field Style - Allows you to style the form fields.

  • Width - Allows you to set the width of the fields.

  • Text Colour - Allows you to set the text colour within the fields.

  • Background Colour - Allows you to set a background color in the fields.

  • Padding - Allows you to set space between the fields.

  • Border - Allows you to add a border around the fields.

• Uploader Style - Allows you to style the upload button.

  • Uploader Background Color - Allows you to set a background colour to the upload button.

  • Uploader Text Color - Allows you to change the text colour of the upload button.

  • Uploader Hover Background Color - Allows you to set a different background colour when the upload button is hovered over.

  • Uploader Hover Text Color - Allows you to set a different text colour when the upload button is hovered over.

 

3. Once you have added your form and applied any desired styling click the “Save and Close” button to save the form builder module

4. Once you have saved the form builder module and made any other page edits required, click the “Save'' button on the bottom of the side menu to save the page.

 

Note: Always remember to follow the final point and save the page itself, or the hard work you have done will not be applied.