CodePen Embed - Contact Form | Photography HTML Contact Form Template

<div class="creative_content">
<!-- HERO HEADER -->
<div class="creative_heroheader page_contact">
<div class="creative_heroheader_inner">
<div class="heroheader_content_wrap" style="color: rgb(255, 255, 255); height: 342px;">
<div class="heroheader_content_inner">
<div class="heroheader_content">
<div class="content_inner">
<!-- HERO CONTENT HERE -->														
<div class="creative_contact">
<div class="creative_contact_in">
<div class="container">
<div class="contact">
<!-- BREADCRUMBS -->
<div class="creative_breadcrumbs">
<div class="creative_breadcrumbs_content">
<div class="container">
<p>
<a href="https://creativesalahu.com/" style="color: rgb(255, 255, 255);">Home</a>
/
<span>Contact</span>
</p>
</div>
</div>
</div>
<!-- /BREADCRUMBS -->													
<div class="title_holder">
<h3>Get in Touch with Us</h3>
</div>
<div class="contact__form">
<form action="/" method="post" class="contact_form" id="contact_form">
<!-- RETURN MESSAGES -->
<div class="returnmessage" data-success="Your message has been received, We will contact you soon."></div>
<div class="empty_notice"><span>Please Fill Required Fields</span></div>
<!-- /RETURN MESSAGES -->
<ul>
<li>
<div class="item">
<input type="text" id="name" placeholder="Your Name">
</div>
</li>
<li>
<div class="item">
<input type="text" id="email" placeholder="creativesalahu@gmail.com">
</div>
</li>
<li>
<div class="item">
<input type="text" id="subject" placeholder="Subject">
</div>
</li>
</ul>
<div class="clearfix"></div>
<div class="message">
<textarea id="message" placeholder="Message" cols="3" rows="5"></textarea>
</div>
<div class="button">
<input type="button" class="creative_contactsendbtn" value="Send Message">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /HERO CONTENT HERE -->
</div>
</div>
</div>
</div>
<div class="heroheader_bg_wrap">
<div class="overlay_color" style="background-color: rgb(61, 3, 3); opacity: 0.6; z-index: 1;"></div>
<div class="overlay_image"></div>
<div class="overlay_video"></div>
</div>
</div>
</div>
<!-- /HERO HEADER -->
</div>
<footer class="sticky-footer">
  <div class="container">
  <div class="footer-row">
    <div class="creditd"><a href="https://www.fiverr.com/creativesalahu/customize-or-fix-your-wordpress-website-errors-and-bugs" title="Contact on Fiverr">Want to integrate this design into a WordPress website?</a></div>
  <div class="social">
    <ul>
      <li>
        <a href="https://www.fiverr.com/creativesalahu" title="Fiverr"><img src="https://img.icons8.com/?size=100&id=ngc6JsBomclm&format=png&color=000000" alt="Contact on Fiverr"></a></li>
      <li>
    <a href="https://www.upwork.com/freelancers/~018d2497192b640611" title="Upwork">
      <img src="https://img.icons8.com/?size=100&id=whwDjQbvJcmB&format=png&color=000000" alt="Contact on Upwork">
    </a>
    </li>
      <li><a href="https://www.linkedin.com/in/salahudeen-447a961b1/" title="LinkedIn"><img src="https://img.icons8.com/?size=100&id=xuvGCOXi8Wyg&format=png&color=000000" alt="Contact on LinkedIn"></a></li>
    </ul>
  </div>
  </div>
    </div>
