         <!-- Title Section -->
        <div class="title-section module">
            <div class="row">
        
                <div class="small-12 columns">
                    <h1>Contact Us</h1>
                </div><!-- Top Row /-->
        
                <div class="small-12 columns">
                    <ul class="breadcrumbs">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Contact Us</a></li>
                       
                    </ul><!-- Breadcrumbs /-->
                </div><!-- Bottom Row /-->
                
            </div><!-- Row /-->
        </div>
        <!-- Title Section Ends /-->
        
        <!-- Content section -->
        <div class="content-section module">
        	<div class="row">
            	
                <!-- Map Area -->
                <div class="map-wrapper module">
                	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3886.7928484824843!2d80.25801031482281!3d13.048853790805211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52663a1f1183cb%3A0x298284c3f39969f5!2sEaswari%20Lending%20Library!5e0!3m2!1sen!2sin!4v1619699934034!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
                <!-- Map Ends /-->
                
                <!-- Contact content area -->
                <div class="content-wrapper">
                
                	<div class="medium-3 small-12 columns">
                    	<div class="contact-info">
                        	<img src="images/contactUs.jpg" alt="Contact Us" />
                        </div>
                        <div class="contact-info">
                        	<h4>Meet our Company</h4>
                            <p>No 292, Avvai Shanmugam Salai,</p>
							<p>Lloyds Road, gopalapuram,</p>
							<p>Chennai -600086.</p>
                        </div>
                        <div class="contact-info">
                        	<h4>Get in Touch</h4>
                            <p><strong>Office: </strong>91-44-28353199<br>
                            	<strong>Mobile: </strong>9840366599<br>
                                <!--<strong>Toll Free: </strong>123-425-6234<br>-->
                            </p>
                        </div>
                        <div class="contact-info">
                        	<h4>Follow Us</h4>
	                         <div class="socialicons">
                                <a href="#"><i class="fa fa-facebook"></i></a>
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-google"></i></a>
	                        </div><!-- Social Icons /-->
                        </div>
                    </div><!-- Left column Ends /-->
                	
                    <div class="medium-9 small-12 columns">
                    	<h2>Please fill the form below to contact us</h2>
                        <div class="contact-form">
							<form name="contactForm" id="contactForm" method="post" role="form" onSubmit="return validateFields()">
							<input type="hidden" name="hdAction" id="hdAction">
                        	<div class="row">
                            	<div class="medium-6 small-12 columns">
                                	<label>
                                    	Your name*
                                        <input type="text" value="" id="memName" name="memName" placeholder="Your name here..." onKeyUp="text_filter(this);" tabindex="1" autocomplete="off" />
                                    </label>    
                                </div>
                                <div class="medium-6 small-12 columns">
                                	<label>
                                    	Your Mobile*
                                        <input type="text" id="mobileNo" name="mobileNo" value="" placeholder="Your mobile number here..." onkeyup="numericFilter(this);checkMobile(this);" maxlength="10" tabindex="2" autocomplete="off" />
                                    </label>
                                </div>
                            </div><!-- Row Ends /-->
                            
                            <div class="row">
                            	<div class="medium-6 small-12 columns">
                                	<label>
                                    	Email *
                                        <input type="text" id="emailId" name="emailId" value="" placeholder="Enter your email ..." tabindex="3" autocomplete="off" />
                                    </label>    
                                </div>
                                <div class="medium-6 small-12 columns">
                                	<label>
                                    	Subject *
                                        <input type="text" id="subject" name="subject" value=""  placeholder="Reason contacting us ..." tabindex="4" autocomplete="off"/>
                                    </label>
                                </div>
                            </div><!-- Row Ends /-->
                            
                            <div class="row">
                            	<div class="medium-6 small-12 columns">
                                	<label>
                                    	Select a Branch
                                        <select id="branchName" name="branchName" value="" tabindex="5">
										<option value="0">--- Select a Branch ---</option>
										{foreach from=$PageList2 item=add}
                                        	<option value="{$add.id}">{$add.name}</option>
											{/foreach}
                                        </select>
                                    </label>    
                                </div>
                                <div class="medium-6 small-12 columns">
                                	<label>
                                    	Member Code *
                                        <input type="text" id="memberCode" name="memberCode" value="" placeholder=" Your member code here..." tabindex="6" autocomplete="off" />
                                    </label>
                                </div>
                            </div><!-- Row Ends /-->
                            
                            <div class="row">
                            	<div class="medium-12 small-12 columns">
                                	<label>
                                    	Remarks (Comments)
                                        <textarea rows="10" id="yourMessage" name="yourMessage" placeholder="Your message ..." tabindex="7"></textarea>
                                    </label>    
									<input type="hidden" name="contact_form" value="YES" />
									<input type="submit" class="button primary" onclick="validateFields();" value="Send your message" tabindex="8"/>
                                </div>
                            </div><!-- Row Ends /-->
							</form>
                        </div><!-- Contact form /-->
                    </div><!-- Right Column Ends /-->
                    <div class="clearfix"></div>
                </div>
                <!-- Contact Content Area /-->
                
            </div><!-- Row /-->
        </div>
        <!-- Content Section Ends /-->
  {literal}
