Multiple forms on 1 page « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms MailChimp Add-On

Devin Day
Member

(tried to find the answer in the forums before posting)

Hello, I am using the the Genesis framework and gravity forms + Mailchimp.

I have a Gravity + mailchimp subscribe form styled in the sidebar here (http://susanheathfield.com/). It's using the Gravity form widget.

I am trying to add another form (as a hook in via genesis simple hooks) after each blog post. The problem is when I add the second form in the post either by a shortcode or as a function, it screws up the CSS of the form in the sidebar as well as the second form. It also seems to pull in fields that don't exist.

Here is a screen shot of the sidebar form and how it gets messed up when I add the second form as mentioned above. http://skit.ch/bqcr

Can you help me figure this out?

Posted 13 years ago on Tuesday May 24, 2011 | Permalink
Kevin Flahaut
Administrator

The forms you're adding in the sidebar aren't loading the default Gravity Forms styles. When you add a form in the post body, the plugin detects this and enqueues the styles so that's why you see a difference on those pages vs. the ones with just the sidebar form.

When embedding a form via a function call you must also manually include the necessary Gravity Forms related Javascript and CSS via the built in WordPress enqueue capabilities. Gravity Forms does not include these by default when calling a form via a function call and they are necessary for forms that contain conditional logic or the date picker field.

We strongly recommend you enqueue the scripts rather than including them as hard-coded calls in your theme. Implementing it this way will insure that Gravity Forms does not include them on the page if they are already present. It is also a good practice to only load these scripts on the front end.

Gravity Forms 1.5 introduced the gravity_form_enqueue_scripts function which allows you to easily enqueue the necessary Gravity Forms' scripts and styles when manually embedding a form. This is also useful if you are using a GF widget and do not wish for the styles and scripts to be loaded inline.

You will need to manually enqueue the scripts and CSS by placing a short script block in your theme's header.php file.

You can find more information at the URLs below

http://www.gravityhelp.com/documentation/page/Embedding_A_Form

http://www.gravityhelp.com/documentation/page/Gravity_form_enqueue_scripts

Posted 13 years ago on Tuesday May 24, 2011 | Permalink
Devin Day
Member

Hi Kevin, thanks for you reply.

I am not having any luck modifying as you suggested.

1) I added the enqueue script like this - http://skit.ch/bqc1

2) I am still getting getting issues with the forms - (my sidebar form is being styled based on my own styles I added to my main css file)

Posted 13 years ago on Tuesday May 24, 2011 | Permalink
Devin Day
Member

I should also mention that the sidebar widget gets messed up when add the enqueue script and nothing else.

If I have the widget on the sidebar (second form removed) and I add the enqueue script via a hook as in my screenshot in the previous post my sidebar widget still wigs out.

Posted 13 years ago on Tuesday May 24, 2011 | Permalink
Carl Hancock
Administrator

What is most likely happening is your custom CSS you added to your themes stylesheet is being overridden by styles in the Gravity Forms stylesheet that gets output when you enqueue the scripts for the form that appears in the post via the Genesis hook. So your styles are being overridden by CSS inheritance when the Gravity Forms stylesheet is present.

You need to adjust your custom styles to override any Gravity Forms styles. To do this, you need to see what styles are impacting your sidebar form and add/change the custom styles in your theme stylesheet to take those into account. Your custom styles may not be targeting the sidebar form specifically enough so styles are then inherited when the Gravity Forms stylesheet is present. Here are some examples of how to target Gravity Forms form elements with CSS more specifically:

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

Posted 13 years ago on Tuesday May 24, 2011 | Permalink

Hi Carl,

I don't believe this is the issue either as I used that documentation to create my custom CSS. Here is what I did a few weeks ago and like I said, it was based on that very documentations.

/***** Newsletter sidebar form ******/
body #gform_wrapper_2 {
	background: url(images/purple/form_bg2.jpg) no-repeat top left #222222;
	width: 265px;
	height: 100%;
	margin: 0 15px 0 15px;
	padding: 10px 10px 10px 15px;
	border: 5px;
	border-style: solid;
	border-color: #000000;
}

body #gform_wrapper_2 .gform_heading .gform_title  {
	color: #FFFFFF;
	line-height: 20px;
	font-size: 135%;
	text-align: left;
	text-decoration: none;
	text-transform: normal;
	font-weight: normal;
	text-shadow:2px 2px #444444;
}

body #gform_wrapper_2 .gform_heading .gform_description {
	color: #000000;
	text-align: center;
	font-size: 12px;
}

body #gform_wrapper_2 .gform_body {
	border:1px
}

body #gform_wrapper_2 .gform_body .gform_fields .gfield .gfield_label {color: #FFFFFF}

body #gform_wrapper_2 .gform_body .gform_fields .gfield .gfield_label .gfield_required {color: #FF0002}

/*body #gform_wrapper_2 .gform_body .gform_fields {border:1px solid red}
body #gform_wrapper_2 .gform_body .gform_fields .gfield {border:1px solid red}*/
body #gform_wrapper_2 .gform_body .gform_fields .gfield .ginput_container {color: #FFFFFF; font-size: 11px;}
body .gform_wrapper_2 .gform_body .gform_fields #field_2_1.gfield input[type=text] {width:300px; height: 20px;}

#gform_submit_button_2 {
	color: #FFFFFF;
	text-transform: capitalize;
	width: 245px;
}

Posted 13 years ago on Tuesday May 24, 2011 | Permalink

Kevin Flahaut
Administrator

I just looked again and your home page (with form in sidebar) is not loading the default forms.css file so it's not being enqueued properly. The extra field that you're referring to is the "spam honeypot" field thats normally hidden by the default form styles.

screenshot: http://grab.by/acN1

On the contact page, the forms.css file is being loaded (because Gravity Forms is enqueueing the script based on the form in the post body) and you'll see that the result is the sidebar form inherits the default form styles and the honeypot field is hidden.

screenshot: http://grab.by/acN9

So, you've still got the issue I mentioned before. You may need to check with your theme author to find out about the proper placement for the enqueue script.

Posted 13 years ago on Tuesday May 24, 2011 | Permalink
Devin Day
Member

Hi Kevin, Thanks for your continued effort on my issue.

I removed the reference to the enqueue script that I had loading via a hook in the head as I referenced in a previous thread above. With this removed the sidebar widget works fine. On the contacts page, or any other page.

This issue is only happening when I try to add a form via shortcode or function via a hook. Even if I only add a enqueue script funtion via hook it messes up the form in the sidebar.

So I am not sure what I am doing wrong or how to fix. (i.e. properly enqueue with the enqueue function - When I add the enqueue script to the head of the page via hook as I showed in a screenshot previously or add a form via shortcode or function through a hook that is when things go wrong)

Posted 13 years ago on Tuesday May 24, 2011 | Permalink
Carl Hancock
Administrator

Send us a WordPress admin login for this site and let us know which page is having the issue via our Contact Us form and we can take a look and see what you are doing.

Posted 13 years ago on Tuesday May 24, 2011 | Permalink
Devin Day
Member

Contact form info sent. Thanks!

Posted 13 years ago on Tuesday May 24, 2011 | Permalink