Financial Statement Layout [RESOLVED{

I am creating an income tax organizer for businesses. I need the ability for clients to enter their Profit & Loss Statement and Balance Sheet. I need to be able to have field headings to the left of the field and rows that sit next to each other. No vertical spacing or padding. It seems I am only able to reduce vertical spacing for the entire form, not just one section. When I reduce the vertical spacing, I lose field and section titles. Can anyone help me? Thank you, Kevin

Try adding a class to the field. Then styling the classes you want or need to position rather than targeting all fields via the default provided Gravity Forms classes.

Thanks for your reply. I’m a complete novice to classes and CSS. Please explain in detail what class I should add, how to and it to the field, and how to “style” the class. If it has anything to do with the “Style Sheet” or anything else like that, I will be completely lost. I know that there is a CSS field and how to add an HTML field to the form. I do not know anything beyond that.

Lol. No worries. Can you share the url?

And by field headings do you mean field labels like the name of the field?

You want there to be more space underneath each field or less?

Here’s the form URL: https://www.nyobc.com/wp-admin/admin.php?page=gf_edit_forms&id=2 I hope that’s what you need. Yes, I meant field headings. I want less space below each field. Actually, I want no vertical space between each field, as long as the field headings are to the left. Remember, I only want this in a particular section of the form, not the entire form. Thanks again.

Can you share the actual url where the form can be seen by me visiting your website? The link you shared takes me to admin and I don’t have credentials to access the site admin pages. Nor should you share them online.

I’m sorry. I told you I am a novice. How do I publish the form so you can see it?

I think I figured it out. I’m not that stupid. Here’s the link: https://www.nyobc.com/1167-2/. If that doesn’t work, then I guess I am that stupid.

Can you please explain exactly what you are wanting? I will help you with some CSS if you can.

I’m only concerned with the “INCOME STATEMENT (P&L)” section.

I want it to look like this:
2

Ok. Give me until tmrw (Evening). I’ll send you the CSS and tell you where to add it.

Awesome. Thank you so much!

1 Like

You will need to get rid of your two column layout. Right now I can’t float the elements properly because there is multiple fields on the same line. Please stack all fields.

That section of the form does not have a two-column layout.

I’m so sorry you told me that before. I’ll take another whack at it this evening.

1 Like

@minkoffcpa try this CSS out.

  • Add ready class inline to each field in the income section you want to have styled. See screenshot to know where to add a ready class

  • Add the CSS below to your customizer, see screenshot below as well if you need help navigating to your customizer.

      /* Copy and Paste me, please :) */
    
      .gform_wrapper .inline .gfield_label {
          float: left;
      }
      input#input_2_483.small, input#input_2_484.small, input#input_2_485.small, 
      input#input_2_486.small, input#input_2_487.small, input#input_2_488.small, 
      input#input_2_489.small, input#input_2_490.small, input#input_2_491.small, 
      input#input_2_492.small, input#input_2_493.small, {
          width: 50% !important;
          float: right;
      }
    

Where to add ready class inline

How to find your customizer

Where to copy and paste the above CSS

Without being able to log into your site and only depending on google developer tools it can be difficult guaranteeing the CSS will work. If you have any issues though just reply to the thread. I’ll take care of it.

1 Like

I put “inline” in the custom CSS Class of one of the fields. I entered the Additional CSS as you instructed. This is the result.

1 Like

Try removing the last comma right before width. The embedding css here is difficult.

  /* Copy and Paste me, please :) */

  .gform_wrapper .inline .gfield_label {
      float: left;
  }
  input#input_2_483.small, input#input_2_484.small, input#input_2_485.small, 
  input#input_2_486.small, input#input_2_487.small, input#input_2_488.small, 
  input#input_2_489.small, input#input_2_490.small, input#input_2_491.small, 
  input#input_2_492.small, input#input_2_493.small {
      width: 50% !important;
      float: right;
  }

When pasting try and click “paste and match style”

I pasted this and did not receive the same error though.

Also let’s try me regularly pasting:

.gform_wrapper .inline .gfield_label {
float: left;
}
input#input_2_483.small, input#input_2_484.small, input#input_2_485.small,
input#input_2_486.small, input#input_2_487.small, input#input_2_488.small,
input#input_2_489.small, input#input_2_490.small, input#input_2_491.small,
input#input_2_492.small, input#input_2_493.small {
width: 50% !important;
float: right;
}

If it doesn’t work I will have to separate each field. Was hoping to compress the code.

1 Like