Adding my email address

HTML-CSS
1

How do i add my email address to the submit button.

2

Please provide some code to help us explain what’s going on. Thanks

3

Sorry i forgot the code.

<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
<title>Charisma Communications - Gallery</title>
<div id="page">
  <div id="header">
	  <style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #5c400a;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #231404;
}

.container {
  border-radius: 5px;
  background-color: #5c400a;
  padding: 20px;
}
</style>
	  
	  
	  
	  
    <a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
    <ul id="navigation">
      <li class="selected">
        <a href="index.html" title="Home"></a>
      </li>
      <li>
        <a href="thalidomide.html">Thalidomide</a>
      </li>
      <li>
        <a href="about.html">About</a>
      </li>
      <li>
        <a href="speaker.html">Speaker</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li class="last-child">
        <a href="contact.html">Contact us</a>
      </li>
    </ul>
  </div>

  <p>&nbsp;</p>
  <div id="contents">
	 <img src="images/photographylogo.png" width="950" height="160" alt=""/>
<div class="gallery">
	<div class="thumbnail">
        <a href="images/Grackle.jpg" data-lightbox="gallery" data-title="A mother Grackle feeding a baby.o"><img src="images/Grackle.jpg" alt="A mother Grackle feeding a baby"></a>
      </div>
      <div class="thumbnail">
        <a href="images/AmericanGoldfinch.jpg" data-lightbox="gallery" data-title="American Goldfinch"><img src="images/AmericanGoldfinch.jpg" alt="American Goldfinch"></a>
      </div>
	<div class="thumbnail">
        <a href="images/AmericanGoldfinch2.jpg" data-lightbox="gallery" data-title="Second Picture of American Goldfinch"><img src="images/AmericanGoldfinch2.jpg" alt="Second Picture of American Goldfinch"></a>
      </div>
      <div class="thumbnail">
        <a href="images/cappedchickadee.jpg" data-lightbox="gallery" data-title="Black-capped chickadee"><img src="images/cappedchickadee.jpg" alt="Black-capped chickadee"></a>
      </div>
      <div class="thumbnail">
        <a href="images/cappedchickadee2.jpg" data-lightbox="gallery" data-title="Second Picture of Black-capped chickadee"><img src="images/cappedchickadee2.jpg" alt="Second Picture of Black-capped chickadee"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Harris.jpg" data-lightbox="gallery" data-title="Harris Sparrow"><img src="images/Harris.jpg" alt="Harris Sparrow"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Finch.jpg" data-lightbox="gallery" data-title="House Finch"><img src="images/Finch.jpg" alt="House Finch"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Finch2.jpg" data-lightbox="gallery" data-title="Second Picture of House Finch"><img src="images/Finch2.jpg" alt="Second Picture of House Finch"></a>
      </div><br>
      <div class="thumbnail">
        <a href="images/Morning%20Dove.jpg" data-lightbox="gallery" data-title="Morning Dove"><img src="images/Morning%20Dove.jpg" alt="Morning Dove"></a>
      </div>
	<div class="thumbnail">
        <a href="images/doves.jpg" data-lightbox="gallery" data-title="Pair of Morning Dove"><img src="images/doves.jpg" alt="Pair of Morning Dove"></a>
      </div>
      <div class="thumbnail">
        <a href="images/White%20Throated%20Sparrow.jpg" data-lightbox="gallery" data-title="White Throated Sparrow"><img src="images/White%20Throated%20Sparrow.jpg" alt="White Throated Sparrow"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Eastern%20Phoebe.jpg" data-lightbox="gallery" data-title="Eastern Phoebe"><img src="images/Eastern%20Phoebe.jpg" alt="Eastern Phoebe"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Mallard%20Duck.jpg" data-lightbox="gallery" data-title="Female Mallard Duck"><img src="images/Mallard%20Duck.jpg" alt="Female Mallard Duck"></a>
      </div>
      <div class="thumbnail">
        <a href="images/White%20Tail%20Deer.jpg" data-lightbox="gallery" data-title="Female White-tailed deer"><img src="images/White%20Tail%20Deer.jpg" alt="Female White-tailed deer"></a>
      </div>
	  <div class="thumbnail">
        <a href="images/squirrel.jpg" data-lightbox="gallery" data-title="Eastern Gray Squirrel"><img src="images/squirrel.jpg" alt="Eastern Gray Squirrel"></a>
      </div>
	<div class="thumbnail">
        <a href="images/commun sparrow.jpg" data-lightbox="gallery" data-title="Commun Sparrow"><img src="images/commun sparrow.jpg" alt="Commun Sparrow"></a>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
  </div>
	<div><h3>Leave a comment</h3>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form></div>
  <div id="footer">
    <div class="connect"></div>
	 <p>Copyright © 2024. Charisma Communications All Rights Reserved.</p> 
   
  </div>
