Elementor Custom Form Hook

### Steps to Add a Custom Hook

1. **Create a Custom Function**
Use the `elementor_pro/forms/new_record` action hook to process the form submission.

2. **Add Code to Your Theme or Plugin**
Add the following code to your theme's `functions.php` file or in a custom plugin:

add_action('elementor_pro/forms/new_record', function ($record, $handler) {
       // Make sure it's processing the correct form
       $form_name = $record->get_form_settings('form_name');
       
       // Change 'custom_form_name' to your Elementor form name
       if ('custom_form_name' !== $form_name) {
           return;
       }

       // Retrieve form fields
       $raw_fields = $record->get('fields');
       $fields = [];
       foreach ($raw_fields as $id => $field) {
           $fields[$id] = $field['value'];
       }

       // Example: Sending email or saving to database
       $to = 'your-email@example.com';
       $subject = 'New Form Submission';
       $message = "Name: {$fields['name']}nEmail: {$fields['email']}nMessage: {$fields['message']}";
       wp_mail($to, $subject, $message);

       // Custom logic can be added here, like saving to a custom table.
   }, 10, 2);

3. **Form Name**
Ensure the `form_name` in your Elementor form settings matches `'custom_form_name'` in the code. You can find the form name in the Elementor editor under **Form Settings**.

4. **Test the Hook**
Submit the form and check the email, database, or whatever action you've hooked into to confirm that it’s working.

### Use Cases

– **Send Form Data to a Third-Party API**
Use the form fields to send data to external APIs, such as Mailchimp, Salesforce, or a custom CRM.
– **Save Form Data to a Custom Table**
Insert the form submission into a custom database table.
– **Trigger Custom Actions**
Run custom logic like generating PDFs, sending SMS notifications, or creating WordPress posts.

Let me know if you'd like help implementing any specific functionality!

### **Step 1: Add an Elementor Form Widget**
1. Drag the **Form

—

### **Step 1: Add the Form Widget**
1. Drag and drop the **Form Widget** onto your page.
2. Configure the form fields:
– Add all the necessary fields.
– Add a **Checkbox** field.
– Add a **Submit** button.

—

### **Step 2: Use the Elementor Section Layout**
1. Set the form layout to **Two Columns**:
– Wrap the form widget in a two-column **Section**.
– Place the form fields in the **left column**.
– Place the **checkbox** and **submit button** in the **right column**.

2. To move individual form elements into specific columns:
– Open the Form Widget settings.
– Add the desired fields and assign **custom classes** for styling.

—

### **Step 3: Customize with Custom CSS**
Add the following CSS in the **Advanced > Custom CSS** section of the form widget (Pro version required) or in the site’s customizer.

.elementor-form-fields-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Adjust the spacing between columns */
}

.elementor-field-group {
  flex: 1; /* Ensures form fields take equal width */
}

.elementor-field-group.elementor-field-type-checkbox,
.elementor-field-group.elementor-button-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start; /* Aligns the button and checkbox */
  flex: 0 0 30%; /* Adjust width as needed */
}

—

### **Step 4: Save and Test**
1. Save the design and preview it.
2. Adjust any spacing or alignment issues as needed using Elementor’s spacing and padding options.

This method ensures the form is clean, responsive, and aligned as per your requirements.

—

### **Method 1: Using Elementor's Built-in Description**
1. **Edit the Form Field:**
– Select the **Form Widget**.
– Click on the specific form field (e.g., Text, Email, etc.) you want to add a description to.

2. **Add a Description:**
– Scroll down to the **Advanced** section of the field's settings.
– Find the **Field Description** option.
– Enter your description (e.g., "Please enter your full name").

3. **Save and Test:**
– The description will appear below the field automatically.

—

### **Method 2: Custom Description with CSS**
If you want a more customized description (e.g., specific styling or positioning), you can add a custom HTML or CSS class to the field and use CSS to style it.

#### Steps:
1. **Edit the Form Field:**
– Open the settings for the field where you want to add a description.
– Add a **Custom CSS Class** (e.g., `custom-description`) in the field's Advanced settings.

2. **Add a Description with HTML or CSS:**
– Use the Elementor's **HTML Widget** to place your description below the form.
– Or add a custom description in the site's custom CSS:

.elementor-field.custom-description::after {
  content: "This is your custom description.";
  display: block;
  font-size: 14px;
  color: #666; /* Adjust color as needed */
  margin-top: 5px; /* Add space below the field */
}

3. **Save and Test:**
– Add some sample text to test the description placement.

—

