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

Replace Google contact form with Pageclip contact form

Browse source
This commit is contained in:
Thomas A. Christensen II 2021-08-01 16:18:27 -05:00
parent 6df0ca4dc4
commit 54cb859639
Signed by: millironx
GPG key ID: 139C07724802BC5D
5 changed files with 93 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
Contact.html
View file

@ -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>

26
_layouts/default.html
View file

@ -23,7 +23,7 @@
<!-- dev: bootstrap -->
<!-- <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eumbg33EfHRpbzLIm0lGs0JresLNj7c+5beuRW4d11/vF3Wv3YYmuudfOwMsCmp5" crossorigin="anonymous"
type="text/css">-->
type="text/css"> -->
<!-- dev: GSDK -->
<!-- <link href="/css/gsdk-main.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="/css/gsdk-demo.css" rel="stylesheet" type="text/css"> -->
@ -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>
</html>

6
css/bundle.css
View file

File diff suppressed because one or more lines are too long

7
css/millironx_customstyles.css
View file

@ -200,4 +200,9 @@ dl {
footer {
position: relative;
}
}
/* Give forms elements style */
input.invalid {
border-color: red;
}

18
js/MillironX_CustomScripts.js
View file

@ -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)
}
})
})