Add form fields by code

[fabian-website]

Hi,

simple question: Did anyone already add fields to an Elementor form by php code? My idea was using a HTML field and costumize the output with the filter elementor_pro/forms/render/item/html so I can add unlimited inputs to this field. It's working in the frontend but the values of the new fields won't be sent. Any suggestions what to do?

[OAGMedia]

have the same question - programmed a dropdown menu, but the information won't be transferred into the submission or email. Looking forward getting some help here

[fabian-website]

I have a solution by using the filter elementor_pro/forms/render/item/html. Create an html field in Elementor form builder. After that search for the id of the new field in the frontend. Use the dev tools of your browser and look for the css class like elementor-field-group-field_b282f4a. The b282f4a is the id of your new field.

Then in your functions.php write something like that:

add_filter('elementor_pro/forms/render/item/html', 'add_acf_fields', 10, 3);
function add_acf_fields($item, $item_index, $form) {
		if($item['_id'] == 'b282f4a') {
		$html = '<select name="form_fields[field_b282f4a]" class="elementor-test-field" title="Some text...">
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
		</select>';
		$item['field_html'] = $html;
	}

	return $item;
}

It's very important that you use the name attribute with the id of your new field. That should work. If you want to add more fields by code but you don't want to add an html field for each field you can use an array in the name attribute.

Example:

add_filter('elementor_pro/forms/render/item/html', 'add_acf_fields', 10, 3);
function add_acf_fields($item, $item_index, $form) {
		if($item['_id'] == 'b282f4a') {
		$html = '<select name="form_fields[field_b282f4a][]" class="elementor-test-field" title="Some text...">
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
		</select>
<input name="form_fields[field_b282f4a][]" type="text" class="elementor-test-field-2" title="Text2">';
		$item['field_html'] = $html;
	}

	return $item;
}

[perks98]

Disclaimer: I may not know what I am on about around this topic as I'm not an expert (so just trying to help if I can) but from my understanding I think you would be best off registering your new field by extending \ElementorPro\Modules\Forms\Fields\Field_Base class in PHP, as I think that way you can call in the values like you would with any other Elementor field for the email template. I haven't personally tried it myself. Example here with other info around form fields: https://developers.elementor.com/docs/form-fields/simple-example/

[fabian-website]

Already tried but the problem is the same. If you want to use more than one input or select you have to use the name attribute with an array inside your render function.

[perks98]

Hi @fabian-website,
I'm not sure what you are looking todo. If you use the following code in a plugin for me I can create a custom select field that works:

Plugin code click to view

Create plugin folder named: elementor-custom-extra-form-fields-1
Create sub-folder named: form-fields

File 1: elementor-custom-extra-form-fields-1/elementor-custom-extra-form-fields-1.php

<?php
/**
 * Plugin Name: Elementor Custom Extra Form Fields 1
 * Description: Custom addon that adds a few custom fields to Elementor Form Widget.
 * Plugin URI:  #
 * Version:     1.0.0
 * Author:      Elementor Developer
 * Author URI:  #
 * Text Domain: elementor-extra-form-additions
 *
 * Elementor tested up to: 3.17.0
 * Elementor Pro tested up to: 3.17.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}


function add_new_form_fields( $form_fields_registrar ) {

	require_once( __DIR__ . '/form-fields/custom-select.php' );

	$form_fields_registrar->register( new \Elementor_Custom_Select_1_Field() );

}
add_action( 'elementor_pro/forms/fields/register', 'add_new_form_fields' );

File 2: elementor-custom-extra-form-fields-1/form-fields/custom-select.php

<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}


class Elementor_Custom_Select_1_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {

	public function get_type() {
		return 'custom-select-1';
	}

	public function get_name() {
		return esc_html__( 'Custom Select 1', 'elementor-extra-form-additions' );
	}
	
		public function update_controls( $widget ) {
		$elementor = \ElementorPro\Plugin::elementor();

		$control_data = $elementor->controls_manager->get_control_from_stack( $widget->get_unique_name(), 'form_fields' );

		if ( is_wp_error( $control_data ) ) {
			return;
		}

		$widget->update_control( 'form_fields', $control_data );
	}


	public function render( $item, $item_index, $form ) {
		$form->add_render_attribute(
			'input' . $item_index,
			[
				'class' => 'elementor-field-textual elementor-field',
				'title' => esc_html__( 'Select Numbers', 'elementor-extra-form-additions' ),
			]
		);

		echo '<select ' . $form->get_render_attribute_string( 'input' . $item_index ) . '>
            <option value="1">Option 1</option>
		    <option value="2">Option 2</option>
		</select>';
	}

	
	public function __construct() {
		parent::__construct();
		add_action( 'elementor/preview/init', [ $this, 'editor_preview_footer' ] );
	}


	public function editor_preview_footer() {
		add_action( 'wp_footer', [ $this, 'content_template_script' ] );
	}

	public function content_template_script() {
		?>
		<script>
		jQuery( document ).ready( () => {

			elementor.hooks.addFilter(
				'elementor_pro/forms/content_template/field/<?php echo $this->get_type(); ?>',
				function ( inputField, item, i ) {
					const fieldId      = `form_field_${i}`;
					const fieldClass   = `elementor-field-textual elementor-field ${item.css_classes}`;

					return `<select id="${fieldId}" class="${fieldClass}">
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
					</select>`;
				}, 10, 3
			);

		});
		</script>
		<?php
	}


}

[fabian-website]

What I'm looking for is some code where I can simply add fields to a form (not field types!). For example:

$form->add_field($id, $type, $label, $content);

$form->add_field('t326f4a', 'text', 'Testfield');

[perks98]

That's the main way to add a field that Elementor has documented. From checking Elementors code to add field types you would use their filter apply_filters( 'elementor_pro/forms/field_types', $field_types ); which is different to the code I provided. Registering the fields through the main means makes sure they are considered on submission. Again I'm not an expert, hopefully someone else can point you to the right place.

Are you trying to add many fields based on conditions or the page itself?