Adding and Customising a Contact Form
using The SitePro Website Builder on DirectAdmin
Evans
Last Update un giorno fa
Overview
A contact form is essential for capturing leads and assisting customers.
In this guide, you’ll learn how to:
A contact form is essential for capturing leads and assisting customers.
In this guide, you’ll learn how to:
- Add a contact form to your page
- Configure email delivery
- Customise form fields and layout
- Style the form to match your website
- Optimise for mobile devices
1. Add the Form Element
Prepare Your Layout
Prepare Your Layout
- Remove any unused elements by right-clicking and selecting Remove.
- (Optional) Add a Text element to create a heading for your contact section.
- Locate the Form element in the main toolbar.
- Drag and drop it into your layout.
- Choose a form composition that suits your design (e.g., layouts with images or different field arrangements).
2. Customise the Design
- Change Image (if included):
Click the image → select the pen (edit) icon → upload or choose a new image. - Edit Text:
Double-click any text to update headings or instructions.
Use alignment options (e.g., center text) for a cleaner look.
3. Configure Email Delivery
To receive messages submitted through your form:
To receive messages submitted through your form:
- Recipient Email:
Enter the email address where form submissions should be sent. - Sender Email:
Enter the email address that will appear as the sender.
4. Manage Form Fields
To customise what information you collect:
To customise what information you collect:
- Click the form and open Edit Form in the right-hand panel.
- Reorder Fields:
Drag and drop fields to change their position. - Change Field Type:
Use the dropdown menu to select different input types (e.g., text, email, dropdown). - Edit Labels & Placeholders:
- Name: Field label (e.g., “Email Address”)
- Placeholder: Instruction inside the field (e.g., “Enter your email”)
- Set Required Fields:
Enable the Required option for mandatory fields.
5. Style the Submit Button
Make your call-to-action clear and visually appealing:
Make your call-to-action clear and visually appealing:
- Change Colours:
Use the Background option for button colour and Color for text. - Adjust Alignment:
Use the Align settings to position the button (centering is often best for mobile).
6. Preview on Mobile
Contact forms are frequently used on mobile devices, so testing is essential:
Contact forms are frequently used on mobile devices, so testing is essential:
- Click Preview at the top of the editor.
- Switch to mobile view and check:
- Fields are easy to tap
- Text is readable
- Layout is clean and well-spaced
Quick Tips
| Task | How to Perform |
| Add Form | Drag Form element onto page |
| Set Email Delivery | Enter recipient & sender in right panel |
| Edit Fields | Form → Edit Form |
| Make Fields Required | Enable Required option |
| Style Button | Button section → Adjust colours & alignment |
| Test on Mobile | Use Preview mode |