Credit Card type 16 digit form field

Hello @oxidesigns

Ultimate member does not have a credit card style field, But you can use Text Box or Number field and add a custom field validation to validate data. Please check this link regarding custom field validation.

Thanks Aswin, I figured that might be an option.

Is there a way to add numbers before the field like the picture below:

View post on imgur.com

@oxidesigns

You can try this code snippet using the meta key name membership for the number field.

If you have a different field name replace membership in the first parameter in add_filter like in this example: "um_creditcardnumber_form_edit_field".

Install by adding the code snippet to your child-theme’s functions.php file or use the “Code Snippets” plugin.

add_filter( "um_membership_form_edit_field", "um_membership_form_edit_field_custom", 10, 2 );

function um_membership_form_edit_field_custom( $output, $set_mode ) {
    
    if( $set_mode != 'register' ) return $output;

    $output = str_replace( '<div class="um-field-area">', 
                           '<div class="um-field-area">
                                <div style="display:flex;">
                                    <p style="margin-top:10px;margin-right:15px;">
                                        <span style="margin-left:15px;">4567</span>
                                        <span style="margin-left:10px;">8901</span>
                                        <span style="margin-left:10px;">2345</span>
                                    </p>
                                    <p style="width:80px">', $output );

    $output = str_replace( '</div></div>', 
                           '</p></div>
                            </div></div>', $output );

    return $output;
}

@missveronicatv thank you so much.

I couldn’t get this to work. I added in exactly as above in to code-snippets.

I made a new ‘number field’ with Meta Key ‘membership’.

The field shows up with nothing around it.

@oxidesigns

Here is a screen copy of my test page: https://imgur.com/a/dZgRAla

Do you get an accept by Code Snippets when you save and activate?

@missveronicatv

My bad. Did not put the right Meta Key. Thanks for your assitance!