Contact Pop Up: How to set up to Match Demo?

Hi,

I’m struggling to get the Contact Pop Up to match the appearance of the Demo version.

Do you have a code snippet I can use, or is there a tutorial I haven’t found?

http://tdyjobs.wpstagecoach.com/

Hi,

You just need to add your address, like you’ve added the contact form ID.
And if you want to use the contact form layout for CF7 that we’re also using, you can find it here.

Excellent - thanks!

The other thing I’d like is to NOT display the map - should I add a display: none; to the CSS? Which element? (I tried adding it to .map-contact, but no luck.

You’ll need to add it to: .contact-popup-map

Ah, ok, got it.

Last question, I promise!
What’s the trick to getting the Name, Email, Message & Submit to center?
I’ve tried several things but nothing is moving.

This would do it:


.contact-popup-form input, .contact-popup-form, .contact-popup-form textarea {
    text-align: center;
}

Hmm, it still won’t shift over.

I added that line as shown below. Should it go somewhere different?

/*--------------------------------------------------------------

Menu contact

--------------------------------------------------------------*/
.contact-popup {
background-color: #1a1b20;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.7s;
transition: all 0.7s;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
align-items: center;
justify-content: center;
overflow-y: auto;
}

/* added to center contact popup form */

.contact-popup-form input, .contact-popup-form, .contact-popup-form textarea {
text-align: center;
}

Well, first of all it should go in your custom CSS, like Customize > Additional CSS. Not in the main stylesheet. That’s where all your custom CSS should go, otherwise you would lose it when you update the theme.

It looks fine though, you might need to clear your cache.

Hm, I’ve cleared the cache & tested several browsers, but still nothing is shifting over. :confused:

Is there a setting I should have changed somewhere? Or maybe another element I need to add to the Additional CSS? This is all that is there now:

.contact-popup-map {
display: none;
}

.contact-popup-form input, .contact-popup-form, .contact-popup-form textarea {
text-align: center;
}

I think probably I misunderstood and you actually wanted to center the whole contact form? If so, add this please:


.contact-popup .row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

That’s it! Thanks SO much for your help!!!