Hello Friends,

Contact Form 7 is very good plugin to implement Contact Us page. If you are using Contact Form7 and want to make changes as per client requirement like add some more attributes(City, State, Country, Phone number) on contact us page. Please review the blog below:

1) Please install Contact Form7 and make this activate.

2) Open admin panel and click at Contact form left menu --> Add New

3) Default form content appear as below ::

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

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

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

4) Update the content as per your need, I have given an example below:

<div class="mainContainer container enquiry-form">
      <div>
        <h2 class="enquiry-heding">Enquiry :</h2>
          <div class="row">
            <div class="form-group col-sm-6">
             <label class="control-label col-sm-3">First Name</label>
              <div class="col-sm-8">
              [text* first-name class:form-control]                
              </div>
            </div>
            <div class="form-group col-sm-6">
              <label class="control-label col-sm-3">Last Name</label>
              <div class="col-sm-8">
                [text last-name class:form-control]
              </div>
            </div>
          </div>
        <div class="row">
          <div class="form-group col-sm-6">
          <label class="control-label col-sm-3">Address</label>
            <div class="col-sm-8">
              [text address class:form-control]
            </div>
          </div>
          <div class="form-group col-sm-6">
          <label class="control-label col-sm-3">City</label>
            <div class="col-sm-8">
              [text city class:form-control]
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-sm-6">
          <label class="control-label col-sm-3">State</label>
            <div class="col-sm-8">          
               [text state class:form-control]   
            </div>
          </div>
          <div class="form-group col-sm-6">
          <label class="control-label col-sm-3">Country</label>
            <div class="col-sm-8">          
            [text country class:form-control]
            <span class="holder"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-sm-6">
          <label class="control-label col-sm-3">Email Id</label>
            <div class="col-sm-8">
              [email* your-email class:form-control]
            </div>
          </div>
          <div class="form-group col-sm-6">
          <label class="control-label col-sm-3">Phone</label>
            <div class="col-sm-8">
              [tel phone class:form-control]
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-sm-12">
          <label class="control-label col-sm-2 width137">Your Enquiry</label>
            <div class="col-sm-10 editpad">
              [textarea enquiry class:form-control]              
            </div>
          </div>
        </div>       
        <hr class="frmLine">
        <div class="clearfix"></div>
        <div class="button-form"> 
            <input type="image" src="http://localhost/ucada/wp-content/themes/ucada/images/btn.png">
                   
       
        </div>
      </div>
    </div>

5) text* in above * mean require field and validation will work accordingly.

I hope you like this example