[Plugin: Contact Form 7] Placeholder text and image for submit button

  • Resolved gardenczar

    (@gardenczar)


    12 years, 3 months 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/

Viewing 1 replies (of 1 total)
  • kafluffy

    (@kafluffy)

    11 years, 11 months 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.

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: Contact Form 7] Placeholder text and image for submit button’ is closed to new replies.