Sai_Ritish
/
openpower.foundation
forked from website/openpower.foundation
1
0
Fork 0
Code Pull Requests Activity

change the form submission system to be uniform for the entire website

Browse Source 
Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
newmemberlevels
Toshaan Bharvani 3 years ago
parent 9003ba9f5a
commit 488759506b
5 changed files with 236 additions and 118 deletions
Show Stats Download Patch File Download Diff File

97
themes/openpowerfoundation/assets/js/form.js
Unescape Escape View File

@ -0,0 +1,97 @@
jQuery(document).ready(function($) {
"use strict";
$(formname).submit(function() {
var f = $(this).find('.form-group'),
ferror = false,
emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
f.children('input').each(function() {
var i = $(this);
var rule = i.attr('data-rule');
if (rule !== undefined) {
var ierror = false;
var pos = rule.indexOf(':', 0);
if (pos >= 0) {
var exp = rule.substr(pos + 1, rule.length);
rule = rule.substr(0, pos);
} else {
rule = rule.substr(pos + 1, rule.length);
}
switch (rule) {
case 'required':
if (i.val() === '') {
ferror = ierror = true;
}
break;
case 'minlen':
if (i.val().length < parseInt(exp)) {
ferror = ierror = true;
}
break;
case 'email':
if (!emailExp.test(i.val())) {
ferror = ierror = true;
}
break;
case 'checked':
if (!i.attr('checked')) {
ferror = ierror = true;
}
break;
case 'regexp':
exp = new RegExp(exp);
if (!exp.test(i.val())) {
ferror = ierror = true;
}
break;
}
i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
}
});
f.children('textarea').each(function() {
var i = $(this);
var rule = i.attr('data-rule');
if (rule !== undefined) {
var ierror = false;
var pos = rule.indexOf(':', 0);
if (pos >= 0) {
var exp = rule.substr(pos + 1, rule.length);
rule = rule.substr(0, pos);
} else {
rule = rule.substr(pos + 1, rule.length);
}
switch (rule) {
case 'required':
if (i.val() === '') {
ferror = ierror = true;
}
break;
case 'minlen':
if (i.val().length < parseInt(exp)) {
ferror = ierror = true;
}
break;
}
i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
}
});
if (ferror) {
return false;
} else {
var str = $(this).serialize();
$.ajax({
type: "POST",
data: str,
url: submiturl,
complete: function() {
$("#sendmessage").addClass("show");
$("#errormessage").removeClass("show");
$('.contactForm').find("input, textarea").val("");
if(goal) {
_paq.push(['trackGoal', goal]);
}
}
});
return false;
}
});
});

20
themes/openpowerfoundation/layouts/contact/list.html
Unescape Escape View File

@ -1,13 +1,19 @@
{{ partial "header.html" . }} {{ partial "header.html" . }}

{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}

<main id="main" class="main governance">
<main id="main"> <div class="container">

<div class="row no-gutters">
<div class="col-lg-12 text-center"><h1 class="h2 section-header my-3 my-md-5 pb-2">{{ .Title }}</h1></div>
</div>
<div class="row">
<div class="col-lg-6">
{{ .Content }}
</div>
<div class="col-lg-6 text-center">
{{ partial "contactform.html" . }} {{ partial "contactform.html" . }}

</div>
</div>
</div>
</section> </section>

</main> </main>

{{ partial "footer.html" . }} {{ partial "footer.html" . }}

44
themes/openpowerfoundation/layouts/partials/contactform.html
Unescape Escape View File

