Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danishiqbal4/f3ee8edf28eeeb98ae37544ceb350629 to your computer and use it in GitHub Desktop.
Save danishiqbal4/f3ee8edf28eeeb98ae37544ceb350629 to your computer and use it in GitHub Desktop.
Contact Form 7 HTML code to look like the default Jupiter contact form - Outline Style - Light
<!-- HTML -->
<div class="mk-contact-form-wrapper s_contact outline-style s_outline contact-light light">
<div class="mk-form-row">
<div class="mk-form-full s_form-all">[text* your-name class:text-input class:s_txt-input placeholder "Your Name"]</div>
</div>
<div class="mk-form-row">
<div class="mk-form-full s_form-all">[email* your-email class:text-input class:s_txt-input placeholder "Your Email"]</div>
</div>
<div class="mk-form-row">
<div class="mk-form-full s_form-all">[text your-subject class:text-input class:s_txt-input placeholder "Your Subject"]</div>
</div>
<div class="mk-form-row">
<div class="mk-form-full s_form-all">[textarea your-message class:mk-textarea class:s_txt-input placeholder "Your Message"]</div>
</div>
<div class="mk-form-row">
[submit class:mk-progress-button class:contact-outline-submit class:outline-btn-light "SEND"]
</div>
</div>
<!-- CSS -->
.mk-contact-form-wrapper.s_contact.outline-style span.wpcf7-form-control-wrap{
display: block;
}
.mk-contact-form-wrapper.s_contact.outline-style span.wpcf7-form-control-wrap span.wpcf7-not-valid-tip{
position: absolute;
right: 5px;
top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment