[Plugin: Contact Form 7] How to tweak HTML output for use with jquery mobile

  • Philip Jones

    (@philipmartinjones)


    13 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

    https://www.ads-software.com/extend/plugins/contact-form-7/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    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.

    Thread Starter Philip Jones

    (@philipmartinjones)

    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

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    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;
}
    Thread Starter Philip Jones

    (@philipmartinjones)

    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?

    Plugin Author Takayuki Miyoshi

    (@takayukister)

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: Contact Form 7] How to tweak HTML output for use with jquery mobile’ is closed to new replies.