Example: Adding custom settings to eForm Forms

With the help of FSQM’s built in APIs, it is possible to create and store custom settings variables for individual forms. Please check the snippet below to get started.

Snippet

<?php

class FSQM_Add_Custom_Settings {
	/**
	 * Reference to IPT_FSQM_Form_Elements_Admin object
	 * This is stored during settings filter
	 */
	public $that;

	/**
	 * Constructor
	 * It essentially adds all the necessary filters
	 */
	public function __construct() {
		// Add the filters
		add_filter( 'ipt_fsqm_filter_default_settings', array( $this, 'add_settings_variable' ), 10 );
		add_filter( 'ipt_fsqm_admin_tab_settings', array( $this, 'add_settings_admin_ui' ), 10, 2 );
	}

	/**
	 * Add our custom variables to the default FSQM settings
	 *
	 * @param      array   $settings  Associative array of settings
	 *
	 * @return     array
	 */
	public function add_settings_variable( $settings ) {
		// Let us add some variables to the default settings
		// For this demo we would add an associative array
		$settings['custom'] = array(
			'options' => array(
				'bool' => true,
				'singleop' => 'op1', // For radio input
				'multipleop' => array(), // Whenever adding checkbox related options, always add an empty array. This is just how FSQM backend works
				                         // You can look into IPT_FSQM_Form_Elements_Base::merge_elements and you'd understand why
			),
			'inputs' => array(
				'oneliner' => 'This is some text',
				'multiliner' => "This is some more\r\nWith multiple line",
			),
		);

		return $settings;
	}

	/**
	 * Filter settings tab variable to add our own tab
	 *
	 * @param      array   $tab_settings  Associative array of tab variables
	 * @param      object  $context       Reference to the calling IPT_FSQM_Form_Elements_Admin variable
	 *
	 * @return     array
	 */
	public function add_settings_admin_ui( $tab_settings, $context ) {
		// First we add a new tab
		// to provide UI in order to manage our settings variables
		$tab_settings[] = array(
			'id' => 'ipt_fsqm_form_custom', // HTML ID of the tab
			'label' => __( 'Custom Settings', 'domain' ), // Label of the tab
			'callback' => array( $this, 'settings_admin_ui_cb' ), // Callback function to populate TAB UI
			'has_inner_tab' => true, // If is has vertical tabs inside it
			                         // For this this demo, we say yes"
		);

		// Store the reference to the object
		$this->that = $context;

		return $tab_settings;
	}

	public function settings_admin_ui_cb() {
		// Now let us create two new horizontal tabs
		// Each one of them would edit settings for a set inside our new settings vairable
		$hor_tabs = array();

		$hor_tabs[] = array(
			'id' => 'ipt_fsqm_form_custom_options',
			'label' => __( 'Selectables', 'domain' ),
			'callback' => array( $this, 'settings_options' ),
		);

		$hor_tabs[] = array(
			'id' => 'ipt_fsqm_form_custom_inputs',
			'label' => __( 'Writables', 'domain' ),
			'callback' => array( $this, 'settings_inputs' ),
		);

		// Call the builtin UI element
		// @see IPT_Plugin_UIF_Admin
		$this->that->ui->tabs( $hor_tabs, false, true );

	}

	public function settings_options() {
		// Get our options variables
		$op = $this->that->settings['custom']['options'];

		// Set the radio/checkbox items
		$items = array(
			0 => array(
				'value' => 'op1',
				'label' => __( 'Option 1' ),
			),
			1 => array(
				'value' => 'op2',
				'label' => __( 'Option 2' ),
			),
			2 => array(
				'value' => 'op3',
				'label' => __( 'Option 3' ),
			),
			3 => array(
				'value' => 'op4',
				'label' => __( 'Option 4' ),
			),
		);
		// 'options' => array(
		// 	'bool' => true,
		// 	'singleop' => 'op1', // For radio input
		// 	'multipleop' => array(), // Whenever adding checkbox related options, always add an empty array. This is just how FSQM backend works
		// 	                         // You can look into IPT_FSQM_Form_Elements_Base::merge_elements and you'd understand why
		// ),

		// Now populate the table
		?>
<table class="form-table">
	<tbody>
		<tr>
			<th><?php $this->that->ui->generate_label( 'settings[custom][options][bool]', __( 'Toggle Element', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->toggle( 'settings[custom][options][bool]', __( 'Yes', 'domain' ), __( 'No', 'domain' ), $op['bool'] ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Some inline help', 'domain' ) ); ?>
			</td>
		</tr>
		<tr>
			<th><?php $this->that->ui->generate_label( 'settings[custom][options][singleop]', __( 'Radio Element', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->radios( 'settings[custom][options][singleop]', $items, $op['singleop'] ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Some inline help', 'domain' ) ); ?>
			</td>
		</tr>
		<tr>
			<th><?php $this->that->ui->generate_label( 'settings[custom][options][multipleop]', __( 'Checkbox Element', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->checkboxes( 'settings[custom][options][multipleop][]', $items, $op['multipleop'] ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Some inline help', 'domain' ) ); ?>
			</td>
		</tr>
	</tbody>
</table>
		<?php
	}

	public function settings_inputs() {
		// Get our settings
		$op = $this->that->settings['custom']['inputs'];

		// Now populate the table
		// 'inputs' => array(
		// 	'oneliner' => 'This is some text',
		// 	'multiliner' => "This is some more\r\nWith multiple line",
		// ),
		?>
<table class="form-table">
	<tbody>
		<tr>
			<th><?php $this->that->ui->generate_label( 'settings[custom][inputs][oneliner]', __( 'Oneline Input', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->text( 'settings[custom][inputs][oneliner]', $op['oneliner'], __( 'Write here', 'domain' ) ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Some inline help', 'domain' ) ); ?>
			</td>
		</tr>
		<tr>
			<th><?php $this->that->ui->generate_label( 'settings[custom][inputs][multiliner]', __( 'Multiline Input', 'domain' ) ); ?></th>
			<td>
				<?php $this->that->ui->textarea( 'settings[custom][inputs][multiliner]', $op['multiliner'], __( 'Write here', 'domain' ) ); ?>
			</td>
			<td>
				<?php $this->that->ui->help( __( 'Some inline help', 'domain' ) ); ?>
			</td>
		</tr>
	</tbody>
</table>
		<?php
	}
}

$mycustom_settings = new FSQM_Add_Custom_Settings();

Output

The snippet above, when inserted properly in your plugin, would generate the following output.

Populated Horizontal tab with options elements

Populated Horizontal tab with options elements

Populated Horizontal tab with input elements

Populated Horizontal tab with input elements

Swashata has written 257 articles

Hi there, I am the Lead Developer at WPQuark.com. I love to create something beautiful for WordPress and here I write about how to use them. When I am not working, usually I am doing a number of other creative things ;).