@ -1,11 +1,13 @@
<script> <script>
var contacturl = "{{ .Site.Params.forms.contact.URI }}"; var formname = "form.contactForm";
var submiturl = "{{ .Site.Params.forms.contact.URI }}";
{{ if .Site.Params.forms.contact.goal }}
var goal = "{{ .Site.Params.forms.contact.goal }}";
{{ end }}
</script> </script>
<section id="contact"> <section id="contact">
<div class="container"> <div class="container"><div class="row wow fadeInUp">
<div class="row wow fadeInUp"> <div class="col-lg-12 col-md-12"><div class="form">
<div class="col-lg-6 offset-lg-2 col-md-12">
<div class="form">
<div id="sendmessage">Your message has been sent. Thank you!</div> <div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage">Error</div> <div id="errormessage">Error</div>
<form role="form" name="contactForm" class="contactForm" id="contactForm" action="" method="post"> <form role="form" name="contactForm" class="contactForm" id="contactForm" action="" method="post">
@ -16,30 +18,40 @@
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-group col-lg-6"> <div class="form-group col-lg-12">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email address" /> <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email address" />
<div class="validation"></div> <div class="validation"></div>
</div> </div>
<div class="form-group col-lg-6"> </div>
<input type="text" class="form-control" name="telephone" id="telephone" placeholder="Your Telephone" data-rule="minlen:8" data-msg="Please enter a telephone number" /> <div class="form-row">
<div class="validation"></div> <div class="form-group col-lg-12">
<select name="contact" id="contact">
{{ range .Param "contacts" }}
{{ . }}
<option value="{{ .queue }}">{{ .name }}</option>
{{ end }}
</select>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-row">
<div class="form-group col-lg-12">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 characters" /> <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 characters" />
<div class="validation"></div> <div class="validation"></div>
</div> </div>
<div class="form-group"> </div>
<div class="form-row">
<div class="form-group col-lg-12">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea> <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div> <div class="validation"></div>
</div> </div>
<div class="text-center"> </div>
<div class="form-row">
<div class="form-group col-lg-12 text-center">
<input type="hidden" name="url" value="{{ $.Page.Permalink | absURL }}" /> <input type="hidden" name="url" value="{{ $.Page.Permalink | absURL }}" />
<button class="btn btn-outline-primary mb-4 mt-4" type="submit" title="Send Message">Send Message</button> <button class="btn btn-outline-primary mb-4 mt-4" type="submit" title="Send Message">Send Message</button>
</div> </div>
</form>
</div>
</div>
</div>
</div> </div>
</form>
</div></div>
</div></div>
</section> </section>

9
themes/openpowerfoundation/layouts/partials/footer.html
Unescape Escape View File

@ -55,12 +55,9 @@
{{ $jqueryformjavascript := resources.Get "js/jquery.form.js" }} {{ $jqueryformjavascript := resources.Get "js/jquery.form.js" }}
{{ $jqueryformjs := $jqueryformjavascript | resources.Minify }} {{ $jqueryformjs := $jqueryformjavascript | resources.Minify }}
<script src="{{ $jqueryformjs.RelPermalink }}"></script> <script src="{{ $jqueryformjs.RelPermalink }}"></script>
{{ $contactjavascript := resources.Get "js/contactform.js" }} {{ $formjavascript := resources.Get "js/form.js" }}
{{ $contactjs := $contactjavascript | resources.Minify }} {{ $formjs := $formjavascript | resources.Minify }}
<script src="{{ $contactjs.RelPermalink }}"></script> <script src="{{ $formjs.RelPermalink }}"></script>
{{ $hubrequestjavascript := resources.Get "js/hubrequestform.js" }}
{{ $hubrequestjs := $hubrequestjavascript | resources.Minify }}
<script src="{{ $hubrequestjs.RelPermalink }}"></script>
{{ $changelogjavascript := resources.Get "js/changelog.js" }} {{ $changelogjavascript := resources.Get "js/changelog.js" }}
{{ $changelogjs := $changelogjavascript | resources.Minify }} {{ $changelogjs := $changelogjavascript | resources.Minify }}
<script src="{{ $changelogjs.RelPermalink }}"></script> <script src="{{ $changelogjs.RelPermalink }}"></script>

48
themes/openpowerfoundation/layouts/partials/hubform.html
Unescape Escape View File

