Docs

[John]

Hey Gang,

I’m trying to add an on page email opt-in form on my X page on the home page right under a sizzle video, check it out:

http://prntscr.com/b22wut

There are 2 problems with this first this is raw content form mail chimp “form creator” and if that achieving that side by side effect was NOT easy let me tell you, total pain in the ass and it still doesn’t look that good; especially when stacked side by side with the X design standard that I’ve pretty much come to expect for my sites.

Ok with enough CSS and hard work I could get over that but when some one signs up for the email list they are taken via _blank to a mail chimp opt in page that is BEYOND ugly; I mean we are talking the internet circa 1990 here, take a look:

http://prntscr.com/b23003

So with all that being said I’ve played around with the convertPlug add on and I’m getting more experienced with additional tools that come bundled with X but is there one that is bundled (or hell even a block that I’m overlooking) allows really simple forms to opt in on a page (converPlug, almost does it but it more of the pop-up nature).

Thanks for the question, and if you want to see the site in action here you go:
http://www.fe.johncliffordtaylor.com/

Thanks for the help X team,

John

[Rupok]

Hi John,

Thanks for writing in! Mailchimp is mostly used plugin out there and we always try to provide the best one bundled with X. So it should solve most of the requirements when you are looking for ‘simple’ opt-in form. However ConvertPlug is great if you want or love something like pop-up. It seems you have discovered both of them so not sure what I should suggest. If you use the Mailchimp or ConvertPlug and need our assistance to do some cosmetic changes, we can do that for you. So let us know how we could help you on this.

Cheers!

[John]

Great thanks for the help, so to get started this is the page in question:

http://www.fe.johncliffordtaylor.com/

The area that I would like a better solution on is right here:

http://prntscr.com/b26y7p

The horizontal on page opt in you see is a mail chimp form built with there form builder. And then sculpted and adjusted to look ok in X via some hand made CSS. Sadly the submit button spacing doesn’t hold up when view via a mobile device. So that’s one problem.

The next and more significant problem is when someone enters the name and email they are taken to a really gorse mail chimp confirmation page. This window pops up and pretty much hi-jacks the users entire on-site experience for an incredibly trivial and completely unnecessary confirmation message.

So how you can help is:

Is there a way to add the opt-in treatment in page that retains responsive design. And has a less…invasive confirmation process then what I have now?

Thanks for the continued help!

John

[Rupok]

Hi John,

Thanks for writing back. To make it responsive for mobile, you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 611px) {
#mce-FNAME, #mce-EMAIL {
  display: block;
  margin: 20px auto;
  max-width: 300px;
  width: 100%;
}
}

We can’t do something regarding the confirmation page as we can’t control how mailchimp works.

Cheers!

[John]

Thanks your CSS worked like a charm. One quick extra request, is there any way that make the CSS on the submit button make it go to the same width as the name and email fields when page in in mobile format?

http://prntscr.com/b2e7zm

Sort of like a block format but only when its on mobile?

And also I found this:

https://www.youtube.com/watch?v=pJokwLGJdLc

Could be a helpful resource if you get some else with this question!

Thanks for all the help Rupok!

[Joao]

Hi John,

Please try updating the code above provide for:

@media only screen and (max-width: 611px) {
#mce-FNAME, #mce-EMAIL, #mc-embedded-subscribe {
  display: block;
  margin: 20px auto;
  max-width: 300px;
  width: 100%;
}
}

Hope that helps,

Joao

[Author]

Posts