Formidable Forms

The Most Advanced WordPress Forms Plugin and Form Builder

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Add a new field

Last Updated: April 28, 2020

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

Add a new field button

Basic

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

add_filter('frm_available_fields', 'add_basic_field');
function add_basic_field($fields){
	$fields['signature'] = __('Signature'); // the key for the field and the label
	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['signature'] = __('Signature'); // the key for the field and the label
	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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

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;
}
  • Add a new field button
    • Basic
    • Pro
  • 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
Install Formidable Lite

Using WordPress and want to get Formidable Forms for free?

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

Top Features

  • Front End Editor
  • Repeating Fields
  • Views from Entries
  • Calculator Forms
  • Conditional Logic
  • Visual Form Styler
  • Form Templates
  • User Submitted Posts
  • File Upload Forms
  • Spam Protection
  • Multi Page Forms
  • Surveys & Polls
  • Form Graphs & Charts
  • Save and Continue
  • Mobile Forms
  • Stripe Forms
  • PayPal Forms
  • WooCommerce Forms
  • MailChimp Forms
  • User Registration
  • Signature Forms
  • Bootstrap Forms
  • Quiz Maker
  • Zapier Forms
  • Salesforce Forms
  • HubSpot Forms
  • API Webhooks
  • Multilingual Forms
  • Directories

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2021 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