</footer>

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Roboto+Slab:wght@100..900&display=swap');
body {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    font-weight: 400;
    margin: 0;
    font-family: "Quicksand", sans-serif;
}
input, textarea {
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
input:focus, input:active, textarea:focus, textarea:active{
    outline: none;
}
.creative_content {
    width: 100%;
    clear: both;
    float: left;
}
.creative_heroheader {
    width: 100%;
    float: left;
    clear: both;
    height: auto;
}
.creative_heroheader_inner {
    width: 100%;
    float: left;
    clear: both;
    height: auto;
    position: relative;
}
.creative_heroheader .heroheader_content_wrap {
    display: table;
    text-align: center;
}
.creative_heroheader .heroheader_content_wrap {
    width: 100%;
    float: left;
    clear: both;
    height: auto;
    position: relative;
    z-index: 30;
}
.creative_heroheader.page_contact .heroheader_content_inner {
    display: block;
    vertical-align: baseline;
}
.creative_heroheader .heroheader_content_inner {
    display: table-cell;
    vertical-align: middle;
}
.creative_contact {
    float: left;
    clear: both;
    width: 100%;
    background-color: transparent;
}
.creative_contact_in {
       height: auto;
    float: left;
    clear: both;
    width: 100%;
    display: flex;
    align-items: center;
}
.container {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 40px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container, .fl-col-12 {
    width: 100%;
}
.container, .row {
    height: auto;
}
.clearfix, .clearfix:after, .container {
    clear: both;
}
.creative_contact .contact {
    width: 100%;
    padding: 75px 30px;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.creative_heroheader.page_contact .creative_breadcrumbs {
    background-color: transparent;
}
.creative_breadcrumbs {
    width: 100%;
    clear: both;
    background-color: #f5f5f5;
    padding: 0px 0px 30px 0px;
}
.creative_breadcrumbs_content {
    text-align: center;
}

.creative_heroheader.page_contact .creative_breadcrumbs p {
    color: #fff;
}
.creative_breadcrumbs p {
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 1;
    color: #555;
}
.creative_breadcrumbs p a {
    text-decoration: none;
    color: #555;
    position: relative;
}
.creative_breadcrumbs p span {
    color: #999;
}
.creative_contact .title_holder {
    margin-bottom: 67px;
    margin-top: -8px;
}
.creative_contact .title_holder h3 {
    margin: 0px;
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 0px;
    color: #fff;
}
.creative_contact .contact__form {
    float: left;
    clear: both;
    width: 100%;
}
.contact_form .returnmessage {
    display: none;
    position: relative;
}
.contact_form .empty_notice {
    color: #fff;
    display: none;
    position: relative;
    margin-bottom: 30px;
}
.creative_contact .contact__form ul {
    margin: 0px;
    list-style-type: none;
    margin-left: -20px;
    padding: 0px;
}

.creative_contact .contact__form ul li {
    margin: 0px;
    width: 33.3333%;
    float: left;
    padding-left: 20px;
    margin-bottom: 34px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.creative_contact .contact__form ul li .item {
    display: block;
    width: 100%;
    float: left;
    text-align: left;
}
.creative_contact .contact__form ul li .item input {
    width: 100%;
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom-color: rgba(255, 255, 255, .3);
    padding: 10px 0px !important;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0px;
}
.creative_contact .contact__form ul li .item input:hover, .creative_contact .contact__form ul li .item input:focus {
    border-bottom-color: #fff;
}
.creative_contact .contact__form .message {
    margin-bottom: 26px;
}
.creative_contact .contact__form .message textarea {
    width: 100%;
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom-color: rgba(255, 255, 255, .3);
    padding: 10px 0px !important;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0px;
    font-weight: 300;
    height: 120px;
}

.creative_contact .creative_contactsendbtn {
    width: auto;
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom-color: #fff;
    padding: 10px 0px !important;
    color: #fff;
    font-size: 15px;
    letter-spacing: 0px;
    margin-bottom: 20px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
        cursor: pointer;
}
.creative_contact .creative_contactsendbtn:hover {
    border-bottom-color: transparent;
}
.creative_heroheader .heroheader_bg_wrap, .creative_heroheader .heroheader_bg_wrap .overlay_color, .creative_heroheader .heroheader_bg_wrap .overlay_image, .creative_heroheader .heroheader_bg_wrap .overlay_video {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.creative_heroheader .heroheader_bg_wrap .overlay_color {
    background-color: #000;
    opacity: 1;
}
.creative_heroheader.page_contact .heroheader_bg_wrap .overlay_image {
    background-image: url(https://imgpanda.com/upload/ib/IjWcuNUgOw.jpeg);
}
.creative_heroheader .heroheader_bg_wrap .overlay_image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-image: url();
}
/* ======== Sticky Footer ========= */
  .sticky-footer{
       position: fixed;
    width: 100%;
        background: #333;
    z-index: 99;
    bottom: 0;
  }
.sticky-footer .footer-row{
      display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    padding-right: 15px;
}
.creditd a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
        font-size: 16px;
}
.social ul{
      display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0px;
    column-gap: 10px;
    align-items: center;
}
.social ul li a{
     display: flex;
    background: #fff;
    height: 30px;
    width: 30px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
}
.social ul li a img{
       max-width: 20px;
}

/* ======== RESPONSIVE IPAD PRO ========= */
@media (max-width: 1040px) {
  .creative_contact_in{
        height: auto;
  }
       .creative_contact .contact {
        padding: 10px 0px !important;
    }
    .container{
            padding: 0px 20px;
    }
    .creative_contact .contact__form ul {
        margin-left: -50px;
    }
        .creative_contact .contact__form ul li {
        width: 50%;
        padding-left: 50px;
    }
        .creative_contact .contact__form ul li:last-child {
        width: 100%;
    }
    .creative_breadcrumbs{
            padding: 30px 0px 44px 0px;
    }
}

/* ======== IPAD ======= */
@media (max-width: 768px) {
        .creative_contact .contact__form ul {
        margin-left: 0px;
    }
    .creative_contact .contact__form ul li {
        width: 100%;
        padding-left: 0px;
    }
}

/* =================== IPHONE ==================== */
@media (max-width: 480px) {
.creative_contact .title_holder h3{
    font-size: 28px;
}
}

jQuery(document).ready(function () {
    "use strict";
    jQuery(".creative_contactsendbtn").on("click", function () {
        var name = jQuery(".contact_form #name").val();
        var email = jQuery(".contact_form #email").val();
        var message = jQuery(".contact_form #message").val();
        var subject = jQuery(".contact_form #subject").val();
        var success = jQuery(".contact_form .returnmessage").data("success");
        jQuery(".contact_form .returnmessage").empty();
        if (name === "" || email === "" || message === "") {
            jQuery("div.empty_notice").slideDown(500).delay(2000).slideUp(500);
        }
    });
});

This Pen is owned by CreativeSalahu on CodePen.

See more by @CreativeSalahu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://code.jquery.com/jquery-3.6.0.min.js