CFGproject/Contact Form.html at main · sandra395/CFGproject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"> <!--Same as Portfolio-->

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="ContactForm.css"> <!--CONTACT CSS STYLE SHEET-->
<script src="script.js" defer></script> <!--JS FOR NAV BAR and POP UP-->

<title>Contact me</title> <!--23 June Added Title to Head-->
</head>
<body>

  <header class="header"> <!--Amended, added header as there were 2 x head -->
    <!--NEW NAV TEST 22/6-->
    <nav class="navbar">
      <div class="the-title title-push">SPS
      </div>
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="navbar-links">
        <ul>
          <li> <a href="index.html">Portfolio</a> </li>
          <li> <a href="Contact-Form.html">Contact</a></li>
         <li> <a href="https://www.instagram.com/">Instagram</a> </li>
        </ul>
      </div>
    </nav>
    </header>

    <!--NEW NAV TEST 22/6 ENDDDDDDDDDDDDD-->

    <!--EDIT 23 JUNE REMOVED SECOND BODY TAG AS THERE SHOULD ONLY BE ONE-->


 <h1 class = "contact-title">Let's Start a Conversation</h1>


 <!--CONTACT FORM STARTS HERE-->
  <!--added "p" details -->
  <!--edited class field to contactBox-->
  <!-- <div class="contactContainer"> -->
  <!-- CONTACT FORM STARTS HERE -->
<fieldset class="contactBox">
  <p class="para1">Send me a message and I'll get back to you within 2 working days.</p>
  <p class="para2">Please note: all fields are required.</p>

  <!-- Form Starts Here -->
  <form name="myForm" action="SubmitThankYou.html" method="get">

    <!-- Full Name -->
    <label for="fname">Full name:</label>
    <input type="text" id="fname" name="fname" placeholder="Your name here" required><br><br>

    <!-- Company Name -->
    <label for="cname">Company name:</label>
    <input type="text" id="cname" name="cname" placeholder="Your company name here" required><br><br>

    <!-- Email -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Your email address here" required><br><br>

    <!-- Phone Number -->
    <label for="phone">Phone number:</label>
    <input type="tel" id="phone" name="phone" placeholder="Your phone number here" required><br><br>

    <!-- Contact Details -->
    <div class="paragraphPhoneAddress">
      <p class="para3">Phone:</p>
      <p class="para4"><a href="tel:+447909090909">(+44) 079 090 90909</a></p>
      <p class="para5">Address:</p>
      <p class="para6"><a href="AddressMap.html">London EC3N 4AB</a></p>
      <p class="para5">Email:</p>
      <p class="para6"><a href="mailto:photography@SPS.com">photography@SPS.com</a></p>
    </div>

    <!-- Message -->
    <div class="text">
      <label for="Message">Your message:</label>
      <textarea id="Message" class="text" placeholder="Start typing your message here..." name="Message" rows="6" maxlength="3000" required></textarea>
    </div>

    <!-- Submit Button -->
    <div class="form">
      <button type="submit"><strong>Send message</strong></button>
    </div>

  </form>
</fieldset>
<!-- CONTACT FORM ENDS ---->

<!-- </div> -->

 <!--CONTACT FORM ENDS HERE-->


<!--FOOTER STARTS HERE


-->

  <form id="emailform">
    <footer id="the-footer">


      <!-- Form -->
    <p id="footer-title"><strong>Subscribe to my newsletter</strong></p>
    <p id="footer-subtitle"> Monthly photography tips and offers</p>
    <!-- <form id="emailform"> -->
      <label>Email address:</label>
      <input type="email" name="email" id="emailBox" placeholder="email@address.com">

      <button id="submitFooter" onclick="myFunction()"><strong>Submit</strong></button>
      <p id="copyright"> Copyright SPS © 2022<p>

      <!-- </form> -->
      <!-- Social links-->
      <p><a href="https://www.twitter.com/" target="_blank">
        <img id="Twitter" height="35" alt="Twitter icon" src="https://cdn1.iconfinder.com/data/icons/social-media-circle-7/512/Circled_Twitter_svg-1024.png">
      </a> </p>

        <p><a href="https://www.facebook.com/" target="_blank">
        <img id="Facebook" height="35" alt="Facebook icon" src="https://cdn3.iconfinder.com/data/icons/social-media-black-white-2/512/BW_Facebook_glyph_svg-1024.png">
      </a></p>
  <!-- Copyright -->

    </footer>
  </form>


  </body>
  </html>