How to use Wordpress Contact Form 7 in my own HTML?

Question

I want to use Wordpress Contact Form 7 on my website, but I already have an HTML/CSS layout for it. So, I want to modify the plugin to use it with that custom HTML code.

<form id="contact_form" action="" method="post">                            
    <div>
        <label for="contact_name">Nombre</label>
        <input id="contact_name" type="text" required aria-required="true" placeholder="Nombre">
    </div>
    <div>
        <label for="contact_email">Email</label>
        <input id="contact_email" type="mail" name="email" required aria-required="true" placeholder="su@email.com">
    </div>  
    <div id="area_message">
        <label for="contact_message">Mensaje</label>
        <textarea id="contact_message" type="mail" required aria-required="true" placeholder="Mensaje"></textarea>
        <input id="contact_btn" type="submit" value="enviar">
    </div>
</form>

My question is: do I have to modify this code with some Contact Form 7 code or should I include this into the plugin administration?

Answer 1

No need to modify anything. Contact Form 7 supports this out of the box. Have you tried using it or looked at the documentation yet? If so, what is or isn't working for you?

Update based on comments below

Contact Form 7 gives you a shortcode for each field you generated. You can wrap the shortcode in HTML in the "Form" section. Using the example you provided in your question, that would look like this:

<div>
<label for="contact_name">Nombre</label>
[text* your-name 20/40 class:required "John Smith"]
</div>

You don't need to wrap this in a <form> tags - Contact Form 7 does that already (and assigns an ID).

In your WordPress text editor, use the form shortcode provided at the top of the Contact Form 7 interface to display your final output. If you'd prefer to put this in a PHP template, use this:

<?php echo do_shortcode("SHORTCODE GOES HERE"); ?>

Contact Form 7 also has a section for mail, where you would identify who the mail should go to and come from. Some hosting providers (Dream Host, for example), require the FROM email to be the same domain as the site itself (a form on http://example.com would need to send emails from hello@example.com, or a similar address). To make sure you can still reply to the right address, you would add a replyto header like this:

Reply-To: [email]

Only change [email] to match whatever the outputted shortcode for your email field was.

But seriously, this stuff is ALL in the documentation for Contact Form 7: http://contactform7.com/docs/

Answer 2

You can also use the wordpress plugin called Contact Form 7 Element Converter. All you have to do is copy and paste your html form into contact form 7 and it converts your elements into shortcodes. It speeds up alot of my projects.

Here is the link: https://wordpress.org/plugins/cf7-element-converter/