Replace Google contact form with Pageclip contact form
This commit is contained in:
parent
6df0ca4dc4
commit
54cb859639
GPG key ID:
139C07724802BC5D
5 changed files with 93 additions and 10 deletions
46
Contact.html
46
Contact.html
|
|
@ -8,6 +8,46 @@ blurImageUrl: /img/venice-mailbox_blur.jpg
|
|||
motto: Contact Me
|
||||
---
|
||||
|
||||
<p>IFrames can be evil; you can <a href="https://docs.google.com/forms/d/e/1FAIpQLSfUhraXLpH7coIrP5xGOj2-JKtJTLec-OuZfw5JszRC5E4-Iw/viewform?usp=sf_link">open this form directly</a> if it's giving you trouble.</p>
|
||||
|
||||
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfUhraXLpH7coIrP5xGOj2-JKtJTLec-OuZfw5JszRC5E4-Iw/viewform?embedded=true" width="100%" height="1032" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
|
||||
<form class="form-horizontal pageclip-form"
|
||||
action="https://send.pageclip.co/xn1OfLsjWvXGIiKwsZinza5uZpXX7g9z/millironx-contact-form"
|
||||
method="post">
|
||||
<fieldset>
|
||||
<legend>Contact Me</legend>
|
||||
<div class="form-group">
|
||||
<label for="name" class="col-lg-2 control-label">Name</label>
|
||||
<div class="col-lg-10">
|
||||
<input type="text" class="form-control" id="name" name="name" 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">
|
||||
<input type="email" class="form-control" id="email" name="email" 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">
|
||||
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(515) 294-2160">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<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>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,11 @@
|
|||
<!-- <link href="/css/millironx_customstyles.css" rel="stylesheet" type="text/css"> -->
|
||||
<!-- Release styles: bundled using purifycss from the dev sources -->
|
||||
<link href="/css/bundle.css" rel="stylesheet" type="text/css">
|
||||
|
||||
{% if page.title == 'Contact Me' %}
|
||||
<!-- Immutible styles: library styles that can't be bundled -->
|
||||
<!-- Pageclip -->
|
||||
<link rel="stylesheet" href="https://s.pageclip.co/v1/pageclip.css" media="screen">
|
||||
{% endif %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -153,6 +157,11 @@
|
|||
<td><a href="https://github.com/purifycss/purifycss/blob/master/LICENSE">MIT
|
||||
License</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>jQuery Mask Plugin</td>
|
||||
<td><a href="https://igorescobar.github.io/jQuery-Mask-Plugin/">igorescobar.github.io</a></td>
|
||||
<td><a href="https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/LICENSE">MIT License</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tab-pane fade in" id="privacy">
|
||||
|
|
@ -312,6 +321,17 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{% if page.title == 'Contact Me' %}
|
||||
<!-- Script Bundle: JQuery Masks -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin@1.14.16/dist/jquery.mask.min.js" integrity="sha256-Kg2zTcFO9LXOc7IwcBx1YeUBJmekycsnTsq2RuFHSZU=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Script Bundle: Pageclip -->
|
||||
<script src="https://s.pageclip.co/v1/pageclip.js" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
$('#phone').mask('(000) 000-0000')
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -201,3 +201,8 @@ dl {
|
|||
footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Give forms elements style */
|
||||
input.invalid {
|
||||
border-color: red;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,3 +38,21 @@ $(window).scroll(function(e) {
|
|||
}
|
||||
|
||||
});
|
||||
|
||||
// Add class to invalid elements
|
||||
var invalidClassName = 'invalid'
|
||||
var inputs = document.querySelectorAll('input, select, textarea')
|
||||
inputs.forEach(function (input) {
|
||||
// Add a css class on submit when the input is invalid.
|
||||
input.addEventListener('invalid', function () {
|
||||
input.classList.add(invalidClassName)
|
||||
})
|
||||
|
||||
// Remove the class when the input becomes valid.
|
||||
// 'input' will fire each time the user types
|
||||
input.addEventListener('input', function () {
|
||||
if (input.validity.valid) {
|
||||
input.classList.remove(invalidClassName)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue