# Onepage Contact us section

### 54. Onepage Contact us section

> Module position: onepage
>
> Module class suffix: section6 tp-title-center contact

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FUdFwBJWQGTn6sTH8fLja%2Fhome8_Onepage_Contactus_section.png?alt=media\&token=a50e7420-fb0c-49c8-b6a9-49c7e8e72710)

If you want your module this way, **Go to backend: Extensions --> Module Manager --> New --> Select type as SP Quick Contact Module** with the settings below:

#### Step-1:

Create a new module type as "SP Quick Contact"

#### Step-2:

Once the module is created you need to fill the feilds below

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FP2VUrxpO3y3yyuPERymI%2Fhome8_Onepage_Contactus_section_step2.png?alt=media\&token=8ec8dc2c-d79f-4722-9cfc-855c3e1a2c8f)

#### Step-3:

Publish the module in "onepage-contact-form" position

#### Step-4:

After configured the SP Quick Contact module you need to create a new custom html module and add the following html code

```html
<div class="container">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h3 class="module-title white "><span class="title-left">Get in </span>
<span class="title-right">Touch with Us</span>
        </h3>
        <p class="white text-center tp-sub-text " style="margin-bottom: 30px;">Sed ut 
Perspiciatis Unde Omnis Iste Sed ut perspiciatis unde omnis iste natu error sit 
voluptatem accusan tium Sed ut</p>
    </div>
    <div class="col-sm-6">
        <div>{loadposition onepage-contact-form}</div>
    </div>
    <div class="col-md-6">
        <div class="text-left tp-contact-info">
            <p>Tel: <strong>(123) 456-5690 </strong>
            </p>
            <p>07 East Avenue, Suite 65, Virginia, 1989 <br /> (123) 456-5690 , 
United States</p>
            <p><a href="#">info@runway.com</a><br />
<a href="http://www.themeparrot.com">www.themeparrot.com</a>
            </p>
            <div class="social social-head"><a href="#" class="toptip"
 title="Linkedin"><em class="icon-linkedin"></em></a><a href="#" class="toptip" 
title="Github"><em class="icon-github"></em></a><a href="#" class="toptip" 
title="Dribbble"><em class="icon-dribbble"></em></a><a href="#" class="toptip" 
title="instagram"><em class="icon-instagram"></em></a><a href="#" class="toptip" 
title="Google Plus"><em class="icon-google-plus"></em></a><a href="#" class="toptip" 
title="Facebook"><em class="icon-facebook"></em></a><a href="#" class="toptip"
 title="Twitter"><em class="icon-twitter"></em></a>
            </div>
        </div>
    </div>
</div>
```

#### Step-5:

Make sure the Prepare content is set to "YES"

Once the modue ls configured successfully SAVE & CLOSE The settings.