### **Method 3: Add a Rich Text Block Below the Form Field**
If you want to include more detailed descriptions or formatted text (like links or images):
1. Add a **Text Editor Widget** directly below the form.
2. Place your description there.
3. Adjust the spacing using Elementor’s **Margin/Padding** settings.

—

### **Best Practices**
– Use the **Field Description** feature for simple text.
– Use **CSS** or additional widgets for complex or styled descriptions.
– Ensure that the descriptions are accessible and clear to users.

—

### **Option 1: Use the Built-in Field Description**
1. **Edit the Form Widget:**
– Open the **Form Widget** in Elementor.

2. **Add a Description for Each Field:**
– Click on each field to edit it.
– Scroll to the **Advanced** section for the field.
– Locate the **Field Description** option.
– Enter your description for that specific field.

3. **Style the Descriptions:**
– Go to the **Style Tab** of the Form Widget.
– Under **Field Description**, customize the text color, typography, and spacing.

—

### **Option 2: Custom CSS for More Control**
If you want custom placement or styling, you can use CSS:

1. **Assign a Class to the Form Fields:**
– Go to the Advanced settings of each field and assign a custom CSS class (e.g., `custom-field-desc`).

2. **Write CSS for Descriptions:**
– Add the following CSS to your Elementor Custom CSS area or WordPress Customizer:

.elementor-field.custom-field-desc::after {
  content: attr(data-desc); /* Uses the field's description */
  display: block;
  font-size: 14px; /* Adjust size */
  color: #666; /* Adjust color */
  margin-top: 5px; /* Add spacing below the field */
}

.elementor-field[data-desc=""]::after {
  content: none; /* Ensures empty descriptions are not displayed */
}

3. **Add Descriptions via HTML Attribute:**
– Add the `data-desc` attribute to your fields dynamically (this might require custom code or a plugin for Elementor).

—

### **Option 3: Add Descriptions Manually with HTML**
If you need completely custom descriptions:

1. Use a **Text Editor Widget** or **HTML Widget** below each field.
2. Add your descriptions as separate blocks.
3. Adjust the spacing using Elementor’s **Margin and Padding** controls.

—

### Final Notes:
– **Built-in descriptions** are the easiest option for standard forms.
– Use **CSS or custom HTML** if you need a tailored design.
– Ensure your descriptions are clear and accessible for all users.

—

### **Option 1: Use the Form Widget's Built-in Field Description**
1. **Edit the Form Widget:**
– Select the form and click on the field you want to add a description to.

2. **Add Descriptions for Each Field:**
– Scroll to the **Advanced** tab of the field's settings.
– Locate the **Field Description** option.
– Enter the desired text (e.g., "Please enter your email address").

3. **Save and Style:**
– Use the **Style > Field Description** options to adjust typography, color, and spacing for the descriptions.

This method works directly within the Form Widget without needing extra widgets.

—

### **Option 2: Custom HTML/CSS for More Control**
If the built-in description doesn't meet your needs, you can use custom CSS:

#### Steps:
1. **Assign a Class to Fields:**
– Go to the **Advanced** tab of the form field.
– Add a **Custom CSS Class**, e.g., `field-with-desc`.

2. **Add Custom Descriptions with CSS:**
Add this CSS in Elementor's **Custom CSS** section or in your WordPress theme:

.elementor-field-group.field-with-desc {
  position: relative;
}

.elementor-field-group.field-with-desc::after {
  content: "This is a custom description.";
  display: block;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

3. **Customize the Description:**
– Replace `This is a custom description.` with your actual description text for each field.

—

### **Option 3: Use HTML Fields for Descriptions**
If you need more flexibility:
1. **Edit the Form Widget:**
– Add an **HTML field** from the Form Widget's **Fields** list.
– Drag it to the position **below the field** you want a description for.

2. **Add Description Text:**
– In the HTML field, type your description (e.g., `Please enter your full name.`).

3. **Style the HTML Field:**
– Go to **Advanced > Custom CSS** or the global **Style** tab to customize its appearance.

—

### **Option 4: Use a Custom Form Layout**
If none of the above works, you might need to customize the form with a plugin or custom shortcode.

1. **Use a Form Plugin:**
– Plugins like **WPForms** or **Ninja Forms** allow greater customization, including descriptions under fields.

2. **Add a Custom Elementor Form Hook:**
– If you're comfortable with code, use Elementor's form rendering hooks to append descriptions programmatically.

—

These methods ensure you can add descriptions under fields, even with Elementor's constraints. Let me know if you need help implementing any specific approach!