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.