Add Contact Form with Contact Form 7 Plugin
Code used for Contact Form:
<p>[text* your-name placeholder "Name"]</p> <p>[email* your-email placeholder "Email"]</p> <p>[textarea your-message placeholder "Message..."]</p> <p class="contact-submit-holder">[submit "Send"]</p>
CSS code:
.wpcf7-form { max-width: 100%; width: 770px; margin: 0 auto; font-size: 22px; color: #000; } .wpcf7-form p { margin-bottom: 0 !important; } .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea { border: 0; border-bottom: 1px solid; padding-bottom: 5px; font-size: 16px; font-family: 'Open Sans', sans-serif; width: 100%; line-height: 25px; color: #000; font-weight: 400; margin-bottom: 35px; } .wpcf7 textarea { height: 150px; } .wpcf7 input[type=text]::-webkit-input-placeholder, .wpcf7 input[type=email]::-webkit-input-placeholder, .wpcf7 textarea::-webkit-input-placeholder { font-family: 'Open Sans', sans-serif; color: #000; font-weight: 400; font-size: 16px; line-height: 25px; } .wpcf7 input[type=text]::-moz-placeholder, .wpcf7 input[type=email]::-moz-placeholder, .wpcf7 textarea::-moz-placeholder { font-family: 'Open Sans', sans-serif; color: #000; font-weight: 400; font-size: 16px; line-height: 25px; opacity: 1; } .wpcf7 input[type=text]:-ms-input-placeholder, .wpcf7 input[type=email]:-ms-input-placeholder, .wpcf7 textarea:-ms-input-placeholder { font-family: 'Open Sans', sans-serif; color: #000; font-weight: 400; font-size: 16px; line-height: 25px; } .wpcf7 input[type=text]:-moz-placeholder, .wpcf7 input[type=email]:-moz-placeholder, .wpcf7 textarea:-moz-placeholder { font-family: 'Open Sans', sans-serif; color: #000; font-weight: 400; font-size: 16px; line-height: 25px; opacity: 1; } .wpcf7 input[type=text], .wpcf7 input[type=email] { padding-bottom: 5px; } .wpcf7 input[name="your-name"] { margin-top: 0; padding-top: 0; } .contact-submit-holder { position: relative; margin-bottom: 25px; } .wpcf7 input[type=submit] { display: inline-block; border: none; text-align: center; padding: 20px 40px 20px 45px; cursor: pointer; margin-bottom: 25px; vertical-align: middle; text-decoration: none; background: transparent; font-family: 'Open Sans', sans-serif; color: #fff !important; background-color: #f1576b; padding-bottom: 17px; padding-top: 17px; padding-left: 60px; padding-right: 60px; transition: all .2s linear; border-radius: 50px; font-size: 18px; font-weight: 700; } .wpcf7 input[type=submit]:hover { background-color: #000; color: #fff; } span.wpcf7-not-valid-tip { font-size: 12px; } div.wpcf7-response-output { margin: 0; padding: 0.2em 1em; font-size: 14px; } div.wpcf7 .ajax-loader { display: none !important; }