[ThomxnjParticipant]

Hi, I added a contact form 7 shortcode to a full screen revolution slider on my site. It is displaying very odd, small and decreased size on the site. Any ideas on how to fix this?

Thanks

[ThomxnjParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

Thanks for writing in! Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ThomxnjParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

span.wpcf7-form-control-wrap.your-name input,input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    width: 200px !important;
    font-size: 15px !important;
    padding: 10px !important;
    line-height: 15px !important;
}
input.wpcf7-form-control.wpcf7-submit {
    padding: 15px !important;
    font-size: 12px !important;
}

Please edit your form and remove table, as it breaks responsive layout.

Thanks.

[ThomxnjParticipant]

Hi, thanks for looking into this. That code actually effected all the contact forms on that page, I’m looking to just target that one contact form in the slider. Also, if I removed the table from the form, it takes away the inline look I was going for. How can I achieve this without the table?

Thank you

[JadeModerator]

Hi Thom,

Please update the previous code to:

#wpcf7-f288-o1 span.wpcf7-form-control-wrap.your-name input,
#wpcf7-f288-o1 input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    width: 200px !important;
    font-size: 15px !important;
    padding: 10px !important;
    line-height: 15px !important;
}

#wpcf7-f288-o1 input.wpcf7-form-control.wpcf7-submit {
    padding: 15px !important;
    font-size: 12px !important;
}

Hope this helps.

[ThomxnjParticipant]

Awesome! Is there a way to make the fields and submit button all inline, other than how I was doing it with the table?

Thank you

[LelyModerator]

Hello Thom,

To make Your Name, Your Email, and Join Us button in one line and side by side, please add the following CSS:

.home .wpcf7 p {
    display: inline-block;
}

Hope this helps.

[Author]

Posts