Home › Forums › Air WordPress Theme › Mailchimp issues
- This topic has 15 replies, 2 voices, and was last updated 4 years, 9 months ago by
SeaTheme.
-
AuthorPosts
-
August 19, 2021 at 5:36 pm #25435
Hi,
I’m using Air WP theme. I have Contact Form 7 and trying to add an opt-in subscribe to newsletter button to an existing contact form and also add a new newsletter subscribe box on other places of the website. I’m using Mailchimp, with the plugin: Contact Form 7 Extension For Mailchimp, by Renzo Johnson. Using the Free (Lite) version.
1. I added placeholder text as shown in your answer here.
<label>[text* your-name placeholder "Name"]</label> <label>[email* your-email placeholder "Mail"]</label>As a result, I cannot enter any email tag in the “Subscriber email” field, under the “ChimpMatic Lite” tab. Can this be done when form has placeholder text with code as suggested to me?
2. I cannot find the opt-in tag option (which is also included in the free version) as shown here. I don’t know if this is a theme issue or something else.
Regards
August 20, 2021 at 2:27 am #25439Hi,
1.
As a result, I cannot enter any email tag in the “Subscriber email” field, under the “ChimpMatic Lite” tab.
Did you mean the “Subscriber email” field in the front page or admin page? I only see the MailChimp API Key box under the “ChimpMatic Lite” tab. https://www.dropbox.com/s/0lzjpjcthpisitq/QQ20210820-102248.jpg?dl=0
Please leave a screenshot, thanks.2. The opt-in tag option can be shown on my page: https://www.dropbox.com/s/0lzjpjcthpisitq/QQ20210820-102248.jpg?dl=0
ps:
– Where is this form placed? In one page(by pagebuilder or shortcodes) or the Footer of all pages?
– Please stop all other plugins to check if it works.
– Could you please send your WordPress website wp-admin(URL / username/password) with picking up “Set as private reply” if necessary?
August 20, 2021 at 4:09 pm #25440This reply has been marked as private.August 21, 2021 at 12:56 am #25442This reply has been marked as private.August 21, 2021 at 5:34 pm #25446This reply has been marked as private.August 22, 2021 at 1:17 am #25449This reply has been marked as private.August 22, 2021 at 3:14 pm #25452This reply has been marked as private.August 23, 2021 at 4:45 am #25455Hi,
I checked your website, the issued form, this line:
<label>[text* your-email placeholder "Email*"]</label>
should be updated:
<label>[email* your-email placeholder "Email*"]</label>screenshot:https://www.dropbox.com/s/up0aooqov2r1kdw/QQ20210823-124312.jpg?dl=0
August 23, 2021 at 4:58 pm #25460Thank you for spotting that crucial detail!
August 23, 2021 at 6:12 pm #25461I have two more additional questions regarding my forms.
1. How to style a single line into the existing form? See the line in the temporary Newsletter test page: “you may unsubscribe at any time”.
2. For the Sign up to Newsletter form, I would like to add a title. Because the Contact Module does not allow that (and adding a separate Text Module above will add too much white space), I will need to use a Text Module and insert the form with the short code. But some of the CSS styling previously made for the Contact form does not apply to the form added in the Text Module. How to fix the changed spacing between elements of the form without effecting other Text Modules That may be on the same page? See both examples on the Newsletter test page.
Thank you
August 23, 2021 at 6:14 pm #25462This reply has been marked as private.August 24, 2021 at 4:25 am #25463Hi, welcome
1. Please try to add inline style like
<p style="font-size:12px; color:#999;">You may unsubscribe at any time</p>
screenshot: https://www.dropbox.com/s/r4qjifwzbkl8fbp/QQ20210824-120316.jpg?dl=02. It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:
.page-id-253 .wpcf7 { margin-top: 30px; } @media(max-width:767px){ .page-id-253 .wpcf7 { margin-top: 15px; } }page-id-253 is unique page id, it will affect this page only. You need to change it, learn more: https://doc.seatheme.net/wordpress-faqs/custom/how-to-find-wordpress-post-page-id/
August 25, 2021 at 1:19 am #254711. Thank you, that works! Useful to know I can add those changes in the form itself.
2. The CSS code above does not work. It only affects the form on the left (inserted through the Contact Module), not the form on the right (which was inserted with shortcode in a Text Module).
When I inspect (F12) the Newsletter test page on Frontend, I notice that for the form on the right (in the Text Module), the paragraph that contains each label or element, has a line height and margin-bottom larger than what’s defined for the form itself, adding more spacing between each element of the form. How to address that without changing other Text Modules that will be in the webpages where I will be finally adding the Subscribe to Newsletter form?
Thank you
August 25, 2021 at 3:00 am #25472Hi,
I checked it, the line height and margin-bottom comes from the custom CSS:
/* PARAGRAPH styling */ body.page #content_wrap .entry p, body.page #content_wrap .text_block p, body.page #content_wrap .ux-portfolio-template-intro p { margin-bottom: 30px; line-height: 30px; }You need to add custom CSS below the above CSS to cover it for a form:
body.page #content_wrap .entry form p, body.page #content_wrap .text_block form p { margin-bottom: 0; line-height: initial; }
August 25, 2021 at 5:50 pm #25479Thank you.
I tried the above code, which works for the form, but messes up styling in other places.
But your solution to add styling code in the form editor itself to my earlier question above, gave me the idea to do the same for the title of this form, so that I could still use the Contact Form Module (which has the right styling set up). So I first added:
<h4 style="margin-bottom: 30px;>Subscribe to Hanna's Newsletter:</h4>This resulted in the title appearing in smaller size than the h4, so I added the following:
<h4 style="font-size: 22px; margin-bottom: 30px;">Subscribe to Hanna's Newsletter:</h4>On a laptop, this appears at same size as other h4 titles sizes, except on mobile, where it appears larger than other h4 titles on mobile. So I changed h4 to h3 without explicit font-size styling:
<h3 style="margin-bottom: 30px;">Subscribe to Hanna's Newsletter:</h3>This results in h3 sizes, even though it looks like h4. Do you think this might cause other issues in the long run?
Regards
August 26, 2021 at 2:11 am #25482Welcome.
It should not cause other issues. It is no suggested to add font size by inline style. Please define the h1-h6 font size in theme options. https://www.dropbox.com/s/d6p6hg3vi1hx6is/QQ20210826-101114.jpg?dl=0
-
AuthorPosts
- You must be logged in to reply to this topic.
