Using Contact Form 7 to Newsletter/Subscribe Bar

[CenteredLeadership]

I would like to use Contact Form 7 to collect e-mails for my newsletter, using the Newsletter/Subscribe Bar at the bottom of each page. I do not wish at the moment to add any plug-ins for sending out newsletters, like Mail-Chimp.
I am unable to make it work. I use the short-code generated by Contact Form 7 and paste it into the windows called Newsletter/Subscribe bar Form code. The short code is: [contact-form-7 id="870" title="Newsletter"]
I have checked that the short-code works in other places, such as in a text block.
But when used for the Newsletter/Subscribe bar, I get something that does not work. It shows part of the text faded out, as well as a window for entering text. But the correct form is not displayed and I cannot send anything.
I have attached screenshots.
Can you help?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

The form would have to be just an email field and submit button, do you want me to do this for you?

– Kyle

[CenteredLeadership]

Hi Kyle,

That is great service, thanks. I have made some progress on my own. But I am not quite there and new issues have come up. I would love to have your help.

The form now works – almost. I have the following issues, though:

– the submit button is almost hidden. I have attached a screenshot.
– The Bar does not appear on the other pages even though I have enabled this function.
– The bar does not appear on my iPad or on my iPhone – on any of the pages, including the home page.

Can you help?

Attachments:

You must be logged in to view attached files.

[CenteredLeadership]

Hi – the problems above still persist. I would love to have your input. It has been 2 days since I posted it, so I was hoping for a reply soon.

[David Martin – Support]

Hi,

1) Here is the CSS to help you tidy up that form. The area is really meant for the Mailchip code, that is why you have these issues.

#sf-newsletter-bar .sub-code {
  margin-top: 15px;
}
#sf-newsletter-bar .wpcf7 p {
  float: left;
  clear: none;
}
#sf-newsletter-bar .wpcf7 input.wpcf7-submit[type="submit"] {
  margin-left: 15px;
}

2) Mind adding your FTP, this seems like a bug. However I cannot replicate on my local dev version.

3) By default it is set to not display on mobile, the screen size really makes it less pleasant on the eye.

@media only screen and (max-width: 1024px) {
#sf-newsletter-bar {
    display: block!important;
}
#sf-newsletter-bar .sub-text {
  display: none;
}
#sf-newsletter-bar .sub-code {
    margin-left: 15px;
}
}

[CenteredLeadership]

This reply has been marked as private.

[David Martin – Support]

Hi,

1) Sorry, I should have said – paste it here: Theme Options => Custom CSS.

2) Perfect, please copy and paste it here with a private reply.

Thanks.

[CenteredLeadership]

This reply has been marked as private.

[David Martin – Support]

1) Please see this example of what I see:

[CenteredLeadership]

Hi

Yes, now I get the same thing. But:

1. How do we fix it so that it says “Sign up here for my Newsletter”?
2. How do we put it on the other pages?

Thanks,

[CenteredLeadership]

Hi

Could you help me find a solution for the above 2 issues?

Thanks so much

[CenteredLeadership]

Hi

I have removed the mobile code since it did not look good. It did not include the text “Sign up here for my newsletter”. I have read elsewhere on your side that this may not be possible. Is that true?

Can you fix the bug, i.e. that the newsletter bar does not appear on the other pages? Only on the front page, though I have turned everything on.

[David Martin – Support]

PLEASE NOTE: Adding an extra reply to your topic, as per our support policy, will take it back in the queue and take us longer to reply to you. Please refrain for doing this. If you need to add extra info, then please edit your last reply.

1) If you want to add the text you would need to amend the CSS.

An example would be this, which you will need to add back into the Theme Options:

@media only screen and (max-width: 1024px) {
#sf-newsletter-bar {
    display: block!important;
    height: 160px;
}
#sf-newsletter-bar .sub-code {
    width: 75%;
}
#sf-newsletter-bar .sub-text {
    display: block;
    clear: both;
    width: 100%;
}
#sf-newsletter-bar .sub-code {
    margin-left: 15px;
}
}

[David Martin – Support]

2) I can login to to your server, however I do not know which folder directory your site resides in. Please ask your host to confirm the path from my screenshot:

[CenteredLeadership]

This reply has been marked as private.