Project

Profile

Help

Contact Forms with Planio » contact-us.html

Gregor Schmidt, 05/28/2018 04:10 PM

 
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <title>Contact us!</title>
5

    
6
    <style type="text/css">
7
      body { font-family: sans-serif; margin: 2em; }
8
      label, input, textarea {
9
        width: 15em;
10
        float: left;
11
        margin-bottom: 1em;
12
        font-size: 1.2em;
13
      }
14
      label, input[type=submit] {width: 10em; clear: left;}
15
      #url, .thanks, .error { display:none; }
16
    </style>
17

    
18
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
19
    <script type="text/javascript">
20
      $(function() {
21
        $('form').submit(function() {
22
          $.ajax({
23
            url: $(this).attr('action') + '.json',
24
            method: 'post',
25
            dataType: 'json',
26
            data: $(this).serialize(),
27
            success: function () {
28
              $('form').hide();
29
              $('.thanks').show();
30
            },
31
            error: function () {
32
              $('.error').show();
33
            }
34
          });
35
          return false;
36
        });
37
      });
38
    </script>
39
  </head>
40

    
41
  <body>
42
    <h1>Contact us!</h1>
43
    <form action="https://example.plan.io/track" method="POST">
44
      <p class="error">Something went wrong. Please try again.</p>
45
      <label for="name">Your name:</label>
46
      <input name="name" id="name" type="text" />
47

    
48
      <label for="mail">Your email address:</label>
49
      <input name="mail" id="mail" type="email" />
50

    
51
      <label for="subject">Subject:</label>
52
      <input name="subject" id="subject" type="text" />
53

    
54
      <label for="description">Your message:</label>
55
      <textarea name="description" id="description" rows="5"></textarea>
56

    
57
      <input name="project" type="hidden" value="example-project" />
58
      <input name="url" id="url" type="text" />
59

    
60
      <input type="submit" value="Submit request" />
61
    </form>
62
    <p class="thanks">Thank you for getting in touch.</p>
63
  </body>
64
</html>
(2-2/2)