Field title inside field

  • Resolved GeckoSix

    (@geckosix)


    13 years, 6 months ago

    Hello Matthew,
    Purchased your plugin yesterday.
    Works real nice.

    I have two questions:

    First question:
    I want to have the field title appear inside of the field instead of on top. I know I can type the field name in the ‘Default value’ field which will give me what I want but that still leaves me with the field title on top of the field anyways.

    I can also update the class for the field to display:none; but then it jacks up my checkbox buttons. They wont have a field title…
    Are there any jedi master power suggestions you can offer to get this done?

    Second question:
    You provided a CSS Classes fields so that we can modify the CSS styling of each individual field. Nice!!!
    What is the syntax expected by the CSS Classes fld? Do we type in Class=”whatever”, or “whatever”, etc.
    My thinking is that perhaps I could enter a css code to prevent the field title from appearing but doing that in the CSS class field would hide the entire field entry. No?
    Anywho, let me know what syntax is expected.

    http://ww.wp.xz.cn/extend/plugins/visual-form-builder/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Matthew Muro

    (@mmuro)

    13 years, 6 months ago

    I want to have the field title appear inside of the field instead of on top. I know I can type the field name in the ‘Default value’ field which will give me what I want but that still leaves me with the field title on top of the field anyways.

    What you are describing is called a placeholder. It’s an HTML5 attribute and not fully supported unless using JavaScript. A workaround here is to possibly use jQuery to populate the placeholder attribute with the label of the field.

    What is the syntax expected by the CSS Classes fld? Do we type in Class=”whatever”, or “whatever”, etc.

    You just type in the class names by themselves as you would if you were typing into the class attribute. So if you had two classes you’d want to add to a field, just type in whatever1 whatever2.

    Hope that helps!

    Thread Starter GeckoSix

    (@geckosix)

    13 years, 5 months ago

    Thanks Matthew,
    For now, I’d like to keep my Field labels populated in the admin side but I’d like to hide the field labels on the front side (what the visitor sees). Which file and line would I have to modify to do this. I looked and couldnt see where.

    Could you point me in the right direction?

    Thanks

    Thread Starter GeckoSix

    (@geckosix)

    13 years, 5 months ago

    Got it figured out. I updated form-output.php

    In case this is useful to someone else who wants to set the field labels inside the fields:

    1. Approx line 148:
    <label for="<label for="' . $id_attr . '" class="vfb-desc">‘. stripslashes( $field->field_name ) . $required_span . ‘</label></label>

    a. Copy to clipboard the code in bold above between the <label for…></label>
    because you will need it later.

    b.remove everything in bold above from the code. By doing so, the form will not output the field label on top of the field.
    So you should end up with this:
    <label for="<label for="' . $id_attr . '" class="vfb-desc"></label></label>

    2. Go to about line 210 and enter the code, that you copied earlier, where indicated below:

    $output .= '<input type="text" name="vfb-' . $field->field_id . '" id="' . $id_attr . '" value="ENTER CODE HERE" class="vfb-text ' . $size . $required . $validation . $css . '" />';

    Now you should end up with:

    $output .= '<input type="text" name="vfb-' . $field->field_id . '" id="' . $id_attr . '" value="'. stripslashes( $field->field_name ) . $required_span . '" class="vfb-text ' . $size . $required . $validation . $css . '" />';

    *** So far what we did was remove the piece of code that displayed the field label above the field and we took that piece of code and put it where the field’s ‘default value’ would appear, making the field label appear inside the field.

    However, if you have any ‘required’ fields, then we have to modify another field so that your form shows NAME* and not NAME<span>*</span>

    3. Go to line 80 and look for
    $required_span = ( !empty( $field->field_required ) && $field->field_required === 'yes' ) ? ' <span>*</span>' : '';

    remove the <span></span> tags so that you end up with
    $required_span = ( !empty( $field->field_required ) && $field->field_required === 'yes' ) ? '*' : '';

    And youre done.

    I hope this is helpful

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Field title inside field’ is closed to new replies.