Jump to content
Sign in to follow this  

Reduce Margin In Contact Form

Recommended Posts



Struggeling to find the right custom css to reduce margin between the rows / span from 22 down t 2px. Tried many versions. Here is one of many trials which do not work:

#page.wpcf7-form .post {

margin-top: 2px;

margin-bottom: 2px;



This what firebug css code says (margin adjusted in firebug) :

element.style {

margin-bottom: 2px;

margin-top: 2px;


p:before {

content: "";

display: block;

overflow: hidden;

width: 8em;


p {

margin: 1.6em 0;

orphans: 4;



<div id="wpcf7-f729-p100-o1" class="wpcf7">

<form class="wpcf7-form" method="post" action="/#wpcf7-f729-p100-o1">

<div style="display: none;">

<input type="hidden" value="729" name="_wpcf7">

<input type="hidden" value="3.3.1" name="_wpcf7_version">

<input type="hidden" value="wpcf7-f729-p100-o1" name="_wpcf7_unit_tag">

I would really appreciate any help.


  • Like 1

Share this post

Link to post
Share on other sites

If possible please post which site (full url) we should look at for troubleshooting. Many thanks!

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict


Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post

Link to post
Share on other sites


Not sure if I understand what you're trying to do but add the code below to your custom CSS:

.wpcf7-form p {
margin: 2px 0;

Please search our forums, before posting!

Share this post

Link to post
Share on other sites


This made it. (Reduced the margin between fields)

I´ve tried a similair one but with a dot in front of the p (.p)

Is there any rules or a short list of how to translate the firebug view into CSS?

I'm looking forward to the day when I know how create working code.

Many thanks for this ... and perhaps some more tips about learning css coding.

Share this post

Link to post
Share on other sites

For assistance with CSS, use this link - http://www.w3schools.com/css/

For help with understanding FireBug, read the documentation - http://getfirebug.com/faq/

I also found this which may help you!


The topic was marked as resolved.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • mtaus
      By mtaus
      Using the Pagelines Section Contact for this form (http://www.myedadvisor.com/contact/) and although I receive a success message on send, the email is never received. Is there any documentation?
    • jeomiland
      By jeomiland+
      Hi guys
      Is there a simple way to customize the default subject line (or any other attributes of the form) of the Contact Form module in Page Editor? I see where I can set who gets emails and how to add/change fields, but this seems essential and there must be an easy way than having to override code? Thanks for your help.
      form just sends a boring email with default Subjectline: "New message from [username]" and comes from sender Wordpress of [email protected] How can I customize these 2 things?
    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
      Thank you for any help,
    • Ttownhero
      By Ttownhero+
      I've recently added a contact form to my platform 5 site and cannot for the life of me get a response from it. I know with contact form 7, sometimes the information that was being sent through the host email server caused it to stop because it looked like spam, and thus we'd have to change some stuff. Is there any option to do this with the PF5 contact form? Or is it an issue I'm overlooking?
      site under construction is - www.gccismychurch.org