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;
}
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
*/
@ -330,6 +352,10 @@ footer {
display: none;
}
main {
width: calc(100% - 10rem);
}
/*
Container-type helper classes
*/

49
content/contact/_index.html
View file

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