Wordpress - Contact Form 7 number field step and required attribute

Question

I have problems adding required and step attributes in Custom Form 7 number fields. I have tried using two different methods in the same form and have two different problems

I am trying to add a required number field and a step size of 0.05.

1) [number* number-491 id:abc min:0 max:100000 step:0.05 placeholder “CMP*”] – This honors the step size attribute but NOT the step:0.05

2) <input type=”number” name=“CMP” placeholder=“CMP*” min=0 max=100000 step=“0.05” required/> – This honors the step size attribute but not the required attribute.

I am OK with using either or an alternate method, all I want is a number field that will be a required field and a step size of 0.05.

Problem is that, the number type in contact form 7 does not accept float (decimal) as value for step attribute. Int (integer) is hardcoded in the tag generation code. Thats why when you set the step value as "0.05" it does not print the step attribute in the code of number field. — zipkundan

zipkundan zipkundan · Accepted Answer · 2018-11-11T22:51:37

You can achieve this via customization. Use following code in your theme's or child-theme's functions.php file.

    function wpcf7_number_floating_step_form_tag_handler( $tag ) {
    if ( empty( $tag->name ) ) {
        return '';
    }
    if( $tag->type == 'numberstepfloat*' ){
        $tag->type = 'number*';
        $tag->basetype = 'number';
    }

    $validation_error = wpcf7_get_validation_error( $tag->name );

    $class = wpcf7_form_controls_class( $tag->type );

    $class .= ' wpcf7-validates-as-number-decimal';

    if ( $validation_error ) {
        $class .= ' wpcf7-not-valid';
    }

    $atts = array();
    $atts['class'] = $tag->get_class_option( $class );
    $atts['id'] = $tag->get_id_option();
    $atts['tabindex'] = $tag->get_option( 'tabindex', 'signed_int', true );
    $atts['min'] = $tag->get_option( 'min', 'signed_int', true );
    $atts['max'] = $tag->get_option( 'max', 'signed_int', true );
    $atts['step'] = $tag->get_option( 'step', '', true );

    if ( $tag->has_option( 'readonly' ) ) {
        $atts['readonly'] = 'readonly';
    }

    if ( $tag->is_required() ) {
        $atts['aria-required'] = 'true';
    }

    $atts['aria-invalid'] = $validation_error ? 'true' : 'false';

    $value = (string) reset( $tag->values );

    if ( $tag->has_option( 'placeholder' ) || $tag->has_option( 'watermark' ) ) {
        $atts['placeholder'] = $value;
        $value = '';
    }

    $value = $tag->get_default_option( $value );

    $value = wpcf7_get_hangover( $tag->name, $value );

    $atts['value'] = $value;

    if ( wpcf7_support_html5() ) {
        $atts['type'] = $tag->basetype;
    } else {
        $atts['type'] = 'text';
    }

    $atts['name'] = $tag->name;

    $atts = wpcf7_format_atts( $atts );

    $html = sprintf(
        '<span class="wpcf7-form-control-wrap %1$s"><input %2$s />%3$s</span>',
        sanitize_html_class( $tag->name ), $atts, $validation_error );

    return $html;
}

function custom_add_form_tag_floatingnumber() {
    wpcf7_add_form_tag( array( 'numberstepfloat', 'numberstepfloat*' ), 'wpcf7_number_floating_step_form_tag_handler', array( 'name-attr' => true ) );
}
add_action( 'wpcf7_init', 'custom_add_form_tag_floatingnumber' );

function custom_numberstepfloat_validation($result, $tag){
    $customnumfield = $tag->name;
    if($_POST[$customnumfield]=='' || $_POST[$customnumfield]==null){
        $result->invalidate( $tag, "This field is required." );
    }
    return $result;
}
add_filter( 'wpcf7_validate_numberstepfloat*', 'custom_numberstepfloat_validation', 20, 2 );

What above code does is, ads a custom form tag "numberstepfloat" which actually outputs input type number but includes the step attribute. Another function in the code ads validation for the custom tag. Validation only checks if the value is present. If not invalidates the field.

Similar to native tags in Contact Form 7, the custom tag is to be used as follows.

[numberstepfloat* number-491 min:0 max:100000 step:0.05 id:abc placeholder "CMP*"]

Hope this helps.

Wordpress - Contact Form 7 number field step and required attribute

1 Answers