Contact Sections

Contact Updated

IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, Warhol, Kant or Basho, check this page for old contact settings. This page will be available until all templates have been upated using the latest verison of the framework.

Our templates come with two simple, predesigned 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...


Building Complex Form New

Our contact form script now allows user to add new fields, select boxes and check boxes without having to modify any JS or PHP. To add addtional form elements to an existing form we make use of the news class .form-aux, which works as an identifier for auxiliary form elements. Below is a working example of addtional form elements that can simply be added to any form:

Auxiliary Field
								
									
Auxiliary Select Box
								
									
Auxiliary Checkbox
								
									
This is an option