Contact Form

The Contact Form element in PixeBuilder provides a comprehensive toolset for creating custom user interaction forms. It combines granular field-level control with global styling and advanced integration options like email routing and reCAPTCHA.

You can dynamically build your form directly within the editor interface:

Adding New Fields: Click the plus (+) icon located at the bottom of the form element to insert new input fields.

Managing fields/Field-Level Settings: Click the icon in the top-right corner of an individual field to open the Field Settings drawer.

• • Type: Define the input type, such as Text, Textarea, Email, Number, Tel, Select, Select Multiple, Acceptance, Checkbox, Radio Button, Date, Time, Password, Hidden or Upload.

  • Width: Set the field width using the col, %, px, or auto value.

  • Content: Customize the Name, Label, and Placeholder text.
    The Name field set here can be used as a shortcode in the Custom Message option(see below).

  • Requirements: Toggle Required status and the Show Asterisk indicator.

  • Order: Use Bottom Order to numerically define the vertical position of the field.

Duplicating Fields : Click the icon in the top-right corner of an individual field and click the Copy icon to duplicate or copy a field.

The sidebar panel provides global design controls to ensure your contact form maintains a consistent look and feel across all device types.

Input Style

Fine-tune the appearance of the form's data entry fields:

• State Selection: Customize different styles for Normal, Hover, and Active interaction states.

• Labels: Use the Show Label toggle to display or hide field titles.

• Field Dimensions: Set specific values for Input Height, Textarea Height, and Select Multi Height.

• Internal Padding: Independently adjust the Input Padding and Select Padding for all four sides.

• Select Icons: Customize the Select Icon Offset and Select Icon Color for dropdown fields.

• Color Configuration: Access individual color pickers for the Label, Input text, Placeholder text, Choice items, Asterisk, and system-generated Success/Error Messages.

• Advanced Field Style: Click the Input Field Style icon to apply custom Color, Border, and Shadow properties to the input containers.

Input Spacing

Control the breathing room between different form elements:

• Label Gap: Adjust the distance between the label text and the input field.

• Grid Spacing: Set the Row Gap and Column Gap to organize fields in multi-column layouts.

• Choice Spacing: Fine-tune the Choice Text Gap and the overall Choices Gap for radio buttons or checkboxes.

• Message Spacing: Control the margin around form feedback messages.

Button Style

Style the primary "Submit" or action button:

• Content: Edit the Button Text and provide an Aria Label for improved accessibility.

• Icons: Add an Image/Icon and customize its Icon Style.

• Layout: Set the Container Width and choose an Alignment (Left, Center, Right).

• Dimensions: Customize Button Width, Button Height, and internal Padding.

• Visuals: Set unique Text Colors and access the Button Style icon to apply custom Color, Border, and Shadow properties to the button.

Typography & Item Spacing

• Typography Presets: Assign independent font styles for the Label, Input, Choice, Message, and Button elements.

• Global Layout: Adjust the overall Padding and Margin for the entire form element.

Click the settings (gear) icon on the form element to access advanced backend functionality:

• Email Settings: Configure the Subject, Email To, From Name, and Reply To addresses. You can also choose the email Type (e.g., Plain Text or HTML).

• Custom Message: Enable this option to receive a custom message in your email. Use Shortcodes from the form fields to get the relevant information.

• Apps (Integrations): Enable and manage API keys for third-party services like Mailchimp and Active Campaign, with more integrations currently in development.
  For more detailed information on setting up these connections, please refer to the Newsletter Form & Integration guide.

• reCAPTCHA: Toggle Turn reCAPTCHA On to protect your form from spam.

• Messages: Customize the feedback text shown to users, including the Success Message, Wrong Format Warning, and Server Error Message.

Server Configuration: Please ensure your server is correctly configured to send emails. If your emails are not being delivered, you may need to use a dedicated SMTP plugin to handle email transmission.