WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
How to tweak HTML output for use with jquery mobile (6 posts)

  1. Philip Jones
    Member
    Posted 2 years ago #

    I am building my first mobile site, using jQuery Mobile to provide styling that works efficiently and degrades nicely.

    However creating contact forms is proving challenging, because jquery mobile requires HTML that is formatted a little differently to what Contact Form 7 outputs.

    For example, checkboxes need to be wrapped in a fieldset and then tied together with data labels:

    <div data-role="fieldcontain">
      <fieldset data-role="controlgroup">
        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
        <label for="checkbox-1">I agree</label>
      </fieldset>
    </div>

    I have seen in the past that contact form 7 has a lot of undocumented functionality so I am hoping there is a way to tweak the output (without messing with the core code of the plugin).

    Can you help me, either with a solution you've tried or some pointers?

    Thanks,

    Philip

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

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 years ago #

    The output is defined in the function wpcf7_checkbox_shortcode_handler() in contact-form-7/modules/checkbox.php. You can override it by doing wpcf7_add_shortcode( 'checkbox', 'your-function-name', true ) in your theme's functions.php file.

    If you use the latest version of Contact Form 7 (v3.1), you can also put the HTML directly into the Form textarea in the plugin's admin page.

  3. Philip Jones
    Member
    Posted 2 years ago #

    Thank you for your response. I have tried the second approach that you outlined. This is great functionality! Contact Form 7 really is a superb plugin.

    It works well for checkboxes which are 'on' (checked) but it doesn't seem to recognise checkbox fields which haven't been checked. So my output looks something like:

    Entered in the form:
    Box1 [ ]
    Box2 [x]
    Box3 [x]
    Received by email
    Box1: [checkbox-1]
    Box2: on
    Box3: on

    I get similar results when checking different combinations of box1,2,3.

    Am I missing something or is this due to the way the plugin works?

    Thanks,

    Philip

  4. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 years ago #

    It is supposed behavior. The value of the field named "checkbox-1" does not exist in posted data, so the tag [checkbox-1] is not replaced.

    Try inserting code below into your theme's functions.php:

    add_filter( 'wpcf7_posted_data', 'your_custom_wpcf7_posted_data' );
    
    function your_custom_wpcf7_posted_data( $posted_data ) {
    	if ( ! isset( $posted_data['checkbox-1'] ) )
    		$posted_data['checkbox-1'] = 'off';
    
    	return $posted_data;
    }
  5. Philip Jones
    Member
    Posted 2 years ago #

    Thank you once again. This code worked perfectly.

    When using HTML code in the Form textarea, is there any way to specify CF7 properties for that particular field. For example, to make a field mandatory?

  6. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 years ago #

    Uh, using [checkbox* ...] tag is necessary for such cases.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic