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

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/

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/