millironx/pages
1
0
Fork 0
Code Issues Pull requests Releases Packages Activity

refactor: Make form page conform to new styles

Browse source
This commit is contained in:
Thomas A. Christensen II 2024-12-01 19:30:57 -07:00
parent e8fbe1813b
commit 64fc0d2d4d
Signed by: millironx
GPG key ID: B7044A3432851F64
2 changed files with 75 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
assets/styles/millironx.css
View file

@ -131,6 +131,28 @@ footer {
align-items: center; align-items: center;
} }
form {
margin: 1rem;
}
fieldset {
padding: 1rem;
}
input,
select,
textarea {
width: 100%;
margin-bottom: 0.5rem;
}
input:invalid,
select:invalid,
textarea:invalid {
border-bottom-width: 2px;
border-bottom-color: var(--ear-tag-red);
}
/* /*
Container-type helper classes Container-type helper classes
*/ */
@ -330,6 +352,10 @@ footer {
display: none; display: none;
} }
main {
width: calc(100% - 10rem);
}
/* /*
Container-type helper classes Container-type helper classes
*/ */

49
content/contact/_index.html
View file

@ -17,17 +17,11 @@ fa-thumbnail: file-signature
validation: true validation: true
--- ---
<form <form action="https://usebasin.com/f/787df7bfd22e" method="post">
class="form-horizontal"
action="https://usebasin.com/f/787df7bfd22e"
method="post"
>
<fieldset> <fieldset>
<legend>Contact Me</legend> <legend>Contact Me</legend>
<input type="hidden" name="_gotcha" /> <input type="hidden" name="_gotcha" />
<div class="form-group"> <label for="name">Name</label>
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -36,11 +30,7 @@ validation: true
placeholder="Jay Lush" placeholder="Jay Lush"
required required
/> />
</div> <label for="email">Email</label>
</div>
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input <input
type="email" type="email"
class="form-control" class="form-control"
@ -49,11 +39,7 @@ validation: true
placeholder="jlush@iastate.edu" placeholder="jlush@iastate.edu"
required required
/> />
</div> <label for="phone">Phone number</label>
</div>
<div class="form-group">
<label for="phone" class="col-lg-2 control-label">Phone number</label>
<div class="col-lg-10">
<input <input
type="tel" type="tel"
class="form-control" class="form-control"
@ -61,20 +47,7 @@ validation: true
name="phone" name="phone"
placeholder="(515) 294-2160" placeholder="(515) 294-2160"
/> />
</div> <label for="subject">Subject</label>
</div>
<div class="form-group">
<label for="category" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select class="form-select" id="category">
<option>I'm hiring for artificial insemination</option>
<option>Something else</option>
</select>
</div>
</div>
<div class="form-group">
<label for="subject" class="col-lg-2 control-label">Subject</label>
<div class="col-lg-10">
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -83,11 +56,7 @@ validation: true
placeholder="Beef genetics" placeholder="Beef genetics"
required required
/> />
</div> <label for="message">Message</label>
</div>
<div class="form-group">
<label for="message" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea <textarea
rows="5" rows="5"
class="form-control font-sans" class="form-control font-sans"
@ -96,15 +65,9 @@ validation: true
required required
style="min-height: 72pt;" style="min-height: 72pt;"
></textarea> ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button> <button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary pageclip-form__submit"> <button type="submit" class="btn btn-primary pageclip-form__submit">
<span>Submit</span> <span>Submit</span>
</button> </button>
</div>
</div>
</fieldset> </fieldset>
</form> </form>