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
*/ */

135
content/contact/_index.html
View file

@ -17,94 +17,57 @@ 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> <input
<div class="col-lg-10"> type="text"
<input class="form-control"
type="text" id="name"
class="form-control" name="name"
id="name" placeholder="Jay Lush"
name="name" required
placeholder="Jay Lush" />
required <label for="email">Email</label>
/> <input
</div> type="email"
</div> class="form-control"
<div class="form-group"> id="email"
<label for="email" class="col-lg-2 control-label">Email</label> name="email"
<div class="col-lg-10"> placeholder="jlush@iastate.edu"
<input required
type="email" />
class="form-control" <label for="phone">Phone number</label>
id="email" <input
name="email" type="tel"
placeholder="jlush@iastate.edu" class="form-control"
required id="phone"
/> name="phone"
</div> placeholder="(515) 294-2160"
</div> />
<div class="form-group"> <label for="subject">Subject</label>
<label for="phone" class="col-lg-2 control-label">Phone number</label> <input
<div class="col-lg-10"> type="text"
<input class="form-control"
type="tel" id="subject"
class="form-control" name="subject"
id="phone" placeholder="Beef genetics"
name="phone" required
placeholder="(515) 294-2160" />
/> <label for="message">Message</label>
</div> <textarea
</div> rows="5"
<div class="form-group"> class="form-control font-sans"
<label for="category" class="col-lg-2 control-label">Category</label> id="message"
<div class="col-lg-10"> name="body"
<select class="form-select" id="category"> required
<option>I'm hiring for artificial insemination</option> style="min-height: 72pt;"
<option>Something else</option> ></textarea>
</select> <button type="reset" class="btn btn-default">Cancel</button>
</div> <button type="submit" class="btn btn-primary pageclip-form__submit">
</div> <span>Submit</span>
<div class="form-group"> </button>
<label for="subject" class="col-lg-2 control-label">Subject</label>
<div class="col-lg-10">
<input
type="text"
class="form-control"
id="subject"
name="subject"
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">
<textarea
rows="5"
class="form-control font-sans"
id="message"
name="body"
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> </fieldset>
</form> </form>