Mailchimp Form in Design Cloud Template

[guybower1]

hi

I just installed a footer from the design cloud templates which is specifically to be used as an email opt in form, in fact, it is called Mail, but I am struggling to see how to have it link to my Mailchimp account. There is no option on the submit button to link to that account.

Any suggestions on how to achieve this?

Barring this, I have even tried just recreating the section, as I want my form to have 4 equal sections side by side.

I have so far tried to bring it in as a Global Block and as a Raw Content. I even tried creating a new Global Block of Raw Content and brought the shortcode into that, but the Raw Content does not appear to be able to be sized 100%

So I either have the Widget with the form in it not 100% or the Raw Content with the shortcode in it not 100%. The sections have no padding or margins, the rows have no padding or margins, yet do not stretch to 100%

The crazy thing is all I have done is to duplicate the optin bar from the template, remove 3 unnecessary columns and then add the Global Block. It is in Global Blocks as Blog Opt In 2. The original form is Blog Opt In and uses a the email form widget

Any ideas what is stopping either of these ways from achieving a wider look?

cheers

[guybower1]

OK, found something called Global Container in Row and it was on. I turned it off and the row is now 100%

cheers

[guybower1]

Actually, this still is far from acceptable.

I downloaded a template from your design cloud area. This area specifically says they are “a collection of premium design assets…Headers and Footers are available to Pro users”. The premise behind this is that other than a change of content and possibly some tweaking, they work out of the box. This one does not even come close to working. It is simply 4 text boxes There appears to be no way to link a Mailchimp account to the submit button for a start, so how is it possibly an email opt in template?

I was able to bring in my Mailchimp form using a widget area, but the 4 sections of the original template behave very differently at screen size breaks to the 4 sections of my email form, which is far less than ideal.

I honestly did’t expect to install something like this and then spend ages trying to use CSS to try and mimic how it behaves originally. At XL, LG and MD, the 4 sections stay on one line; at SM, the last box drops down and takes up 100% of the space to equal the 3 above it; at XS, all 4 sections are on separate lines.

Is there either a way to have the opt in button link to the Mailchimp account, or to format an email form to match the behaviour of the original template.

It is most disappointing none of this is explained in the template, as I have already spent quite some time just to try and match the original look at large screen sizes.

Thanks so much for your time

[ruenel]

Hello @guybower1,

Thanks for writing in! The Email Opt In form is actually taken from Email Forms which you can set the settings by connecting it to your MailChimp account. Please edit the form in Pro > Emails Forms. To properly set it up, you might need to check out this documentation first:

• https://theme.co/docs/email-forms#setting-up-email-forms

Hope this helps.

[guybower1]

Thank you for your reply Ruenel

I’m not sure you understood my query. I already have an email form setup and connected to Mailchimp; that is not the issue. The issue is the Mail template I downloaded from the Design Cloud area. It is NOT an email form, which was what I expected. It is 4 text boxes, so I have spent a couple of hours trying to mimic how this template behaves at different page sizes, but have not been able to replicate it.

I have given the form the custom class of feastform and have been trying to play with various margins for the input areas as well as radius of the boxes, but nothing changes in the preview.

I was able to get the form inline using some CSS you supplied another user

$el {
  width: 100%;
}
.feastform .tco-subscribe-form {
   width:100%;
}

.feastform .tco-subscribe-form fieldset {
    min-width: 0;  
    display: inline-block;
    vertical-align:middle;
    width: 24%;
  	margin-right: 0.5% !important;
}

.feastform .tco-subscribe-form fieldset:last-of-type,
.feastform .tco-subscribe-form fieldset:last-child{
  	margin-right: 0; margin-bottom:0; margin-right:0 !important; margin-left:0;
}

.feastform .tco-subscribe-form #tco_subscribe_form_first_name, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
   margin-bottom:0; margin-right:0; margin-left:0;
   border-radius: 10px
}

So I have me email form inside the Footer 2 widget and have that widget placed in a Global Block. That global block is placed inside a Footer and this CSS is used in the footer section to format the form.

The thing is, no radius appears on any of the input areas and if I adjust the margin-right, nothing happens in the preview pane.

As I indicated in my post, my email form also behaves differently than the template I downloaded at different page sizes and I it to mimic that template. Frankly I am still trying to work out why this mail template is not actually a mail form, as would be expected. I am now spending lots of time trying to get the email form I had already created replicate the look and behaviour of this template and that doesn’t seem like what a template should be for.

If the template itself cannot be used as an email form, my question is how to get my existing email form behave in a similar manner at SM size. Here is an example of what happens now

As you can see, firstly, none of the input areas have any radius, yet the radius is set to 10px and the sign up button does not fill the container at this break point.

I just find this a little disappointing on downloading a predesigned mail template from your Design Cloud area. It should at least come with some guidance as to how to get it to actually be an email opt in form

Thanks so much for your time

[ruenel]

Hello @guybower1,

We apologize for the Mail template for having a placeholder Email Form. To get your issue removed, I will ask you to remove your custom css first and then use this one instead:

.feastform .tco-subscribe-form {
  width:100%;
  position: relative;
}

.feastform .tco-subscribe-form fieldset {
    min-width: 0;  
    display: inline-block;
  	float: left;
    vertical-align:middle;
    width: 24.25% !important;
  	margin-right: 1% ;
}

.feastform .tco-subscribe-form fieldset:last-of-type,
.feastform .tco-subscribe-form fieldset:last-child{
  	margin-right: 0; 
  	margin-bottom:0; 
  	margin-right:0; 
  	margin-left:0;
}

.feastform .tco-subscribe-form #tco_subscribe_form_first_name, 
.feastform .tco-subscribe-form input[type="text"], 
.feastform .tco-subscribe-form input[type="email"] {
   	margin-bottom:0; 
  	margin-right:0; 
  	margin-left:0;
   	border-radius: 0;
}

.feastform .tco-subscribe-form input[type="submit"] {
  margin-top:0; 
  margin-bottom:0; 
  margin-right:0; 
  margin-left:0;
}

@media(max-width: 979px){
  .feastform .tco-subscribe-form fieldset {
    width: 32.666%;
  	margin-right: 1% !important;
    margin-bottom: 10px;
	}
  
  .feastform .tco-subscribe-form fieldset:nth-last-of-type(2),
  .feastform .tco-subscribe-form fieldset:nth-last-child(2){
    margin-right: 0 !important;
	}

	.feastform .tco-subscribe-form fieldset:last-of-type,
	.feastform .tco-subscribe-form fieldset:last-child{
    width: 100%;
    margin: 0 auto 10px;
  }
}

@media(max-width: 480px){
  .feastform .tco-subscribe-form fieldset {
    display: block;
    float: none;
    width: 100%;    
  }
  
  .feastform .tco-subscribe-form fieldset,
  .feastform .tco-subscribe-form fieldset:nth-last-of-type(2),
  .feastform .tco-subscribe-form fieldset:nth-last-child(2) {
    margin-bottom: 10px;
  }
}

We would love to know if this has worked for you. Thank you.

[guybower1]

hi Rue

Thanks so much for your reply.

Unfortunately, this is not working as hoped.

One odd thing is that in the Pro preview pane when working through the screen sizes, the original template breaks at 767. Anything above that is as per normal - 4 inline. When that is viewed in Google Dev Tools, it breaks at 979 to 3 above and the submit button 100% underneath. I am wondering how it is possible for the 2 views to be so different and how to know which is correct. This is a staging server so I have internal caching plugins turned off.

So at the SM break point (481px - 767px) this is what I see in the preview pane

At the XS breakpoint (480px and under) it is this

Any thoughts as to what would be stopping my email from from being block, (1 under each other) at XS and sign up 100% with the other 3 spaced equally above it at SM?

I have played around with different margin settings trying to match the original template. It has 0.25rem around each of the 4 text boxes and the Flexbox settings it has are Center, Center and Custom with Grow at 1, Shrink at 0 and Basis at 15rem; obviously no CSS doing anything, so am wondering what determines breakpoints for it.

Is it possibly NOT to have the email form in a global block? I have no need of it to be in one, as it will only be used in the footer which is assigned to every page, so changing it once will be reflected on every page anyway. I’m happy to have it in another container if it means gaining more control.

Thanks so much. In end, if this ends up OK, this footer could be a template to use if you guys want. I’m not precious about anything.

cheers

[rad]

Hi @guybower1,

Just letting you know that we don’t provide customization in the forum, and that requires customization since it’s not possible with email forms layout. The form from design cloud is just a template that you could use to standard form, like if you’ll use classic shortcodes within Contact Form 7. But that as well would require customization but within the form shortcodes.

There is no XS, SM, and other device CSS for that form since it’s a custom CSS. What’s provided is just a generic CSS for a few possible device views.

Please change that entire CSS to this, again, we can’t provide further customization.

.feastform form {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: stretch;
    flex: 0 1 86%;
    height: auto;
    max-width: 1200px;
    display: flex;
}
.feastform form > fieldset {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1 0 15rem;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    background-color: transparent;
}
.feastform form > fieldset > .submit {
    margin-top:0 !important;
}
.feastform form > fieldset > input {
    margin-bottom: 0px !important;
}

Thanks!

[guybower1]

Hi Rad

Thanks so much. That works absolutely perfectly.

On most occasions in asking for help, I would have agreed with your other comments re the template, but I can’t agree this time. The template itself is shown as a mail opt in template. This would indicate there is some mail form opt in linkage. There is no CSS provided with the template to help make it functional as a mail opt in form, as it is simply 4 text boxes.

After yours and Rue’s help, I now have it working exactly as it does in the template. If I were Theme.co, why not take this new template and supply it as new template as a mail opt in. It has a global block area for customers to drop their own mail form and CSS which styles it as per the original template. For mine, it is now a a complete template, rather than a design idea.

Just my thoughts on it, as others may find it a useful footer template.

Again, thanks so much for taking the time to assist.

Regards

[jade]

Hello @guybower1,

We do understand your point. I have taken a note of this and added this to our Feature Request list so that the sample for will be an actual form instead of placeholder elements.

Glad to hear the codes helped and thank you for your kind words.

Cheers!