How to use the Wordpress 7 form in my own HTML?

Question

I want to use the Wordpress 7 contact form on my website, but I already have an HTML / CSS layout. So, I want to change the plugin to use it with this 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=" [e-mail] "> </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: should I change this code with some Contact Form 7 code or include it in the administration of the plugin?

Answer 1

No need to change anything. Contact form 7 supports this out of the box. Have you tried using it or have you looked at the documentation? If so, what works or doesn't work for you?

Comment Based Update Below

Contact Form 7 gives a short code for each field you created. You can copy the short code into HTML in the "Form" section. Using the example you provided in your question, it will look like this:

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

You do not need to wrap this in <form> tags - contact form 7 does this already (and assigns an identifier).

In a WordPress text editor, use the short form code at the top of the Contact Form 7 interface to display the final result. If you want to put this in a PHP template, use this:

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

Contact Form 7 also contains a mail section in which you must determine who the mail should come from and where. Some hosting providers (for example, Dream Host) require that the email address be the same domain as the site itself (the http://example.com form will need to send emails with [e-mail] or similar address). To ensure that you can still reply to the correct address, you must add the response header as follows:

 Reply-To: [email] 

Change [email] only to match what the short code output for your email field.

But seriously, this stuff is EVERYTHING 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 will convert your elements into shortcodes. This speeds up many of my projects.

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