WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Placeholder text and image for submit button (2 posts)

  1. gardenczar
    Member
    Posted 2 years ago #

    I would like to create a newsletter subscription form. I have set up a simple form with an email field and a send button. I would like to do two things: 1) Put placeholder text (Enter your email address) in the email field so that when someone clicks into the field it disappears. 2) Use an image for the submit button and have the image appear inline and inside the border on the right side of the field.

    I have seen this done but do not know what code has to be modified, if any. The source of the example page shows the following:

    <li id="text-10" class="widget"><h3>Subscribe to Newsletter</h3>
    <div class="text widget">
    <div class="wpcf7" id="wpcf7-f2308-w1-o1"><form action="/#wpcf7-f2308-w1-o1" method="post" class="wpcf7-form">
    <div style="display: none;">
    <input type="hidden" name="_wpcf7" value="2308" />
    <input type="hidden" name="_wpcf7_version" value="3.0.2.1" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2308-w1-o1" />
    </div>
    <p><span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span><input type="submit" value="Send" class="wpcf7-submit" /><img class="ajax-loader" style="visibility: hidden;" alt="Sending ..." src="http://www.website.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
    </div>
    		</li>

    http://wordpress.org/extend/plugins/contact-form-7/

  2. kafluffy
    Member
    Posted 2 years ago #

    The files you'll need to edit are in the modules folder.

    For example, the text field would be the text.php file.

    You'll need to find the code where the value is echoed with into html:

    In the latest as of writing this response it is:

    $html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '" ' . $atts . ' />';

    Modify this to read:

    $html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '" placeholder="' . esc_attr( $placeHolder ) . '" ' . $atts . ' />';

    Then above this line look for (should be around line 81):

    if ( wpcf7_is_posted() && isset( $_POST[$name] ) )

    Just above this line add:

    $placeHolder = $value;
    $value = '';

    You'll need to repeat for other field types.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic