GetDotted Domains

Freeola Guides

 

Adding a Contact Form

The RQS builder helps you to easily design your pages with the addition of Page Sections. These Page Sections can be added almost anywhere on your website giving you the opportunity to make something really unique.

This guide will outline how to add, edit, and make use of one of these Page Sections, Contact Form.

A Contact Form can be used to allow visitors to send you an email. Having such a form on your website should reduce the number of unsolicited emails you receive over simply displaying an email address within your content.

The following guide assumes you are adding a new Section to an existing page. If you are creating a new page and using a Contact Form Section as a starting point, the following process is exactly the same.

Adding a Contact Form

To add a new Page Section to your page right-click any area within your content to open the RQS Menu, then select Insert Page Section. From the secondary menu that opens, choose where you would like the section to initially appear. You can either Insert Section Above or Insert Section Below the selected location.

This placement isn't final, you can still move your Page Section once created.

RQS MenuRQS Insert Page Section

Once you have chosen your initial placement the Add Page Section window will open allowing you to select a Section Type. For this guide, we are selecting Contact Form. Click Add Page Section to continue.RQS Contact Form

Once you have added your section you will be taken back to the RQS Editor, with your new Content Form already selected for editing.

Editing a Contact Form

This default form will already include the most common fields for contact forms but, as with all aspects of RQS, these can be edited, removed and added to quickly and easily.

If the Contact Form isn't selected, Right-Click anywhere within the form then select Customise Form.

RQS Contact Form

Adding a Form Field

To add a Form Field Right-Click anywhere within the form and select Add Form Field from the RQS Menu.

RQS Add Form Field

The following menu will allow you to to choose the type of field you would like to add to the form:

Text Field - The most common field on a Contact Form, and will be used to collect a Name, Contact Information and the Message that your visitor wants to send you. Upon selecting this option, the Edit Text Field window will open.

RQS Contact Form Text Field

- Field Label - What you would like the field to be called. Something short and obvious is recommended here, Name, Email, Telephone or Message, for example.

- Number of Lines - The number of lines you would like the form to be made up of. Contact Fields (Name, email etc.) will typically be a single line, Message/Information and Postal Address fields should be more.

- Required Field - This will toggle if a field is required. If this option is selected then your visitor will not be able to submit their form without entering something within this field.

- Default Value - This optional field will allow you to pre-fill a field with text of your choice.

- Use default value as placeholder - This tickbox controls the behaviour of your Default Value. If turned on (a tick within the tickbox) your Default Value will be overwritten by your visitors input. Turned off, your Default Value will stay within the field and will likely need to be removed by your visitor.

- Help Tooltip - A short message that can help aid or guide your visitors towards the type of information you require from this particular field. This tooltip will appear when the visitor clicks a small icon next to the Field Label.

- Field Validation - The second tab on this window only has one option, a drop-down menu. This menu will allow you to specify the type of information you would like in this field, rejecting everything else. This is useful if you would like to ensure than only valid email addresses or UK telephone numbers are provided within the relevant fields.

RQS Contact Form Text Field

List Field - This field option allows you to add a list to your Contact Form. This field could be used for your visitors to specify a contact preference, or for you to collect results for a vote or poll on a page.

RQS Contact Form List Field

- Field Label - What you would like the field to be called. Something short and obvious is recommended here.

- List Type - The type of list you would like to display on the Form. Single Choice Radios allows the visitor to select one option only from the list by clicking a radio button next to their selection, Drop Down List allows selection through the use of a drop-down menu and Multiple Choice lets multiple options be selected using tickboxes.

- Required Field - This will toggle if a field is required. If this option is selected then your visitor will not be able to submit their form without entering something within this field.

- Help Tooltip - A short message that can help aid or guide your visitors towards the type of information you require from this particular field. This tooltip will appear when the visitor clicks a small icon next to the Field Label.

- Field Options - This section will allow you to add the options (or rows) to your list. If you have selected the Radio or Drop-Down list type you will be able to set a Default selection by clicking the option next to each row. If you wish to remove an option, click the Trash Can icon, to add a new option select Add Field Option.

RQS Contact Form List Field

Date/Time Field - This field allows you to obtain information from your visitors in the form or a Date or Time. This can be useful for booking enquiries or obtaining delivery details.

RQS Contact Form Date Field

- Field Label - What you would like the field to be called. Something short and obvious is recommended here.

- Date Picker Type - This will allow you to define what information you would like: Date and TimeDate Only or Time Only.

- Required Field - This will toggle if a field is required. If this option is selected then your visitor will not be able to submit their form without entering something within this field.

- Help Tooltip - A short message that can help aid or guide your visitors towards the type of information you require from this particular field. This tooltip will appear when the visitor clicks a small icon next to the Field Label.

RQS Contact Form Date Field

The Captcha box on your form is always on and cannot be edited.

Customising the Button Settings

To submit your form your visitors will need to click on a 'Send' button. You are able to edit the text of this button by Right-Clicking your form and selecting Button Settings.

Button Text - The field allows you to set the text that appears on the Submit Button.

Show a form reset button - This optional setting will add a second button to your form allowing a full reset of the data entered. Tick the box to enable this option.

RQS Contact Form Button

Once you have added your desired fields you can finish editing by clicking the Finish button, Right-Clicking then Finish Editing or simply by clicking away from the highlighted Contact Form.

RQS Contact Form
Editing the Form Introduction

The sample Contact Form includes a small section intended for a short introduction for the form. You may find this useful for providing your visitors a brief outline of the information you are hoping to gather from the Contact Form.

