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: Example of Contact form 7 form : Your Name (required) [t

Solution 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

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

Hope You Will Clear!

Solution 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">
    <labelfor="yourname">Your Name (required)</label>
    [text* your-name id:yourname class:form-control class:ADDCSSCLASSHERE ]
</div>

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

[submit class:btn class:ADDBUTTONCLASSHERE"Send"]