[Résolu] Setting width of input fields

[Auteur]

Publications

[chrisR-14]

HELP! I'm trying to edit the width of specific CRED form input fields and I can't get it to work. I'm following the instructions on this page and I must be doing it wrong:
https://toolset.com/documentation/user-guides/styling-cred-forms/

I've placed the CSS edits in the "CSS and Javascript for this form" text field as suggested and cannot change the form field widths. I'm using the Customizr theme in case that might be causing a conflict with the instructions. Here are code examples of what I've tried so far that didn't work:

div[data-item_name="numeric-*"] input {
width: 75px;
}

div[data-item_name="text-*"] input {
width: 200px;
}

input[name="weight"] {
width: 75px;
}

Here are the instructions I was using that led me to use the CSS code above:

Input
All input fields generated by CRED have class: wpt-form-textfield

To style individual input, add a custom class to its shortcode or use:

1
2
3
input[name="NAME_OF_INPUT"] {
…
}
To style all fields by type (e.g. all colorpickers, or all date fields) use the data-item_name attribute that is automatically added to every field DIV wrapper.

For example, to style all phone inputs use:

1
2
3
div[data-item_name="phone-*"] input {
…
}
Class Prefixe

[Luo Yang]

Dear Chris,

I assume we are talking about a single line field, for example below test site:
hidden link
user/pass: xgren/111111
We can use CSS codes to customize the width of custom field "test-single-line"

The CRED form:
hidden link
CSS codes:

input[name="wpcf-test-single-line"] {
width: 75px;
}

[chrisR-14]

I was missing the wpcf- in the field name. Thank you, that fixed it.

Is there a way to do max-length for the fields?

[Luo Yang]

It needs some custom JS codes, for example, the CRED form:
hidden link
In the "Javascript" window:

jQuery( document ).ready(function($) {
    $('input[name="wpcf-test-single-line"]').attr('maxlength', 3);
});

See it in front-end:
hidden link