Style the Contact Form 7 like the default Jupiter form - Outline Style


#1

Objective:
The Contact Form 7 should look like the default Jupiter contact form.

Things to consider:
We will be using some custom class HTML wrappers and CSS to make this possible.
We will implement the Outline Style only. The rest of the styles will be added on demand.

Downloadable Files:

  1. Dark Style - Final HTML/CSS code https://gist.github.com/danishiqbal4/2ffd136f01df5e970cb6b67b81ec8c93

  2. Light Style - Final HTML/CSS code https://gist.github.com/danishiqbal4/f3ee8edf28eeeb98ae37544ceb350629

Implementation:

OUTLINE STYLE - Dark

  1. From the dashboard, add a new Contact Form 7.

  2. In the form tab of the new form, remove every code from the textarea box.

  1. For our example, we will now add 4 fields each one for the name, email, subject and message. We will also add a submit button.

  2. Click on the text button to add a box for the name field. A popup will show up and add the labels as per requirement.

Ensure you add the below class to the Class attribute field in the popup.

text-input s_txt-input

Note: For the big text area box, you have to add these classes mk-textarea s_txt-input

  1. The field we added above will look like below:

    [text* your-name class:text-input class:s_txt-input placeholder "Your Name"]

  2. Now, we will wrap some HTML around it so that it will look like below:

    <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>

  3. Now, for the email, click on the email button and add the required labels and classes which is text-input s_txt-input
    Again wrap the email code also in the HTML shown above so that it looks like below:

    <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>

  4. Likewise, add fields for subject and message also. For the message box, you will click on the text area button and add a different class which is mk-textarea s_txt-input

  5. Now, add the submit button and add below classes to it’s class attribute.

    mk-progress-button contact-outline-submit outline-btn-dark

    Wrap it inside the form row HTML so that it looks like:

    <div class="mk-form-row">
    [submit class:mk-progress-button class:contact-outline-submit class:outline-btn-dark "SEND"]
    </div>

  6. After adding every element, the final code will look like below:

    <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-dark "SEND"]
    </div>

  7. There is still one last thing which needs to be done to complete the HTML part. We have to add a parent wrapper which will wrap this whole code like below:

    <div class="mk-contact-form-wrapper s_contact outline-style s_outline contact-dark dark ">
    <!-- Add all the Above code here -->

    </div>

  8. For the CSS part, please add the below CSS to Jupiter -> Theme Options -> Advanced -> Custom 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;
    }

OUTLINE STYLE - Light
To use the light style, you have to replace the dark label with light label in the code.


Contact shortcode improvements
#2

Hi,

Thank you very much for this great code.

Can you give us also the code for the version with 3 row on top (see picture) ?

| Your Name | Your Phone | Your Email |

| Your message |

Thank you very much for your great work.

Best regards,

Gilles


#3

Hello,

Any Idea about my request ?

Thank you very much for this great code.

Can you give us also the code for the version with 3 row on top (see picture) ?

| Your Name | Your Phone | Your Email |

Best regards,


#4

HI adnplus, in order to create 3 columns inside a row, you just need to add a CSS class to the “mk-form-row” wrappers. So, it would be like:

<div class="mk-form-row one-third">
<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 one-third">
<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 one-third">
<div class="mk-form-full s_form-all">[text your-subject class:text-input class:s_txt-input placeholder "Your Subject"]</div>
</div>

Hope it helps :slight_smile:


#5

Hi,

Thank you so much for your help and your very great code one-third.

Best regards.