<script type="text/javascript">
    function validateFields() {
	var memName=$('#memName').val();
	var mobileNo=$('#mobileNo').val();
	var emailId=$('#emailId').val();
	var subject=$('#subject').val();
	var branchName=$('#branchName').val();
	var memberCode=$('#memberCode').val();
	var yourMessage=$('#yourMessage').val();

   
	$(".error").remove();
	if(memName=="")
	{
	$('#memName').after('<span class="error">This field is required</span>');
	
	$('#memName').focus();
	
	return false;	
	}
	if(mobileNo=="")
	{
	$('#mobileNo').after('<span class="error">This field is required</span>');
	
	$('#mobileNo').focus();
	
	return false;	
	}	
	if(mobileNo.length < 10)
	{
	$('#mobileNo').after('<span class="error">Mobile number must be 10 digits</span>');
	
	$('#mobileNo').focus();
	
	return false;	
	}		 
	if(emailId=="")
	{
	$('#emailId').after('<span class="error">This field is required</span>');
	
	$('#emailId').focus();
	
	return false;	
	}
	if(IsEmail(emailId)==false){
                     $('#emailId').after('<span class="error">Please enter valid Email Id</span>');
	                 $('#emailId').focus();
                     return false;
	}	
	if(subject =="")
	{
	$('#subject').after('<span class="error">This field is required</span>');
	
	$('#subject').focus();
	
	return false;	
	}	
	if(branchName=="" || branchName==0)
	{
	$('#branchName').after('<span class="error">This field is required</span>');
	
	$('#branchName').focus();
	
	return false;	
	}	
	if(memberCode=="" )
	{
	$('#memberCode').after('<span class="error">This field is required</span>');
	
	$('#memberCode').focus();
	
	return false;	
	}
	if(yourMessage=="" )
	{
	$('#yourMessage').after('<span class="error">This field is required</span>');
	
	$('#yourMessage').focus();
	
	return false;	
	}
	
	
}

function IsEmail(emailId) {
             var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
             if(!regex.test(emailId)) {
                return false;
             }else{
                return true;
             }
           }
		   
   
function numericFilter(data)

{

   data.value = data.value.replace(/[^.0-9^.+,-]/ig,"");

}

function text_filter(data)

{

   data.value = data.value.replace(/[^ .a-z]/ig,"");

}
 
</script>

<style>

.isa_success

{

color: #FFFFFF;

background-color: #174873;

}

.error

{

color:#D8000C;

/*background-color:#FFBABA;*/

}

.isa_error

{

color:#D8000C;

background-color:#FFBABA;

}

.isa_success i,.isa_error i

{

margin:10px 22px;

font-size:2em;

/*vertical-align:middle;*/

}

.required

{

color:#FF0000;
float:right;

}

</style>

{/literal}