Last active
May 9, 2018 07:43
-
-
Save MGCodeSnips/31807599c0b108ac447d003933e240a3 to your computer and use it in GitHub Desktop.
better contact form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style type="text/css">/*CONTACT FORM*/ | |
.contact-form {font-size: 12px;} | |
.contact-form h1 {font-size: 14px; margin: 10px 0px;} | |
.contact-form p.required {color: red; font-weight: bold; font-size: 11px; margin: 0 0 0 20%} | |
.contact-form .hr {border-bottom:1px dotted #CCC; height: 1px; margin: 10px 0px; } | |
.contact-form-row {clear: both; overflow: hidden; margin: 5px;} | |
.contact-form-row label {font-weight: bold; width: 50%; float: left; line-height: 38px;font-size: 16px;} | |
.contact-form-row input, .contact-form-row textarea {padding:10px; border: 1px solid #CCC; box-shadow: 0px 0px 5px rgba(0,0,0,.1) inset; float:left; width: 90%; background: #EFEFEF} | |
.contact-form-row textarea {height: 120px;} | |
.contact-form-row .star {color: red;} | |
#contact-form-submit {background: none; border: none;} | |
#contact-form-submit input {width: 80px!important; cursor: pointer; border: none; padding:10px; background: #000; color: #FFF; border: none; box-shadow: none; font-weight: 700; text-transform: uppercase; border-radius: 3px; } | |
#contact-form-submit input:hover {opacity: 0.7} | |
#recaptcha_area {} | |
.lol {display: table;} | |
</style> | |
<div class="contact-form"> | |
<h1><span style="font-size: 18px;">Contact Us</span></h1> | |
<div class="hr"><br /> | |
</div> | |
<p><span class="star"><span style="font-size: 16px;">Thanks for getting in touch with us. We'll get back to you as soon as we can. </span><br /> | |
<br /> | |
<br /> | |
<span style="font-size: 14px;"><span style="color: rgb(255, 0, 0);">*</span></span></span><span style="font-size: 14px;"><span style="color: rgb(255, 0, 0);">Required Field</span></span></p> | |
<form action="index.asp?function=FORMMAIL" class="contact-form" method="POST"> | |
<div class="contact-form-row"><label for="name">Name: <span class="star">*</span></label><input name="Name" type="text" value="" /></div> | |
<div class="contact-form-row"><label for="email">Email Address: <span class="star">*</span></label><input name="EmailAddress" type="text" value="" /></div> | |
<div class="contact-form-row"><label for="message">Message:</label><textarea name="Message" type="text" value=""></textarea></div> | |
<div class="contact-form-row lol">[ekm:captcha][/ekm:captcha]</div> | |
<div class="contact-form-row" id="contact-form-submit"><input type="submit" value="Send" /></div> | |
<!-- HIDDEN --><input name="fieldorder" type="hidden" value="[Name],[EmailAddress],[Message]" /> <input name="requiredfields" type="hidden" value="[Name],[EmailAddress]" /> <input name="subject" type="hidden" value="Email enquiry from your website" /></form> | |
</div> | |
<!-- another contact form --> | |
<style type="text/css">/*CONTACT FORM*/ | |
.contact-form {font-size: 12px;} | |
.contact-form h1 {font-size: 14px; margin: 10px 0px;} | |
.contact-form p.required {color: red; font-weight: bold; font-size: 11px; margin: 0 0 0 20%} | |
.contact-form .hr {border-bottom:1px dotted #CCC; height: 1px; margin: 10px 0px; } | |
.contact-form-row {clear: both; overflow: hidden; margin: 5px; padding-top: 15px;} | |
.contact-form-row label {color: #fff; font-weight: bold; float: left; line-height: 38px;font-size: 16px;} | |
.contact-form-row input, .contact-form-row textarea {padding:10px; border: 1px solid #CCC; box-shadow: 0px 0px 5px rgba(0,0,0,.1) inset; float:left; width: 100%; background: #EFEFEF} | |
.contact-form-row textarea {height: 40px;} | |
.contact-form-row .star {color: red;} | |
#contact-form-submit {background: none; border: none;} | |
#contact-form-submit input {width: 100%; cursor: pointer; border: none; padding:10px; background: #000; color: #FFF; border: none; box-shadow: none; font-weight: 700; text-transform: uppercase; border: solid 4px; } | |
#contact-form-submit input:hover {opacity: 0.7} | |
#recaptcha_area {} | |
.lol {display: table; margin:auto;} | |
</style> | |
<br /> | |
<span style="color: rgb(255, 255, 255);"><span style="font-size: 26px;"><strong>Enquiries</strong></span></span> | |
<hr /> | |
<div class="contact-form"> | |
<form action="index.asp?function=FORMMAIL" class="contact-form" method="POST"> | |
<div class="contact-form-row"><input name="Name" placeholder="Name" type="text" value="" /></div> | |
<div class="contact-form-row"><input name="Organisation" placeholder="Organisation" type="text" value="" /></div> | |
<div class="contact-form-row"><input name="EmailAddress" placeholder="Email Address" type="text" value="" /></div> | |
<div class="contact-form-row"><input name="Phone Number" placeholder="Phone" type="text" value="" /></div> | |
<div class="contact-form-row"><textarea name="Message" placeholder="Details of your enquiry" type="text" value="">Details of your enquiry</textarea></div> | |
<div class="contact-form-row lol">[ekm:captcha][/ekm:captcha]</div> | |
<div class="contact-form-row" id="contact-form-submit"><input type="submit" value="Send" /></div> | |
<!-- HIDDEN --><input name="fieldorder" type="hidden" value="[Name],[Organisation],[EmailAddress],[Phone],[Message]" /> <input name="requiredfields" type="hidden" value="[Name],[EmailAddress],[Phone]" /> <input name="subject" type="hidden" value="Email enquiry from your website" /></form> | |
</div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment