Overlaying form onto an image.

Hi there goldenideasforyou,

When it comes to issues like this, I’m going to be a bit limited in what I can provide, especially when working with this particular plugin, which is going to be a lot tricker to manipulate for an overlay. I’m not able to provide any custom coded solutions here but I’ll be happy to make some suggestions to get you going.

In a situation where you are wanting to achieve a specific layout in the overlay, I’d first recommend using the MailChimp embed form code rather than the plugin, due to the increased flexibility provided by the simpler form action code.

– Add a Signup Form to Your Website: https://eepurl.com/gOGN

From there, checking out resources like this one should help you get going in the right direction:

– https://stackoverflow.com/questions/21395662/overlay-div-on-image
– https://stackoverflow.com/questions/1183633/can-you-overlay-a-transparent-div-on-an-image
– https://stackoverflow.com/questions/20930915/how-to-overlay-a-form-field-over-an-image-with-a-fixed-width

Let me know if there’s anything else I can help out with regarding this plugin specifically, and hopefully the links above are helpful for you!

-Kath

Hi Kath, so I’ve figure out a couple of issues for what’s going on. The person who created everything has some CSS code relating to MailChimp that’s causing a lot of conflicts with other images.

/* MAIL CHIMP */

#mc_signup {
	background-image: url('https://hungerforhappiness.com/wp-content/uploads/2014/05/formbg.jpg');
	background-repeat: no-repeat;
	background-size: 620px 140px;
	width: 620px;
	height: 140px;
}

#mc_signup_submit {
width: 50px !important;
border: 1px;
height: 50px;
border-radius: 40px !important;
font-size: 20px;
color: #fff;
background-color: #5d2969;
margin: -50px 0 0 550px !important;
-webkit-transform: rotate(-10deg);
}

#mc_signup_form .mc_var_label {
	display: none;
}

#mc-indicates-required {
	display: none;
}

#mc_display_rewards {
	display: none;
}

#mc_signup_form .mc_input {
	width: 170px;
	height: 25px;
	background-color: #d18525;
	color: #fff;
	font-weight: bold;
	border: none;
	padding-left: 5px;
}

input#mc_mv_FNAME {
	margin: 60px 0px 0 190px;
	position: absolute;
}

input#mc_mv_EMAIL {
	margin: 60px 0px 0 370px;
}

#mc_message {
	position: absolute;
	margin: 90px 0 0 190px;
	font-size: 18px;
	width: 350px;
	text-align: center;
	line-height: 12px;
}

::-webkit-input-placeholder {
   color: #FFF;
}

:-moz-placeholder { /* Firefox 18- */
   color: #FFF;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #FFF;
}

:-ms-input-placeholder {
   color: #FFF;
}

div.headerform {
margin: -10px 0 0 -50px;
}

div.mailchimpformbottom {
display: inline-table;
}

#widgetized-area{
	width:980px;
	height:85px;
	overflow:hidden;
	padding-left:10px;
	padding-bottom:15px;
	}

#widget_wrapper{
	background-color:white;
	width:100%;
	overflow:hidden;
	float:left;
	}
#widget_container{
	background-color:#471b3f;
	overflow:hidden;
	border-color:#FFF;
	}

#widget_header{
	width:97%;
	background-color:#471b3f;
	margin:10px 10px 10px 10px;
	overflow:hidden;
	border-style:solid;
	border-width:4px;
	border-color:white;
	}

img {
     -moz-user-select: none;
     border: 0 none;
     margin: 0;
     padding: 0;
     width: 0px;
}

Whenever that CSS is present images in the blog posts along with the Widgets disappear. My assumption is something isn’t closed correctly, but I’ve not been able to find it.

Hi there goldenideasforyou,

From what I can tell, it looks like that CSS is a customized version of classes and ids which do refer to the components of the form in the widget (i.e. everything starting with #mc or .mc) – unfortunately I’m not able to debug CSS that customized for a theme, so I’ll be a bit limited in my ability to help at this point. Temporarily removing the styles set up for anything “mc” to narrow down the issue could potentially be a good next step.

if there’s anything else I can help out with regarding this plugin specifically, I’d be more than happy to do so.

-Kath

Thanks I’ll give that a show and see what I can find out.

Well I finally fixed it mc_kath! Thanks for the help you gave, even though it wasn’t part of what solved the issue. It related to the img command at the end of the CSS. I hate fixing other people’s code.

I’m glad to hear you’ve gotten it all sorted out, and thanks for letting me know!

Would you mind marking this support thread as resolved? Thank you ??

-Kath