Knowing how to add a contact form in Site Builder is good practice for your website, to interact with visitors, get feedback, and increase conversions. A user-friendly contact form guarantees your audience can easily contact you, regardless of whether you manage a personal blog or a small business.

This tutorial demonstrates how to use the Domains.co.za Website Builder to add and modify a contact form and is related to our You Tube video: How To Add A Contact Form In Site Builder – Adding a Contact Form – Website Builder Tutorial.

How To Add A Contact Form In Site Builder

This tutorial assumes that you are logged in to your Domains.co.za account.

Remove Unnecessary Layout Elements

Start by removing any unnecessary layout elements in your contact section. Right-click on the empty layout and select “Remove” to clean up the space before adding the form.

Drag & Drop the Form Element

Go to the main toolbar, select “Form”, and drag it into your chosen layout area. Choose a form composition that fits your website design. Here, we chose the third option, which works well alongside a photo.

Customise the Form

• Update the Image: Click on the image within your selected form. In the right-hand panel, click the pen icon in the picture section to either upload a new image or choose one from the gallery. Once uploaded, apply the image.
• Edit Text: Double-click the placeholder text in the form, then replace it with your desired content. For a more uniform look, centre the text using the alignment options in the text editor.
  – Title: In the second layout, add your first text element; this will serve as the title. Change its style to a heading using the text editor and centre it with the alignment options. Click “Done” when completed.
  – Paragraph: Add a second text element for your paragraph. Paste your text into it and centre align it as well.
• Set Email Addresses: Click on the form fields to assign Email Addresses. In the right panel, enter the Email Address where messages from the form will be sent, followed by the Email Address from which the Emails will be sent.
• Adjust Margins: Use “control” on your keyboard to select both text elements. In the right panel, add margins to all borders to create space between elements.

Customise the Button Hover State

• Drag and drop a button from the main toolbar into the layout. Choose your preferred style. Edit the button text in the right panel and update the background colour to match your website’s theme.
• Switch to “Hover” in the right panel to change its background colour to a dark yellow tint. Also, update the text colour from blue to white for better visibility.

Add an Anchor to Your Form

• Scroll to the “Contact Form” section and select it. In the right panel, navigate to the advanced section. Add a descriptive name in the “anchor name” field, for your anchor (e.g., “Form”).
• Link the Button to the Anchor – Return to the button you created earlier. In the right panel, click the pen icon under link properties. Choose “#Form” and select the newly added anchor from the dropdown list. Repeat this process for any other buttons that link to the same form.

Modify Form Fields

• Reorder Fields: Click “Edit Form” to adjust the order of fields. To rearrange, drag and drop each field using the arrow symbol next to the field name.
• Change Field Types: To modify the field (e.g., text box, email input), click the field type dropdown menu and select the appropriate option.
• Update Display Name & Placeholder Text: In the “Name” section, change the display name for each field. You can also update the placeholder text to give visitors a hint of what to input in the field.
• Set Required Fields: To make certain fields mandatory, tick the boxes in the “Required” section.

Customise the Submit Button

In the “Button” section in the right-hand panel, you can adjust the background colour, text colour, and alignment of the “submit” button. For example, you may opt for a dark background with white text for a clean look. Adjust the button alignment (“Centre” works best for mobile views).

Preview the Contact Form

Once you’ve customised your form, click “Preview” at the top of the page to see how it appears on different devices, such as mobile phones and tablets. Ensure the form displays correctly and is fully functional.

YouTube Video: Adding a Contact Form – Website Builder Tutorial

Additional Information:

Adding a contact form to your website is quick and simple with the Domains.co.za Website Builder. You can ensure your form works well and blends in with your website’s look with a few simple adjustments. These suggestions can improve user contact and give visitors a direct communication channel:

Ensure Mobile Responsiveness

It’s imperative to ensure a contact form functions properly on mobile devices. For optimal user experience, always check the mobile preview and fix any layout problems.

Test the Form

After adding and customising the form, test it by sending a message through the form to ensure emails are received correctly.

Form Security

Consider adding CAPTCHA to prevent spam submissions and protect your inbox from bot attacks.

Login to Domains.co.za Account

1. Go to the Domains.co.za website Account Login page.

2. Enter your Email and Password.

3. Then click the “Sign In” button.