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

问题

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"]

回答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!

回答2:

This code from an active Wordpress website I've recently built will guide you _ though you will need to make some alterations to suit your own form and add any classes you've created in your CSS

The most important thing to remember is that each class must be added separately

I have left the necessary Bootstrap classes in place + 'ADD CSS CLASS HERE' for any other CSS class you may have

I hope it helps

<div class="form-group">
    <label for="yourname">Your Name (required)</label>
    [text* your-name id:yourname class:form-control class:ADD CSS CLASS HERE ]
</div>

<div class="form-group">
    <label for="youremail">Your Email (required)</label>
    [email* your-email id:youremail class:form-control class:ADD CSS CLASS HERE]
</div>

<div class="form-group">
    <label for="yourmessage">Your Message (required)</label>
    [textarea* your-message id:yourmessage class:form-control class:ADD CSS CLASS HERE]
</div>

[submit class:btn class:ADD BUTTON CLASS HERE "Send"]

来源：https://stackoverflow.com/questions/58422462/how-to-add-contact-form-7-fields-to-my-custom-html-code