Gravity Forms Styling

3 posts from 2 voices

• Started 1 year ago by bsachse
• Latest reply from bsachse
• This topic is not a support question

Tags:

• gravity forms
• propulsion

1. 

   bsachse
   Member

   How can I change gravity forms to match the form styling that's built-in to propulsion? Is there a specific css that I need to link it to? I tried changing the form CSS class name to point to base.css and style.css but it didn't work as intended. I also disabled gravity forms css output but the forms are still not matching correctly. The spacing between form fields seems too large. The form can be seen on the footer at brgreenlawncare.com

   Posted 1 year ago #
2. 

   Dude
   Dude

   Hey,
   it seems like wp-content/plugins/gravityforms/css/forms.css overwrites all default styles. They can be found in css/base.css and affect all form fields with the same type (text, password, etc.) - these styles will also apply to gravityforms input fields. Our contact form doesn't offer all field types so many elements require custom css code.

   The only code which needs to be changed is:
   

   #submit, .button{
   		padding:9px 22px;
   		cursor:pointer;
   		border:none;
   	}

   and:
   

   .input-text {
   		 -webkit-appearance: none;
   		border: 1px solid #e1e1e1;
   		padding: 6px 4px;
   		outline: none;
   		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   		color: #777;
   		margin: 0;
   		width: 210px;
   		max-width: 100%;
   		display: block;
   		margin-bottom: 20px;
   		background: #fff;
   		}

   because GF doesn't an element with the id "submit " or "button/input text" class. However the input text class code is also used for all text input fields and I'm not sure if it's required for GF.

   Posted 1 year ago #
3. 

   bsachse
   Member

   Adding this to custom.css seems to have done the trick.

   body .gform_wrapper .gform_body .gform_fields .input-text,
   body .gform_wrapper .gform_body .gform_fields input[type="text"],
   body .gform_wrapper .gform_body .gform_fields input[type="input"],
   body .gform_wrapper .gform_body .gform_fields input[type="password"],
   body .gform_wrapper .gform_body .gform_fields input[type="email"],
   body .gform_wrapper .gform_body .gform_fields textarea,
   body .gform_wrapper .gform_body .gform_fields select {
   margin: 0 0 0 0 !important
   }

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.