How To Add A Contact Form On A Page

Part 1: 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 a new 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.

 

Part 2: Adding A Contact Form 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 “Contact Form” 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.

Part 3: Choosing Your Contact Form Location

 

1. Once you have added the contact form content module to the page you will need to select which location the form will use. Hover over the module and click the edit button, the edit button 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 location. Simply click the drop down field labeled “Email Location” and choose your location, if you only have one simply choose “Default Location”.

Note: information on how to add and edit locations can be found in more depth within separate knowledgebase articles.

 

Part 4: Styling Your Contact Form

 

1. Once you have added the form and chosen the location you will have the ability to style its display. This is done through the 4 tabs Style, Label Style, Button Style and Field Style, covered below:

• Style - allows you to style the overall layout of the contact form

  • 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

  • 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

  • Align - allows you to choose the alignment of the lebel

• Button Style - allows you to style the forms buttons

  • Button Text - allows you to set the text seen in the button

  • Colour - allows you to choose a colour for the text of the button

  • Background colour - allows you to set a background colour to the button

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

  • Alignment - allows to choose the alignment of the button

  • Font Family - allows you to change the font of the text in the button

  • Font Size - allows you to choose the size of the text in the button

  • Font Weight - allows you to choose the boldness of the text in the button

• Field Style - allows you to style the form fields

• Colour - allows you to set the text colour within the fields

• Background - allows you to set a background color in the fields

 

2. Once you have chosen your styling click the “Save and Close” button to apply the settings to your contact form module

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