-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
128 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| # JQuery Example | ||
|
|
||
| This is a very simple client-side form that submits the contact form with ajax to the webtask server. | ||
|
|
||
| To try it, make sure you change the form's action parameter in the HTML with the url of yout webtask. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| <html> | ||
| <head> | ||
| <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.1.0/sweetalert2.min.css"> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <form class="well form-horizontal" action="<your webtask url>" id="contact-form"> | ||
| <fieldset> | ||
|
|
||
| <legend>Contact Us Today!</legend> | ||
|
|
||
| <div class="form-group"> | ||
| <label class="col-md-4 control-label">Name</label> | ||
| <div class="col-md-4 inputGroupContainer"> | ||
| <div class="input-group"> | ||
| <span class="input-group-addon"> | ||
| <i class="glyphicon glyphicon-user"></i> | ||
| </span> | ||
| <input name="name" placeholder="Name" class="form-control" type="text" required> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label class="col-md-4 control-label">E-Mail</label> | ||
| <div class="col-md-4 inputGroupContainer"> | ||
| <div class="input-group"> | ||
| <span class="input-group-addon"> | ||
| <i class="glyphicon glyphicon-envelope"></i> | ||
| </span> | ||
| <input name="email" placeholder="E-Mail Address" class="form-control" type="text" required> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label class="col-md-4 control-label">Phone #</label> | ||
| <div class="col-md-4 inputGroupContainer"> | ||
| <div class="input-group"> | ||
| <span class="input-group-addon"> | ||
| <i class="glyphicon glyphicon-earphone"></i> | ||
| </span> | ||
| <input name="phone" placeholder="(845)555-1212" class="form-control" type="text"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label class="col-md-4 control-label">Company</label> | ||
| <div class="col-md-4 inputGroupContainer"> | ||
| <div class="input-group"> | ||
| <span class="input-group-addon"> | ||
| <i class="glyphicon glyphicon-home"></i> | ||
| </span> | ||
| <input name="company" placeholder="Company" class="form-control" type="text"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-group"> | ||
| <label class="col-md-4 control-label">Message</label> | ||
| <div class="col-md-4 inputGroupContainer"> | ||
| <div class="input-group"> | ||
| <span class="input-group-addon"> | ||
| <i class="glyphicon glyphicon-pencil"></i> | ||
| </span> | ||
| <textarea class="form-control" name="message" placeholder="Project Description"></textarea> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="alert alert-success" role="alert" id="success_message" style="display:none;">Success | ||
| <i class="glyphicon glyphicon-thumbs-up"></i> | ||
| Thanks for contacting us, we will get back to you shortly.</div> | ||
|
|
||
| <div class="alert alert-error" role="alert" id="error_message" style="display:none;">Error | ||
| <i class="glyphicon glyphicon-thumbs-up"></i> | ||
| There was a problem sending your message. Please try again in a few minutes.</div> | ||
|
|
||
| <div class="form-group"> | ||
| <label class="col-md-4 control-label"></label> | ||
| <div class="col-md-4"> | ||
| <button type="submit" class="btn btn-warning">Send | ||
| <span class="glyphicon glyphicon-send"></span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
|
|
||
| </fieldset> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | ||
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/sweetalert2/6.1.0/sweetalert2.min.js"></script> | ||
|
|
||
| <script> | ||
| $('#contact-form').submit(function(event) { | ||
| var form = $(this); | ||
| $.ajax({ | ||
| type: 'POST', | ||
| url: form.attr('action'), | ||
| data: form.serialize(), | ||
| dataType: 'json', | ||
| encode: true | ||
| }) | ||
| .done(function(data) { | ||
| swal('Thank You!', data.message, 'success') | ||
| }).fail(function(data) { | ||
| console.log(data); | ||
| if (typeof data.responseJSON !== 'undefined' && typeof data.responseJSON.details !== 'undefined') { | ||
| swal('Oops...', data.responseJSON.details, 'error'); | ||
| } else { | ||
| swal('Oops...', 'We\'re sorry, something went wrong. Please try again in a few minutes.', 'error'); | ||
| } | ||
| }); | ||
| event.preventDefault(); | ||
| }); | ||
| </script> | ||
| </body> |