</div>```
4

hi there!
you need to add your server-side script as a action attribute value and method attribute value post.

5

sorry . i’m new to this, so i don’t what to do.

6

Well. Then you will need to learn frontend and backend programming completely.

7

Or hire some one to make your website.

8

clicking on email button. doesn’t seem to work.

http://www.charismacommunications.ca/gallery.html


<link rel="stylesheet" href="css/style.css" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
<title>Charisma Communications - Gallery</title>
<div id="page">
  <div id="header">
    <a href="index.html" id="logo"><img src="images/logo.png" alt="LOGO"></a>
    <ul id="navigation">
      <li class="selected">
        <a href="index.html" title="Home"></a>
      </li>
      <li>
        <a href="thalidomide.html">Thalidomide</a>
      </li>
      <li>
        <a href="about.html">About</a>
      </li>
      <li>
        <a href="speaker.html">Speaker</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li class="last-child">
        <a href="contact.html">Contact us</a>
      </li>
    </ul>
  </div>

  <p>&nbsp;</p>
  <div id="contents">
	 <img src="images/photographylogo.png" width="950" height="160" alt=""/>
<div class="gallery">
	<div class="thumbnail">
        <a href="images/Grackle.jpg" data-lightbox="gallery" data-title="A mother Grackle feeding a baby.o"><img src="images/Grackle.jpg" alt="A mother Grackle feeding a baby"></a>
      </div>
      <div class="thumbnail">
        <a href="images/AmericanGoldfinch.jpg" data-lightbox="gallery" data-title="American Goldfinch"><img src="images/AmericanGoldfinch.jpg" alt="American Goldfinch"></a>
      </div>
	<div class="thumbnail">
        <a href="images/AmericanGoldfinch2.jpg" data-lightbox="gallery" data-title="Second Picture of American Goldfinch"><img src="images/AmericanGoldfinch2.jpg" alt="Second Picture of American Goldfinch"></a>
      </div>
      <div class="thumbnail">
        <a href="images/cappedchickadee.jpg" data-lightbox="gallery" data-title="Black-capped chickadee"><img src="images/cappedchickadee.jpg" alt="Black-capped chickadee"></a>
      </div>
      <div class="thumbnail">
        <a href="images/cappedchickadee2.jpg" data-lightbox="gallery" data-title="Second Picture of Black-capped chickadee"><img src="images/cappedchickadee2.jpg" alt="Second Picture of Black-capped chickadee"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Harris.jpg" data-lightbox="gallery" data-title="Harris Sparrow"><img src="images/Harris.jpg" alt="Harris Sparrow"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Finch.jpg" data-lightbox="gallery" data-title="House Finch"><img src="images/Finch.jpg" alt="House Finch"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Finch2.jpg" data-lightbox="gallery" data-title="Second Picture of House Finch"><img src="images/Finch2.jpg" alt="Second Picture of House Finch"></a>
      </div><br>
      <div class="thumbnail">
        <a href="images/Morning%20Dove.jpg" data-lightbox="gallery" data-title="Morning Dove"><img src="images/Morning%20Dove.jpg" alt="Morning Dove"></a>
      </div>
	<div class="thumbnail">
        <a href="images/doves.jpg" data-lightbox="gallery" data-title="Pair of Morning Dove"><img src="images/doves.jpg" alt="Pair of Morning Dove"></a>
      </div>
      <div class="thumbnail">
        <a href="images/White%20Throated%20Sparrow.jpg" data-lightbox="gallery" data-title="White Throated Sparrow"><img src="images/White%20Throated%20Sparrow.jpg" alt="White Throated Sparrow"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Eastern%20Phoebe.jpg" data-lightbox="gallery" data-title="Eastern Phoebe"><img src="images/Eastern%20Phoebe.jpg" alt="Eastern Phoebe"></a>
      </div>
      <div class="thumbnail">
        <a href="images/Mallard%20Duck.jpg" data-lightbox="gallery" data-title="Female Mallard Duck"><img src="images/Mallard%20Duck.jpg" alt="Female Mallard Duck"></a>
      </div>
      <div class="thumbnail">
        <a href="images/White%20Tail%20Deer.jpg" data-lightbox="gallery" data-title="Female White-tailed deer"><img src="images/White%20Tail%20Deer.jpg" alt="Female White-tailed deer"></a>
      </div>
	  <div class="thumbnail">
        <a href="images/squirrel.jpg" data-lightbox="gallery" data-title="Eastern Gray Squirrel"><img src="images/squirrel.jpg" alt="Eastern Gray Squirrel"></a>
      </div>
	<div class="thumbnail">
        <a href="images/commun sparrow.jpg" data-lightbox="gallery" data-title="Commun Sparrow"><img src="images/commun sparrow.jpg" alt="Commun Sparrow"></a>
      </div>
    </div>
	 
	 <div class="comment">
		 <br>
  <h2>we would like to hear what you think of the photo's</h2>
  <a href="mailto: louis@charismacommunications.ca"><img src="images/email-us.png" width="200" height="67" alt="email icon"/></a> </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.min.js"></script>
  </div>
  <div id="footer">
    <div class="connect"></div>
	 <p>Copyright © 2024. Charisma Communications All Rights Reserved.</p> 
   
  </div>
</div>
9

Hi there,

You should remove the space between mailto: and the e-mail address.

1 Like
10

ok thank you very much.

2 Likes