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.

contact example 1
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.

ccontact example 2
Example
								
									

Get In Touch

Contact Details...