/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Section Contact Form

The "Contact Form" section in Lagom WHMCS Website Builder (opens new window), allows you to display a fully customizable contact form on your website, letting your customers easily reach out to you via email or WHMCS ticket. You can adjust the section layout, control the form fields, and include a graphic element alongside the form content.

This section is ideal for providing clear and accessible communication channels on landing pages, support pages, or dedicated contact pages.

# Section Description

  1. Caption – Optional short text displayed above the title, used to describe the section in a subtle way.
  2. Title – Main heading of the section. Helps users understand the purpose of the form at a glance.
  3. Subtitle – Rich-text field with formatting options (bold, italic, links, lists, etc.). Use it to provide additional information or instructions related to the form.
  4. Title and subtitle position – Choose where the caption, title, and subtitle will be displayed. By default, the caption, title, and subtitle are placed together with the contact form. Use this setting if you want to reposition the text.
    • "Above contact form" – Displays text content directly above the form box.
    • "Above section content" – Displays text content above the entire section, including graphics.

By default, the caption, title, and subtitle are placed together with the contact form. Use this setting if you want to position the text above the full section instead.

# Section Settings

This section includes all the options you need to customize both the look and functionality of your Contact Form. These settings let you decide how your form behaves, what type of form you want to use, and how it fits your website’s design. Adjusting them ensures your customers can easily reach you while maintaining a consistent and professional appearance across your website.

# Contact Form Type

This setting allows you to choose the type of contact form you want to display. Each form type serves a slightly different purpose, helping you match the form to your preferred communication method. Once pressed, a dropdown will appear with the following options:

# Type 1: WHMCS Email Contact

This type closly relays on the standard WHMCS contact form to send messages directly to a configured email address in your WHMCS system. It is a simple and effective option for handling general inquiries without using the ticket system.

The email address connected to this form can be configured in your WHMCS admin area under Configuration → System Settings → General Settings → Mail → Presales Contact Form Email. All messages submitted through the form will be sent to that address.

After adjusting your WHMCS settings, open the page containing the contact form in RS Themes → Pages and save it again.
This ensures that all configuration changes are properly applied and visible on the frontend.

# Type 2: WHMCS Ticket

This form integrates directly with the WHMCS support ticket system, allowing customers to submit tickets that appear in your support departments. It is ideal for organizing communication and ensuring all requests are tracked in your WHMCS panel.

Before using this option, make sure your Support Departments are configured correctly.

After adjusting your WHMCS settings, open the page containing the contact form in RS Themes → Pages and save it again.
This ensures that all configuration changes are properly applied and visible on the frontend.

# Assigned Deparment

Select which support department should receive messages sent through this form. The dropdown will list all available WHMCS departments. Keep in mind that if a department is not visible to guests, it will not be available for users who are not logged in.

Be aware that departments marked as "Clients Only" are visible exclusively to logged-in users, so ensure this option matches your intended visibility for each contact form.

# Hide non-required fields

Enable this option to simplify the contact form by hiding optional WHMCS fields such as priority, or attachments, creating a cleaner and more user-friendly layout.

Frontend:

# Display WHMCS Custom Fields

Enable this setting to include any custom fields defined in WHMCS for the selected department. It is useful when you need to collect additional details such as a domain name, account ID, or other case-specific information. Custom fields have to be configured in WHMCS system Support Departments settings.

Frontend:

# Contact Form Style

This setting defines the visual appearance of the contact form container. You can choose from several predefined layouts to ensure the form blends well with your website’s overall design and maintains a consistent look.

# Frontend:

  • "Default"
  • "Boxed"
  • "Bordered"

# Section Graphic

This option allows you to add a graphic next to your contact form, helping you make the section more visually engaging and aligned with your brand identity. Using a graphic can draw attention to the form, make your page look more professional, and create a stronger visual connection with your visitors.

  1. Graphic Type – Choose how the graphic is displayed:
    • "Type 1 – Predefined Illustration" – Displays one of the predefined images available in the Lagom asset library. These illustrations are fully responsive and work well out of the box.
    • "Type 2 – Custom graphic in predefined container" – Allows you to upload your own image, which will be displayed in a container optimized for custom graphics.
    • "Type 3 – None" – disables the graphic.
  2. Graphic Position – Choose the graphic placement - "Left" or "Right" side of the contact form.
  3. Separate graphic from the contact form – When enabled, the graphic is placed outside the form container and does not share the same padding or background.
  4. Graphic – Upload or assign the graphic asset using the "Assign Graphic" button.

# Advanced Section Settings

  1. Combine This Section With Section Below - When activated it will remove bottom padding and border from this section. This setting was designed to combine two sections into single section - learn more.
  2. Overlay Section Below on This Section - This setting pull below section over this section, moreover it adds additional bottom padding. - learn more.
  3. Disable Background for "Predefined Lagom Illustration" - Option prepared for "Background Types" where Lagom shape is added to the background, allows to disable the default shape placed behind SVG illustrations - learn more.
  4. Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific section - learn more.
  5. Section Custom Class - This setting assign custom classes to the section container - learn more.