How to make custom form-tag in contact form 7 requ

Question

So i make custom form-tag in contact form 7! It is a drop down with list of my courses and now I want to make it required because that is the main thing in whole form. So can someone give me a tip how to do that?

When I do the [myCustomField* course-name class:custom-field]

It does not working with * So if someone can help it will be great!

Answer 1

I have been working on this myself this afternoon and I do not think Mahmoud has added everything that is needed to get the validation working well and the messages showing up.

using what I have learnt from the posts on contact form 7 here: https://contactform7.com/2015/01/10/adding-a-custom-form-tag https://contactform7.com/2015/02/27/using-values-from-a-form-tag/

and looking at this file in the plugin: contact-form-7/modules/select.php which helped a lot.

I think this will work better and needs to be added to your functions.php file in your child-theme.

add_action( 'wpcf7_init', 'custom_add_form_tag_myCustomField' );

function custom_add_form_tag_myCustomField() {
    wpcf7_add_form_tag( array( 'myCustomField', 'myCustomField*' ), 
'custom_myCustomField_form_tag_handler', true );
}

function custom_myCustomField_form_tag_handler( $tag ) {

    $tag = new WPCF7_FormTag( $tag );

    if ( empty( $tag->name ) ) {
        return '';
    }

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

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

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

    $atts = array();

    $atts['class'] = $tag->get_class_option( $class );
    $atts['id'] = $tag->get_id_option();

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

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

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

    $atts = wpcf7_format_atts( $atts );

    $myCustomField = '';

    $query = new WP_Query(array(
        'post_type' => 'CUSTOM POST TYPE HERE',
        'post_status' => 'publish',
        'posts_per_page' => -1,
        'orderby'       => 'title',
        'order'         => 'ASC',
    ));

    while ($query->have_posts()) {
        $query->the_post();
        $post_title = get_the_title();
        $myCustomField .= sprintf( '<option value="%1$s">%1$s</option>', 
esc_html( $post_title ) );
    }

    wp_reset_query();

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

    return $myCustomField;
}

That is how we create the custom tag. The important differences here are the addition of the $validation_error variables as wells the aria-required and aria-invalid data. It is also important to include the $validation_error in the final output so that we can see the validation messages being created.

Then to finish it off we need to add some validation via filters.

There is no documentation on this yet, but I used the functions from the select.php and altered them to what I needed.

/* Validation filter */

add_filter( 'wpcf7_validate_myCustomField', 'wpcf7_myCustomField_validation_filter', 10, 2 );
add_filter( 'wpcf7_validate_myCustomField*', 'wpcf7_myCustomField_validation_filter', 10, 2 );

function wpcf7_myCustomField_validation_filter( $result, $tag ) {
    $tag = new WPCF7_FormTag( $tag );

    $name = $tag->name;

    if ( isset( $_POST[$name] ) && is_array( $_POST[$name] ) ) {
        foreach ( $_POST[$name] as $key => $value ) {
            if ( '' === $value ) {
                unset( $_POST[$name][$key] );
            }
        }
    }

    $empty = ! isset( $_POST[$name] ) || empty( $_POST[$name] ) && '0' !== $_POST[$name];

    if ( $tag->is_required() && $empty ) {
        $result->invalidate( $tag, wpcf7_get_message( 'invalid_required' ) );
    }

    return $result;
}

This code should also go in your functions.php file just under the code for the custom CF7 tag.

Here the filter's first string $tag should match with the class that is being generated in the custom CF7 tag so if your custom tag->type = 'myCustomField' then the $tag of the filter must include the name, like so wpcf7_validate_myCustomField as well as the required version of it, wpcf7_validate_myCustomField*.

I hope that helps anyone else looking for this.

If you want even more of the options available from the backend of Contact Form 7 check the select.php file as it lays it out quite nicely on how to get each option and include it.

Answer 2

You can use [select*] to output a required drop-down menu.

[select* course-name include_blank "English" "Math"]

Check https://contactform7.com/checkboxes-radio-buttons-and-menus/

EDIT:

So you have your own shortcode [myCustomField]. To make two versions of your shortcode as [myCustomField] and [myCustomField*] you have to pass both shortcodes to your function as the following:

add_action( 'wpcf7_init', 'wpcf7_add_form_tag_mycustomfield' );

function wpcf7_add_form_tag_mycustomfield() {
    wpcf7_add_form_tag( array( 'myCustomField', 'myCustomField*'),
        'wpcf7_mycustomfield_form_tag_handler', array( 'name-attr' => true ) );
}

function wpcf7_mycustomfield_form_tag_handler( $tag ) {
    $tag = new WPCF7_FormTag( $tag );

    if ( empty( $tag->name ) ) {
        return '';
    }

    $atts = array();

    $class = wpcf7_form_controls_class( $tag->type );
    $atts['class'] = $tag->get_class_option( $class );
    $atts['id'] = $tag->get_id_option();

    $atts['name'] = $tag->name;
    $atts = wpcf7_format_atts( $atts );

    $html = sprintf( '<your-tag %s></your-tag>', $atts );
    return $html;
}

Then, you can use it:

[myCustomField course-name class:custom-field]

or

[myCustomField* course-name class:custom-field]

References:

• https://contactform7.com/2015/01/10/adding-a-custom-form-tag
• https://contactform7.com/2015/02/27/using-values-from-a-form-tag/