@ -1,12 +1,14 @@
{{ $hubdata := index $.Site.Data.hub }} {{ $hubdata := index $.Site.Data.hub }}
<script> <script>
var huburl = "{{ .Site.Params.forms.hub.URI }}"; var formname = "form.hubRequestForm";
var submiturl = "{{ .Site.Params.forms.hub.URI }}";
{{ if .Site.Params.forms.hub.goal }}
var goal = "{{ .Site.Params.forms.hub.goal }}";
{{ end }}
</script> </script>
<section id="hub"> <section id="hub">
<div class="container"> <div class="container"> <div class="row wow fadeInUp">
<div class="row wow fadeInUp"> <div class="col-lg-8 offset-lg-2 col-md-12 mt-5 mb-5"><div class="form">
<div class="col-lg-8 offset-lg-2 col-md-12 mt-5 mb-5">
<div class="form">
<div id="sendmessage" style="display:none">Your request has been sent. Thank you!</div> <div id="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
<div id="errormessage" style="display:none">Error</div> <div id="errormessage" style="display:none">Error</div>
<form role="form" name="hubRequestForm" class="hubRequestForm" id="hubRequestForm" action="" method="post"> <form role="form" name="hubRequestForm" class="hubRequestForm" id="hubRequestForm" action="" method="post">
@ -22,49 +24,53 @@
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-group col-lg-6"> <div class="form-group col-lg-6">
<input type="text" class="form-control" name="companyname" id="companyname" placeholder="Your Company Name" data-rule="minlen:4" data-msg="Please enter your Company Name" /> <input type="text" class="form-control" name="companyname" id="companyname" placeholder="Your Company/Project Name" data-rule="minlen:4" data-msg="Please enter your Company Name" />
<div class="validation"></div> <div class="validation"></div>
</div> </div>
<div class="form-group col-lg-6"> <div class="form-group col-lg-6">
<input type="text" class="form-control" name="companyurl" id="companyurl" placeholder="Your Company URL" data-rule="minlen:8" data-msg="Please enter your Company URL" /> <input type="text" class="form-control" name="companyurl" id="companyurl" placeholder="Your Company/Project URL" data-rule="minlen:8" data-msg="Please enter your Company URL" />
<div class="validation"></div> <div class="validation"></div>
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-group col-lg-6"> <div class="form-group col-lg-6">
<input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project Name" data-rule="minlen:4" data-msg="Please enter the project name" /> <input type="text" class="form-control" name="projectname" id="projectname" placeholder="Project/Product Name" data-rule="minlen:4" data-msg="Please enter the project name" />
<div class="validation"></div> <div class="validation"></div>
</div> </div>
<div class="form-group col-lg-6"> <div class="form-group col-lg-6">
<input type="text" class="form-control" name="projecturl" id="projecturl" placeholder="Project URL" data-rule="minlen:8" data-msg="Please enter the project URL" /> <input type="text" class="form-control" name="projecturl" id="projecturl" placeholder="Project/Product SCM URL" data-rule="minlen:8" data-msg="Please enter the project URL" />
<div class="validation"></div> <div class="validation"></div>
</div> </div>
</div> </div>
<div> <div><h3>What OpenPOWER resources do you require?</h3></div>
<h3>What OpenPOWER resources do you require?</h3>
</div>
<div class="form-row"> <div class="form-row">
<div class="form-group col-lg-6"> <div class="form-group col-lg-6">
{{ range $hubdata.accesstype }} {{ range $hubdata.accesstype }}
<input type="checkbox" class="mr-2" id="{{ .name }}" name="{{ .name }}" value="{{ .name }}">{{ .name }}<br> <input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
{{ end }} {{ end }}
</div> </div>
<div class="form-group col-lg-6"> <div class="form-group col-lg-6">
{{ range $hubdata.additions }} {{ range $hubdata.additions }}
<input type="checkbox" class="mr-2" id="{{ .name }}" name="{{ .name }}" value="{{ .name }}">{{ .name }}<br> <input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
{{ end }} {{ end }}
</div> </div>
<input type="hidden" id="typeofaccess" class="typeofaccess" value="">
</div> </div>
<div class="form-group"> <div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write a short explanation about getting access. (Why, How, Whatfor, how long)" placeholder="Please write a short explanation about getting access. (Why, How, Whatfor, how long)"></textarea> <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write a short explanation about getting access. (Why, How, Whatfor, how long)" placeholder="Please write a short explanation about getting access. (Why, How, Whatfor, how long)"></textarea>
<div class="validation"></div> <div class="validation"></div>
</div> </div>
<div class="text-center"> <div class="text-center"><button class="btn btn-outline-primary" type="submit" title="Send Message">Request your resource</button></div>
<button class="btn btn-outline-primary" type="submit" title="Send Message">Request your resource</button>
</div>
</form> </form>
</div> </div></div>
</div> </div></div>
</div>
</div>
</section> </section>
<script>
function updateTypeOfAccess() {
var typeofaccess = [];
$('input[id="access"]:checked').each(function() {
typeofaccess.push(this.value);
});
document.getElementById("typeofaccess").value = typeofaccess;
};
</script>

Write Preview
Loading…
Cancel
Save