How to add Contact Form 7 fields to my custom HTML code?

Question

How can I add Contact Form 7 shortcode fields to custom HTML with class name of CSS?

My HTML form code:

<div class="form-section">
  <strong class="form-heading"> Your Details </strong>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Your Name <span class="required">(required)</span></label>
        <input name="yourname" type="text" class="form-control icon icon-person" placeholder="First name, Surname" />
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Phone Number <span class="required">(required)</span></label>
        <input name="phonenumber" type="text" class="form-control" placeholder="">
      </div>
    </div>
    <div class="col-sm-6 col-xs-12 col-lg-12">
      <div class="form-group">
        <label> Email Address <span class="required">(required)</span> </label>
        <input name="email" type="text" class="form-control icon icon-email" placeholder="Enter email address" />
      </div>
    </div>
  </div>

Example of Contact form 7 form :

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Answer 1

You can do add class like this way this is example of converting html to contact form 7 field please see difference

e.g 1) html

 <input type="email" class="form-control class:icon icon-email" id="email" placeholder="Enter email address" name="myemailaddress">

2) Contact Form 7 editor

[email* myemailaddress class:form-control class:icon class:icon-email id:email placeholder "Enter email address"]

In contact Form 7 there are many Input types see here (http://prnt.sc/pkdymc) You have to use from that so basically we have to take care of contact form 7 syntax for input types and you can add class,id and placeholder everything hope you are clearing with this

For More I have changed Your Custom Html to Contact Form Fields in contact form 7 editor

Please Put Below Code in Contact Form 7 editor You will get Exactly you want

<div class="form-section">
  <strong class="form-heading"> Your Details </strong>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Your Name <span class="required">(required)</span></label>
       [text* yourname class:form-control class:icon class:icon-person placeholder "First name, Surname"]
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-12">
      <div class="form-group">
        <label> Phone Number <span class="required">(required)</span></label>
         [tel* phonenumber class:form-control placeholder "Phone Number" ]
      </div>
    </div>
    <div class="col-sm-6 col-xs-12 col-lg-12">
      <div class="form-group">
        <label> Email Address <span class="required">(required)</span> </label>
         [email* email class:form-control class:icon class:icon-email placeholder "Enter email address"]
      </div>
    </div>
  </div>
[submit class:btn-default class:btn "submit"]

Hope You Will Clear!