Contact Sections
Contact
Our templates come with two simple, purpose-built contact sections that are defined by the class .contact-X, where X represents the contact section type (1-2) as shown below.
Note: .contact-form-container can easily be copied and pasted into any section of the a template and maintain its structure.
Example
CSS For Retina Displays
For contact sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.
.contact-X{
background-image:url(../images/slider/contact-bkg-image.jpg);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.contact-X{
background-image:url(../images/slider/[email protected]);
}
}
Styling Form Elements
Form elements can be styled on the fly using Timber background, border, and color classes. View Styling Classes of Framework Docs for more information.
Contact Form Parameters
For contact form parameters and message please refer to this section of File Structure.
Contact Section One
A simple contact form section with form only. Target .contact-1 to set background color or image. Alternatively, for background use Timber background color classes.
Example
Get In Touch
Contact Section Two
A two column contact form section with form and address. Target .contact-2 to set background color or image. Alternatively, for background use Timber background color classes.
Example
Get In Touch
Contact Details...