To edit this section, Right-Click anywhere within the Contact Form area then select Edit Intro Content.

RQS Contact Form Menu

The introduction can be edited in the same way as any other Content Section of the site. A full in-depth guide on adding information to this section type can be seen on our Content Section guide.

However, if you wish to simply edit the default text you can do so easily by Right-Clicking the area and selecting Edit Text Area. If you wish to remove the Introduction completely select Delete Text Area from the Right-Click Menu.

In the example below, we have centre aligned the text and updated the content to better fit our chosen Fields.

RQS Contact Form Intro

Editing the Side Content

As Contact Forms are traditionally very narrow, the default RQS Contact Form includes another Content Section to the side of the Contact Form to help fill the space. This Content Section can be used to expand on the outline in your Introduction, provide more information for your site or business, or can be used as an additional Content Section for your site, and include images, videos or even Snippets.

To edit the Side Content Area Right-Click anywhere within the Content Form area and select Edit Side Content from the Right-Click Menu.

RQS Content Form Menu

By default, this Content Area will be made up of two Text Areas. However, these can be edited, added to, removed or replaced - as with any other Content Section.

If you would like to learn how to use Content Sections in-depth, please visit our Using Content Sections Guide.

For our example, we have updated the text within the first Text Area and replaced the second with a Snippet to the Freeola Facebook Page.

RQS Contact Form Side Content

Editing the Form Styling

By default, the Contact Form will use your Site Colour Scheme. However, should you wish to customise this section of your site to make it stand out from the rest, you can do so from the RQS Right-Click Menu. To open this menu, right-click anywhere within the Contact Form Section and choose Section Styling from the menu.

RQS Contact Form Menu

Backgrounds: If you would like your custom Contact Form background to cover the entire width of your site tick the Custom Full Width Background, if you would like your custom background to only cover the Contact Form section of the page, tick Custom Content Width Background.

These options are not mutually exclusive; the RQS Builder allows you to use both options simultaneously, individually, or not at all.

Once you have decided where your custom background will display, click the large rectangle underneath your selection. This will open the Edit Background window.

RQS Edit Background

This window will offer two tabs: Customise will allow you to create a new background using either a solid colour or image and Existing Backgrounds will allow you to choose from a previously created background.

The drop-down menu on the Customise tab provides several options:

Colour Only - This option allows a solid colour background. By default this will be a transparent colour, but you can change this easily by clicking the small colour square.

Image - These options will allow you to use an image as your section or site background. To select your image select Image, this will open your Media Library. You can either select your desired image from this selection, select a Stock Image or use Upload Media to add a new image. You can also change your background colour should your image selection not fill all available space.

Resize to fill area - This option will resize your image to fill your background space completely. This option is not recommended for very small images.

Fixed position sticky image - This option will expand your image to cover the background, but this will remain static when scrolling through the page content. As you will likely only see a small part of this image, this is not recommended for an individual section of the page.

Centred at original size - This option will set your image central to the content. If the image is too small to cover the entire area, some tiling (or repeating) of the image will occur.

Tile over entire area - This option will repeat your image over the entire background area. This option is recommended for smaller, simple, images.

Custom - If you wish to further customise how your background image displays, this option allows you to do so. Recommended for Advanced Users only.

Once you have made your decision, click Finish to save.

Text Colours: If you would like to use a different colour font in your Contact Form from the rest of your site tick the Custom Text Colours box on this window.

This option will allow you to set a custom Text, Link and Link Hover colour. Simply select the colour block next to each option to open the colour picker.

RQS Custom Font Colours

Other: This short section allows customisation of the Breakpoint (The point at which your content begins optimising on smaller screens) and Padding (The size of the space between the content) of this Site Section.

Unless you have a specific reason to do so, it is recommended to leave both of these settings as Off.

Existing Designs: If you have designed content styling already within RQS you can easily select it from this tab.

Once you have decided on your changes, click Finish to save and close the window. You will now be returned to the editor with your changes in place.

RQS Contact Form

Changing the location of the Contact Form

By default your Contact Form Fields will be found on the left-hand side of your Contact Form Section. If you would prefer this to appear on the right, Right-Click within the Contact Form area and select Swap Form Side from the RQS Menu. You can reverse this decision by selecting the option again.

If you would like to change where your Contact Form appears on your webpage Right-Click and select Move Page Section from the RQS Menu. This will open a secondary menu that will allow you to move the Section Up, or Down the page.

Customising the Thank You Page

After filling in your Contact Form your visitors will be taken to a Thank You/Confirmation Page. This basic page should normally feature a small line of text, typically giving a brief confirmation that the form was completed successfully.

To edit the content or look of this page Right-Click anywhere within the Contact Form Section then click Go To Thank You Page.

To edit the content of this page Right-Click then select Edit Content. You can choose to keep the content simple, or expand this page with additional Elements.

If you would like to learn how to use Content Sections in-depth, please visit our Using Content Sections Guide.

To edit the styling of this page, Right-Click then select Section Styling. A guide on changing the Section Styling can be seen above. If our example, we have made use of the Existing Designs tab, and selected the colour scheme we designed for the Contact Form.

RQS Thank You Page

Once you have finished designing this page, Right-Click then click Go To Contact Form.


Did you find this article helpful?


Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Your level of service is excellent...
I have been a very satisfied customer for several years now.
Excellent service!!!
It is refreshing to have staff keep calling to help me solve my problem. Excellent service!!! Please keep this service going.

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, Edge, or Opera will provide a better, safer browsing experience for you.