Form examples

Contact form example code in content area

Below code is example of content area from which just copy and use it with your email address.

Replace email address with your email address display in highlighted line of below code.

<!-- contact form -->
<div id="contact-form" class="form-block">
	<h2 class="title small">Drop us a line</h2>

	<form action="form-data/formdata.php" class="form-widget">
		<input type="hidden" name="to" value="abc@xyz.com">

		<input class="form-control" data-label="Name" required data-msg="Please enter name." type="text" name="name" placeholder="Enter your name">

		<input class="form-control" data-label="Email" required data-msg="Please enter email." type="email" name="email" placeholder="Enter your email">

		<textarea class="form-control" data-label="Message" required data-msg="Please enter your message." name="message" placeholder="Add your message" cols="30" rows="10"></textarea>

		<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Submit</button>
	</form><!-- / form -->

</div>
<!-- / contact form -->

 

Below is example code of pop up contact form which add just before end of body tag in HTML.

Replace email address with your email address display in highlighted line of below code.

<!-- Popup contact form -->
<div id="popup-contact-form" class="white-popup-block popup-form mfp-hide">
	
	<!-- Popup header -->
	<div class="pop-header">
		<i class="fa fa-envelope-o"></i>
		<h3 class="title medium">Contact Us</h3>
		<p class="title-sub mini">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
	</div>
	
	<!-- Popup body -->
	<div class="pop-body">
		<form action="form-data/formdata.php" class="form-widget" data-popup="popup-contact">

			<input type="hidden" name="to" value="abc@xyz.com">
			
			<input class="form-control" data-label="Name" required data-msg="Please enter name." type="text" name="name" placeholder="Enter your name">
			
			<input class="form-control" data-label="Email" required data-msg="Please enter email." type="email" name="email" placeholder="Enter your email">
			
			<textarea class="form-control" data-label="Message" required data-msg="Please enter your message." name="message" placeholder="Add your message" cols="30" rows="10"></textarea>
			
			<button type="submit" class="btn btn-primary"><i class="fa fa-envelope-o"></i> Submit</button>

		</form>	
		<div class="msg-block"></div>
	</div>
</div>
<!-- / Popup contact form -->

Once inserting pop up code before body tag follow below steps to link pop up with any button / link.

  • below is example code to link pop up on any button / link.
<a href="#popup-contact-form" class="btn btn-default popup-contact">Button link</a>
  • Apply pop up ID in href=”#popup-contact-form” than append class popup-contact which is set on form tag data-popup=”popup-contact”

 

 

Related Articles