Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Add a new field

Last Updated: January 10, 2022

Knowledge Base → Extend Formidable Forms → Formidable Hooks - for Developers → Creating Add-ons → Add a new field

Create a new field type

Fields can be created more easily now by extending our base field classes. This Github repo includes examples to get started.

Add a new field button

Basic

This will add the field to the top section of the fields.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
add_filter( 'frm_available_fields', 'add_basic_field' );
function add_basic_field( $fields ) {
    $fields['new-type'] = array(
        'name' => 'My Field',
        'icon' => 'frm_icon_font frm_pencil_icon', // Set the class for a custom icon here.
    );

    return $fields;
}

Pro

This will add a field to the advanced section of fields.

add_filter( 'frm_pro_available_fields', 'add_pro_field' );
function add_pro_field( $fields ) {
    $fields['new-type'] = array(
        'name' => 'My Field',
        'icon' => 'frm_icon_font frm_pencil_icon', // Set the class for a custom icon here.
    );
    
    return $fields;
}

Hide a specific field button

This will hide specific fields like URL, Name, HTML, Hidden, User ID, reCaptcha fields from the form builder. The frm_single_input_fields filter is required to unset URL and Hidden fields as "single input fields." Otherwise, there will be several warnings getting logged.

add_filter( 'frm_available_fields', 'remove_specific_field_types_from_builder' );
function remove_specific_field_types_from_builder( $fields ) {
	$types_to_remove = array( 'url', 'name', 'html', 'hidden', 'user_id', 'captcha' );
	foreach ( $types_to_remove as $type ) {
		unset( $fields[ $type ] );
	}
	return $fields;
}

add_filter( 'frm_single_input_fields', 'remove_field_types_as_single_input' );
function remove_field_types_as_single_input( $fields ) {
	$types_to_remove = array( 'url', 'hidden' );
	foreach ( $types_to_remove as $type ) {
		$key = array_search( $type, $fields );
		if ( false !== $key ) {
			unset( $fields[ $key ] );
		}
	}
	return $fields;
}

Set default options

Set default settings like the field name for your new field.

add_filter('frm_before_field_created', 'set_my_field_defaults');
function set_my_field_defaults($field_data){
    if ( $field_data['type'] == 'signature' ) {
        $field_data['name'] = 'Signature';

        $defaults = array(
            'size' => 400, 'max' => 150,
            'label1' => 'Draw It',
        );

        foreach ( $defaults as $k => $v ) {
            $field_data['field_options'][ $k ] = $v;
        }
    }

    return $field_data;
}

Show the field in the builder page

add_action('frm_display_added_fields', 'show_the_admin_field');
function show_the_admin_field($field){
    if ( $field['type'] != 'signature' ) {
        return;
    }

    $field_name = 'item_meta['. $field['id'] .']';
    ?>
	
	<div class="frm_html_field_placeholder">
	<div class="howto button-secondary frm_html_field">This is a placeholder for your signature field. <br/>View your form to see it in action.</div>
	</div> <?php
}

Add options to your field

See frm_field_options_form.

Save field options

Format the posted field options so they save correctly.

add_filter( 'frm_update_field_options', 'update_field_options', 10, 3 );
    function update_field_options( $field_options, $field, $values ) {
        if($field->type != 'signature')
            return $field_options;
            
        $defaults = array(
            'label1' => __('Draw It', 'formidable'),
            'label2' => __('Type It', 'formidable'),
            'label3' => __('Clear', 'formidable'),
        );
        
        foreach ($defaults as $opt => $default)
            $field_options[ $opt ] = isset( $values['field_options'][ $opt . '_' . $field->id ] ) ? $values['field_options'][ $opt . '_' . $field->id ] : $default;
            
        return $field_options;
    }

Show the field in your form

Control the output for this field in your form. Note: After adding this hook, the value submitted in this field should save correctly with the rest of the entry. If it does not, something is probably incorrect in this hook.

add_action('frm_form_fields', 'show_my_front_field', 10, 3);
function show_my_front_field( $field, $field_name, $atts ) {
  if ( $field['type'] != 'signature' ) {
    return;
  }
  $field['value'] = stripslashes_deep($field['value']);
?>
<input type="text" id="<?php echo esc_attr( $atts['html_id'] ) ?>" name="<?php echo esc_attr( $field_name ) ?>" value="<?php echo esc_attr($field['value']) ?>" />
<?php
}

Add custom validation

See the frm_validate_field_entry hook for examples of adding validation to a specific field type.

Modify value displayed with shortcode

See the frmpro_fields_replace_shortcodes hook.

Modify value displayed when viewing entry

Use the code below to modify the displayed value when you are viewing an entry on the back-end.

add_filter( 'frm_display_value', 'display_my_field_value', 10, 3 );
function display_my_field_value( $value, $field, $atts ) {
    if ( $field->type != 'signature' || empty( $value ) ) {
        return $value;
    }
	
	$value = '<div style="color:blue;">' . $value . '</div>';
	
	return $value;
}
  • Create a new field type
  • Add a new field button
    • Basic
    • Pro
  • Hide a specific field button
  • Set default options
  • Show the field in the builder page
  • Add options to your field
  • Save field options
  • Show the field in your form
  • Add custom validation
  • Modify value displayed with shortcode
  • Modify value displayed when viewing entry
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable FormsĀ® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews