Placeholder

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Chad Butler

    (@cbutlerjr)

    8 years, 5 months ago

    You can use the wpmem_register_form_rows filter to manipulate the form elements before they are assembled into the HTML for the form.

    Here is a generic example that uses php’s array_splice to insert an array for the placeholder into the rows array:

    add_filter( 'wpmem_register_form_rows', 'my_register_form_rows' );
function my_register_form_rows( $rows ) {
	// Add a placeholder before the first/last name fields.
	// It assumes the default fields meta names and order.

	// "Name" placeholder. Adds some "h3" text in the
	// "label" area.  Adjust as needed based on your
	// theme, stylesheet used, desired HTML output, etc.
	$my_placeholder[] = array(
		'order'        => '', // Not required
		'meta'         => '', // Not required
		'value'        => '', // Not required
		'type'         => false,
		'row_before'   => '',
		'label'        => '<h3>Please enter your name</h3>',
		'field_before' => '',
		'field'        => '',
		'field_after'  => '',
 		'row_after'    => '',
	);

	// This uses php's array_splice to insert our placeholder
	// in the second array position ("1").  Specifying "0" for
	// length argument leaves the rest of the arry intact.
	array_splice( $rows, 1, 0, $my_placeholder ); 

	// uncomment this line to see what the rows array looks
	// like with the placeholder array added.
	//echo '<pre>'; print_r( $rows ); echo '</pre>'; exit();

	return $rows;
}

    The elements of the rows array that are not required to be used or have a value are indicated as “not required”. The other elements MUST be included in your array. But depending on the desired HTML output, don’t necessarily need to have a value. In the example, I’ve included them all as empty values, which is fine if you are using one of the “no float” stylesheets (including the default). But if you use one of the floated stylesheets that display form elements side-by-side, you’ll want to have some structure:

    'field_before' => '<div class="div_text">',
'field'        => '&nbsp;',
'field_after'  => '</div>',
    ahausdorf

    (@ahausdorf)

    8 years, 4 months ago

    What do I have to do to get placeholders to show besides posting this code in functions.php? If I leave <h3>Please enter your name</h3> in the code it will print that as a label, and echoing '<pre>'; print_r( $rows ); echo '</pre>'; exit(); will print the right array. But I’m not sure how to properly fill the array to get the placeholders to display correctly.

    ahausdorf

    (@ahausdorf)

    8 years, 4 months ago

    I ended up adding placeholders with jQuery, putting the following inside `$(document).ready(function() {
    if ( $(‘body’).hasClass(‘page-template-template-preferredPricing’) ) {
    $(‘[name=”log”]’).attr(“placeholder”, “Username *”).val(“”).focus().blur();
    $(‘[name=”first_name”]’).attr(“placeholder”, “First Name”).val(“”).focus().blur();
    $(‘[name=”last_name”]’).attr(“placeholder”, “Last Name”).val(“”).focus().blur();
    $(‘[name=”user_email”]’).attr(“placeholder”, “Email”).val(“”).focus().blur();
    $(‘[name=”phone1″]’).attr(“placeholder”, “Telephone”).val(“”).focus().blur();
    $(‘[name=”company”]’).attr(“placeholder”, “Company Name *”).val(“”).focus().blur();
    $(‘[name=”password”]’).attr(“placeholder”, “Password *”).val(“”).focus().blur();
    $(‘[name=”confirm_password”]’).attr(“placeholder”, “Confirm Password *”).val(“”).focus().blur();
    $(‘[name=”asi”]’).attr(“placeholder”, “ASI Number”).val(“”).focus().blur();
    $(‘[name=”submit”]’).val(“Sign Up Free”).focus().blur();
    }
    }`

    Then I used display: none on the label tags. Change if template logic to fit your page template and your names to fit, but this works for me. The last line with “submit” changes the button text.

    Plugin Author Chad Butler

    (@cbutlerjr)

    8 years, 4 months ago

    I see you worked out a solution.

    Looking at your question after my initial answer, I see that I misunderstood your question. You were looking for how to insert the placeholder attribute into the input tag.

    I would still use wpmem_register_form_rows as it is more scalable that writing out JS to do it on page load. But it certainly gets a little more complex as you have to do a little bit of creative str_replace to extract the raw label text (without the html tags) and use that to create the placeholder (which also would need to be str_replace’d into the input tag):

    add_filter( 'wpmem_register_form_rows', function( $rows, $toggle ) {
	// Loop through the rows.
	foreach( $rows as $row ) {
		// If the row is a text input or password input.
		if ( $row['type'] == 'text' || $row['type'] == 'password' ) {
			// Get the raw label for use as the placeholder.
			$find_these = array(
				'<label for="' . $row['meta'] . '" class="text">',
				'<span class="req">*</span>',
				'</label>'
			);
			$replace_with = array( '', '', '' );
			$placeholder = str_replace( $find_these, $replace_with, $row['label'] );
			$placeholder = 'placeholder="'. $placeholder . '"';

			// Insert the $placeholder attribute into the input tag.
			$rows[ $row['meta'] ]['field'] = str_replace( '/>',  $placeholder . ' />', $row['field'] );

			// Empty the label.
			$rows[ $row['meta'] ]['label'] = '';
		}
	}
	return $rows;
}, 10, 2 );

    Normally, with something this specific, I would suggest that if you need help, you should consider signing up for support – I’ll be able to address your specific questions better that way.

    I didn’t mind getting more involved in this one as it turns out I found something I would like to add to the plugin to make this particular filter more flexible. Sometimes you need that label text directly (this isn’t the first time it’s come up this way) so it should probably be available as a key in the filter without having to extract it from the surrounding HTML. So I’ll probably be adding a new key to the exiting $rows array.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Placeholder’ is closed to new replies.