CODEWITHSUNDEEP
phphtmlwordpresscontact-form
Sebastian
Sebastian

Reputation: 471

Wordpress Contact Form 7 customize HTML output of shortcodes

I would like to customize the HTML output of a Wordpress Contact Form 7 (WPCF7) shortcode itself, i.e. the [file] shortcode. I do not want to modify the surrounding HTML.

So far I've modified the HTML output by changing the contents of the file /contact-from-7/modules/file.php.

My changes will be lost when I update the plugin. So I'd like to implement a more permanent and robust solution, like adding a filter in my functions.php.

What I would like to do (pseudo code - untested code):

add_filter('wpcf7_file_shortcode_handler', 'my_file_sc_handler');
function my_file_sc_handler($html) {
    $html = sprintf('<div>my own html</div>');
    return $html;
}

I only not need to change the $html returned - no need to touch the remaining code of the wpcf7_file_shortcode_handler function.

My question: How can I customize the Wordpress Contact Form 7 HTML output of the [file] shortcode so that my changes will not get lost when I update the plugin?

Upvotes: 2

Views: 10766

Answers (3)

M.Ganji
M.Ganji

Reputation: 866

you cannot insert a contact form shortcode into your template file directly. You will need to pass the code into do_shortcode() function and display its output like this

    <?php echo do_shortcode( '[contact-form-7 id="7" title="Contact"]' ); ?>

Upvotes: 0

Lee
Lee

Reputation: 4323

Based on the comments and such, although I do not have a solid answer, I think you may find the answer you're looking for with this link:

http://www.featheredowl.com/contact-form-7-submit-button-element/

This tutorial explains how to manipulate the [submit] shortcode from using <input type="submit"> to a <button> element.

Using this basis, you may be able to customise your [file] output to how you want.

Although this does require editing core files, it also seems to set about handing upgrades of the plugin through functions.

Hope it helps somewhat!

Upvotes: 1

Siegfried Grimbeek
Siegfried Grimbeek

Reputation: 897

Firstly it is a very bad idea to change the core files of any plugin.

If it is simply the HTML output that you want to change, why don't you change it in the provided editor, see below example:

<div class="row">
<div class="col-md-6">
<p>Name<br />
    [text your-name] </p>
</div>
<div class="col-md-6">
<p>Email*<br />
    [email* your-email] </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Enquiry<br />
    [textarea your-message] </p>
<p>[submit "Send"]</p>
</div>
</div>

You can pretty much change everything!

Upvotes: 0

Related Questions