Skip to content

Instantly share code, notes, and snippets.

@janzenz

janzenz/asp-form.css

Last active December 12, 2016 16:34
Show Gist options
  • Save janzenz/c2a418b039575672f5025923024ab66b to your computer and use it in GitHub Desktop.
Save janzenz/c2a418b039575672f5025923024ab66b to your computer and use it in GitHub Desktop.
Download ZIP
BD Styling
Raw
asp-form.css
/* ----- FORM Syling ----- */
/* Define the form frame */
.frm__frame {
background-color: #fcfcfc;
border-color: none; /* This should be changed. Based on the site's overall color see here: https://drive.google.com/open?id=0B2MfNegiYrF_bXgza1RaNG1sdXM */
border-style: solid;
border-width: 1px;
border-radius: .5rem;
}
/* defind form title styling, including the box it's in */
.frm__title {
color: white;
background-color: none; /* This should be changed. Based on the site's overall color see here: https://drive.google.com/open?id=0B2MfNegiYrF_bXgza1RaNG1sdXM */
font-size:1.5rem;
border-radius:.2em .2em 0 0;
padding:.7rem .5rem .7rem .5rem;
}
.frm__text--medium {
margin:1rem 1rem 0 1rem;
font-size:.9rem;
}
.frm__text--small {
color:gray;
margin:1rem 1rem 0 1rem;
font-size:.4rem;
}
/* Set the form frame colors */
.frm__body {
font-size:.5rem;
padding:1em;
}
/* form label styling can be set here */
.frm__body label {
color:gray;
padding:0 0 0 .3rem;
}
/* Set the form element styleing here */
.frm__body
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
}
/* put anything in the footer, like the submit button, to apply different formatting. */
.frm__footer {
text-align:center;
padding:0 0 .7rem 0;
}
Raw
asp-form.html
<script type="text/javascript" language="JavaScript" src="https://secureform.luxsci.com/intranet/php/secureform.php?v=1&c=15743-6500-3lrl&f=laureldental_contact"></script>
<!-- <div style="border-style:solid;border-color:#e48a72;border-width:1px;border-radius:.5em;background-color:#fcfcfc"> -->
<div class="frm__frame">
<div class="frm__title">
Contact Us
</div>
<div class="frm__body">
<div class="frm__text--medium">
For more information or to book an appointment please fill out this form, email us, or give us a call.
</div>
<form name="sitename_contact" method="post" onSubmit="return secureform_submit();" action="https://secureform.luxsci.com/perl/post/15743-6500-3lrl">
<section>
<div>
<label for="person_name">Name</label>
<input name="person_name" type="text" required>
</div>
</section>
<section>
<div>
<label for="email">Email</label>
<input name="email" type="email">
</div>
<div>
<label for="phone">Phone</label>
<input name="phone" type="tel" required>
</div>
</section>
<section>
<div>
<label for="comment">Message:</label><br>
<textarea name="comment" cols="50" rows="5" required></textarea>
</div>
</section>
<input name="Page" type="hidden" value="Practice Name">
<div class="frm__footer">
<input type="submit" value="Contact Us" class="btn btn-outline">
</div>
</form>
</div>
</div>
Raw
asp-styles.css
/* FLEX wrapper class set around the entire right 1/3 column */
.wrapper {
display: flex;
flex-direction:column;
}
/* Right one third Flex rules for mobile*/
@media (max-width:639px){
.wrapper {
display:flex;
flex-direction:column-reverse;
}
}
/* right nav faq styling */
/* Default Style */
div.ccm-page main div.rightNavFlexFaq h2 {
margin:1rem;
font-size:1.5rem;
line-height:2rem;
}
div.ccm-page main div.rightNavFlexFaq p {
margin:0 1rem 0 1rem;
font-size:.9rem;
line-height:2rem;
}
.rightNavFlexFaq {
order:1;
}
.rightNavFlexSpacer01 {
order:2;
}
.rightNavFlexContactForm {
order:3;
}
/* applies to any element that is targeted by an anchor link */
:target {
animation: highlight 1s ease;
font-size:3rem;
}
/* applies to a psuedo element just before the target of an anchor link */
:target:before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
Raw
common-questions-shortcut.html
<h2>Common Questions</h2>
<p><a href="#idOfQuestion1">Question 1?</a></p>
<p><a href="#idOfQuestion2">Question 2?</a></p>
<p><a href="#idOfQuestion3">Question 3?</a></p>
<p><a href="#idOfQuestion4">Question 4?</a></p>
Raw
common-questions.html
<h2>Common Questions about SERVICE NAME</h2>
<h3 id="idOfQuestion1">Question1?</h3>
<p>Question1 Description</p>
<h3 id="idOfQuestion2">Question2?</h3>
<p>Question2 Description</p>
<h3 id="idOfQuestion3">Question3?</h3>
<p>Question3 Description</p>
<h3 id="idOfQuestion4">Question4?</h3>
<p>Question4 Description</p>
Raw
contact-form.css
/* ----- FORM Syling ----- */
/* Define the form frame */
.frm__frame {
background-color: #fcfcfc;
border-color: none; /* This should be changed. Based on the site's overall color see here: https://drive.google.com/open?id=0B2MfNegiYrF_bXgza1RaNG1sdXM */
border-style: solid;
border-width: 1px;
border-radius: .5rem;
max-width: 500px;
margin: 0 auto;
}
/* defind form title styling, including the box it's in */
.frm__title {
color:white;
background-color: transparent; /* This should be changed. Based on the site's overall color see here: https://drive.google.com/open?id=0B2MfNegiYrF_bXgza1RaNG1sdXM */
font-size:1.5rem;
border-radius:.2em .2em 0 0;
padding:.7rem .5rem .7rem .5rem;
}
.frm__text--medium {
margin:1rem 1rem 0 1rem;
font-size:.9rem;
}
.frm__text--small {
color:gray;
margin:1rem 1rem 0 1rem;
font-size:.4rem;
}
/* Set the form frame colors */
.frm__body {
font-size:.5rem;
padding:1em;
}
/* form label styling can be set here */
.frm__body label {
color:gray;
padding:0 0 0 .3rem;
}
/* Set the form element styleing here */
.frm__body
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
}
/* put anything in the footer, like the submit button, to apply different formatting. */
.frm__footer {
text-align:center;
padding:0 0 .7rem 0;
}
Raw
contact-form.html
<script type="text/javascript" language="JavaScript" src="https://secureform.luxsci.com/intranet/php/secureform.php?v=1&c=15743-6398-qeBJ&f=contact_form"></script>
<div class="frm__frame">
<div class="frm__title">
Email Us
</div>
<div class="frm__body">
<div class="frm__text--medium">
You can schedule an appointment by either calling us or filling out the form below:
</div>
<form name="contact_form" method="post" onSubmit="return secureform_submit();" action="https://secureform.luxsci.com/perl/post/15743-6398-qeBJ">
<section>
<div>
<label for="person_name">Name</label>
<input name="person_name" type="text" required>
</div>
</section>
<section>
<div>
<label for="email">Email</label>
<input name="email" type="email">
</div>
<div>
<label for="phone">Phone</label>
<input name="phone" type="tel" required>
</div>
</section>
<section>
<h3>Preferred day:</h3>
<div>
<input name="preferred_day" type="checkbox" value="Monday"> Monday
<input name="preferred_day" type="checkbox" value="Tuesday"> Tuesday
<input name="preferred_day" type="checkbox" value="Wednesday"> Wednesday
<br><input name="preferred_day" type="checkbox" value="Thursday"> Thursday
<input name="preferred_day" type="checkbox" value="Friday"> Friday
</div>
</section>
<section>
<h3>Preferred time(s):</h3>
<div>
<input name="preferred_time_for_appt" type="checkbox" value="Morning"> Morning
<input name="preferred_time_for_appt" type="checkbox" value="Afternoon"> Afternoon
</div>
</section>
<section>
<div>
<label for="comment">Comment:</label><br>
<textarea name="comment" cols="50" rows="5" required></textarea>
</div>
</section>
<input name="Page" type="hidden" value="Contact Page Email Form">
<div class="frm__footer">
<input type="submit" value="Contact Us" class="btn btn-outline">
</div>
</form>
</div>
</div>
Raw
header.html
<div style="text-align:left;">
<h1>
Service Title Goes Here <br>
<span class="provider-name">Dr. Firstname Lastname, DDS - City1, City2, and City3</span>
</h1>
<hr style="width:100%;border:0;height:1px;background:#333;background-image:linear-gradient(to right, #ccc, #333, #ccc);margin-bottom:5px;">
<a style="margin-left:.5em;line-height:1.75em;" href="/services">Explore All Services</a>
<hr style="width:100%;border:0;height:1px;background:#333;background-image: linear-gradient(to right, #ccc, #333, #ccc);margin-top:5px;">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment