How to Add and Manage Contact Forms Using OzSpeed hPanel

A contact form is an essential part of any website, allowing visitors to reach out to you easily for inquiries, feedback, or support. With OzSpeed’s Website Builder, you can quickly add a contact form, customize its fields, and manage submissions effectively. Here’s a step-by-step guide on how to add, customize, and manage contact forms on your website.

---

Step 1: Access the Website Editor #

To start adding a contact form, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page where you want to add the contact form, typically on the Contact Us or Support page.

Tip: #

• Place the form in a prominent location, such as the top of the contact page or in the footer, for easy access.

---

Step 2: Add a Contact Form Element #

You can easily drag and drop a Contact Form Block onto your page.

How to Add a Contact Form: #

1. Click Add Element or + Add New Section in the editor toolbar.
2. Select Contact Form from the list of elements.
3. Drag the Contact Form Block to the desired location on your page.
4. Click Insert to add the form.

Tip: #

• Use a pre-designed form template to save time and get a polished layout.

---

Step 3: Customize the Form Fields #

You can tailor the contact form fields to gather the information you need from visitors.

How to Edit Form Fields: #

1. Click on the Contact Form Block to open the settings panel.
2. Click Edit Fields to customize the form fields.
3. Add, remove, or modify fields as needed (e.g., Name, Email, Phone Number, Message).
4. Click Save after making changes.

Common Field Types: #

• Text Input: For short responses like names or email addresses.
• Textarea: For longer messages or feedback.
• Dropdown: For multiple-choice questions or selecting topics.
• Checkbox: For terms and conditions or opting into a newsletter.

Tip: #

• Keep the form simple and only ask for essential information to improve submission rates.

---

Step 4: Set Up Form Notifications #

Ensure you receive an email notification each time a visitor submits the form.

How to Enable Notifications: #

1. Click on the Contact Form Block to open the settings.
2. Go to the Notifications tab.
3. Enter the email address where you want to receive form submissions.
4. Customize the email subject line (e.g., “New Contact Form Submission”).
5. Click Save.

Tip: #

• Use a dedicated email address for form submissions (e.g., contact@yourdomain.com) to keep responses organized.

---

Step 5: Customize the Form Design #

Style the contact form to match your website’s branding.

How to Style the Form: #

1. Click on the Contact Form Block to open the Design Settings.
2. Customize the font style, button color, and background color.
3. Adjust the padding and margin for better spacing.
4. Click Save.

Tip: #

• Use a contrasting color for the submit button to make it stand out.

---

Step 6: Set Up a Confirmation Message #

Show a confirmation message or redirect visitors to a thank-you page after form submission.

How to Add a Confirmation Message: #

1. Click on the Contact Form Block and go to the Settings tab.
2. Enable Confirmation Message and enter your text (e.g., “Thank you for reaching out! We’ll get back to you soon.”).
3. Alternatively, select Redirect to URL to send users to a custom thank-you page.
4. Click Save.

Tip: #

• A thank-you page can be used to offer additional information or resources to the visitor.

---

Step 7: Preview and Test the Contact Form #

Before publishing, preview the page to ensure the form looks good and functions properly.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the contact form on both desktop and mobile views.
3. Submit a test message to verify that the form is working and notifications are being received.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 8: Publish the Changes #

Once you’re satisfied with the contact form, publish your updates to make it live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Announce your new contact form in your email newsletter or on social media to encourage feedback.

---

Step 9: Manage Form Submissions #

You can view and manage all form submissions directly in hPanel.

How to Access Submissions: #

1. Log in to hPanel and go to Forms > Submissions.
2. Click on the form name to view the list of submissions.
3. Click on individual entries to see details and respond if needed.
4. Export the submissions as a CSV file for record-keeping or analysis.

Tip: #

• Regularly check form submissions to respond promptly to inquiries.

---

Troubleshooting Tips #

1. Form Not Submitting Properly:
   • Ensure all required fields are filled out.
   • Check the email notification settings and verify the email address.
2. No Email Notifications:
   • Verify that notifications are enabled in the form settings.
   • Check your spam folder and mark the email as “Not Spam.”
3. Form Layout Issues on Mobile:
   • Use the responsive design settings to adjust the form fields for mobile views.
   • Test the form on different devices to ensure it displays correctly.

---

Additional Tips: #

• Keep It Simple: Avoid adding too many fields. Only ask for essential information to increase submission rates.
• Monitor Form Analytics: Use Google Analytics or hPanel’s form statistics to track submissions and optimize the form.
• Regularly Update Your Form: Keep the form fields relevant based on user feedback and inquiries.