Styles for the subscription forms
-
Is the free version of Acymailing not allowed to style the subscription forms? I’m having some layout issues and I can’t see in the docs or via google how I am meant to control the following, which currently causes me issues:
- how to set the background (my mouse has the no-entry symbol)
- how to change the colour of the lists
- how to make the checkboxes display – this list shown is ok, but I have made a new one and can’t make them appear.
- how to keep the form inside the block and not let it overlap above or below
The page I need help with: [log in to see the link]
-
Hello,
1/ I’m sorry but I didn’t understand this part. Do you want the cursor to change when hovering the subscription form?
Note that if you are currently connected, the email field will be pre-filled with your email address, and you won’t be able to modify it.
2/ It seems that there already is some custom CSS on the page forcing the list names to be black.
This CSS is directly included in the page (maybe in your theme?):#acym_fulldiv_formAcym1.acym__subscription__form__shortcode {
height: 200px;
max-width: 200px;
background-color: #16535b;
color: #000000 !important;
padding: .5rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 1rem auto;
}3/ I will need to see the issue in order to provide a solution for it. Do you have a page where I could see the missing checkboxes?
4/ The custom CSS block I copied in 2/ is responsible for the block to overlap, it forces the container to be 200 pixels tall, but its contents need more space. You could add an overflow rule, but that wouldn’t give a nice display.
Hi, thanks for getting back to me. I’ll answer point by point:
1/ Sorry to express myself poorly. I just meant that the cursor was ‘no-entry’ and mouse clicks were disabled in the Acymailing subscription form builder dialog, when I hover over the RGB hexcode field. But this is just to force me to use the colour picker dialog instead, sorry to be stupid – please ignore this point.
2/ this is CSS from the Acymailing subscriber form. I’ve included everything below that the shortcode outputs into the page.
3/ The link below uses the new subscriber form shortcode. The checkboxes are no longer absent – they were just invisible because of my colour choice. Apologies. However I do need them to be aligned in the middle instead of the bottom. Also, the fields labels when external, I’d prefer to align them to the left, not the centre. Is that possible?
4/ Please see the second subscription form on this page which appears on every page because it’s a widget. That title which is displaced is part of the WP widget skeleton. Does the same thing apply now even though I’ve highlighted in point 2 that the CSS does come from the shortcode?
Thanks 🙏
<section id="block-13" class="widget widget_block">
<script type="text/javascript" src="https://ecocounts.community/wp-content/plugins/acymailing/media/js/libraries/email-misspelled.min.js?v=1014"></script>
<script type="text/javascript" src="https://ecocounts.community/wp-content/plugins/acymailing/media/js/module.min.js?v=1014"></script>
<script type="text/javascript">
if (typeof acymModule === 'undefined') {
var acymModule = [];
acymModule['emailRegex'] = /^[a-z0-9!#$%&\'*+\/=?^_{|}~-]+(?:\.[a-z0-9!#$%&\'*+\/=?^_{|}~-]+)*\@([a-z0-9-]+\.)+[a-z0-9]{2,20}$/i;
acymModule['NAMECAPTION'] = 'Name';
acymModule['NAME_MISSING'] = 'Please enter your name';
acymModule['EMAILCAPTION'] = 'Email';
acymModule['VALID_EMAIL'] = 'Please enter a valid e-mail address';
acymModule['VALID_EMAIL_CONFIRMATION'] = 'Email field and email confirmation field must be identical';
acymModule['CAPTCHA_MISSING'] = 'The captcha is invalid, please try again';
acymModule['NO_LIST_SELECTED'] = 'Please select the lists you want to subscribe to';
acymModule['NO_LIST_SELECTED_UNSUB'] = 'Please select the lists you want to unsubscribe from';
acymModule['ACCEPT_TERMS'] = 'Please check the Terms and Conditions / Privacy policy';
}
</script>
<div class="wp-block-group has-white-color has-text-color has-background" style="background-color:#16535b">
<div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h2 class="wp-block-heading">Subscribe to Newsletter</h2>
<p>
<div id="acym_fulldiv_formAcym1" class="acym__subscription__form__shortcode acym__subscription__form-erase">
<form action="https://ecocounts.community/index.php?page=acymailing_front&ctrl=frontusers&noheader=1" id="formAcym1" name="formAcym1" enctype="multipart/form-data" onsubmit="return submitAcymForm('subscribe','formAcym1', 'acymSubmitSubForm')">
<div class="acym__subscription__form__fields">
<div class="onefield fieldacy1 acyfield_text" id="field_1">
<input name="user[name]" placeholder="Name" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Name"}" type="text" class="cell ">
<div class="acym__field__error__block" data-acym-field-id="1"></div>
</div>
<div class="onefield fieldacy2 acyfield_text" id="field_2">
<input id="email_field_377" name="user[email]" placeholder="Email" value="" data-authorized-content="{"0":"all","regex":"","message":"Incorrect value for the field Email"}" required type="email" class="cell acym__user__edit__email ">
<ul acym-data-field="email_field_377" class="acym_email_suggestions" style="display: none;"></ul>
<div class="acym__field__error__block" data-acym-field-id="2"></div>
</div>
<div class="acym__subscription__form__lists">
<label>
<input type="checkbox" value="1" name="subscription[]">EcoCounts Eco Tips
</label>
<label>
<input type="checkbox" value="5" name="subscription[]">Latest Developments
</label>
<input type="hidden" name="hiddenlists" value="">
<style>
#acym_fulldiv_formAcym1 .acym__subscription__form__fields .acym__subscription__form__lists {
display: inline-block;
width: auto;
margin: 0 20px;
text-align: left;
}
#acym_fulldiv_formAcym1 .acym__subscription__form__fields .acym__subscription__form__lists label {
display: inline-block;
margin-right: 10px;
width: auto;
}
#acym_fulldiv_formAcym1 .acym__subscription__form__fields .acym__subscription__form__lists input[type="checkbox"] {
margin-top: 0 !important;
margin-right: 5px;
}
</style>
</div>
<style>
#acym_fulldiv_formAcym1 .acym__subscription__form__fields {
display: flex;
justify-content: center;
align-items: center
}
#acym_fulldiv_formAcym1 .acym__subscription__form__fields > * {
margin: 10px auto !important;
}
</style>
</div>
<div class="acym__subscription__form__button">
<button type="button" onclick="try{ return submitAcymForm('subscribe','formAcym1', 'acymSubmitSubForm'); }catch(err){alert('The form could not be submitted '+err);return false;}">Subscribe to newsletter </button>
<style>
#acym_fulldiv_formAcym1 .acym__subscription__form__button {
display: flex;
justify-content: center;
align-items: center
}
#acym_fulldiv_formAcym1 .acym__subscription__form__button button {
background-color: #e1802e;
color: #ffffff;
border-width: 0px;
border-style: solid;
border-color: #000000;
border-radius: 0px;
padding: 10px 20px;
}
</style>
</div>
<input type="hidden" name="ctrl" value="frontusers"/>
<input type="hidden" name="task" value="notask"/>
<input type="hidden" name="page" value="acymailing_front"/>
<input type="hidden" name="option" value="acymailing"/>
<input type="hidden" name="acy_source" value="Form ID 1">
<input type="hidden" name="acyformname" value="formAcym1">
<input type="hidden" name="acymformtype" value="shortcode">
<input type="hidden" name="acysubmode" value="form_acym">
<input type="hidden" name="redirect" value="">
<input type="hidden" name="ajax" value="0">
<input type="hidden" name="confirmation_message" value="Thanks for your subscription to the EcoCounts newsletter.">
</form>
</div>
<style>
#acym_fulldiv_formAcym1.acym__subscription__form__shortcode {
height: 200px;
max-width: 200px;
background-color: #16535b;
color: #000000 !important;
padding: .5rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin: 1rem auto;
}
#acym_fulldiv_formAcym1.acym__subscription__form__shortcode .responseContainer {
margin-bottom: 0 !important;
padding: .4rem !important;
}
#acym_fulldiv_formAcym1.acym__subscription__form__shortcode #formAcym1 {
margin: 0;
}
#acym_fulldiv_formAcym1.acym__subscription__form__shortcode .acym__subscription__form__fields, #acym_fulldiv_formAcym1.acym__subscription__form__shortcode .acym__subscription__form__button {
display: block;
width: 100%;
margin: 1rem 0 !important;
}
#acym_fulldiv_formAcym1.acym__subscription__form__shortcode .acym__subscription__form__fields .acym__subscription__form__lists {
display: block;
width: 100%;
margin: 1rem 10px !important;
}
#acym_fulldiv_formAcym1.acym__subscription__form__shortcode .acym__subscription__form__fields > *:not(style) {
display: block;
}
</style>
</p></div></div></section>2/ That’s indeed added by AcyMailing, sorry I didn’t recognise it!
The lists color can be changed in the second panel in the form settings:
3/ There are a lot of possible solutions, but the most straightforward would be to add something like this:
.acym__subscription__form__lists input[type="checkbox"] {
vertical-align: text-bottom;
}
.acyfield_text {
text-align: left;
}You can change the value “text-bottom” by the one that suits you the best.
4/ The form in your footer has the class “acym__subscription__form__shortcode”, which is only used on forms inserted via shortcode. Are you sure it is a widget?
OK great, points 1 & 2 solved 🙂
Problem 3 solved 👍
4/ Yes, it’s a widget, or at least it’s inserted by the WP Appearance->Widgets page. So the title is in the same div as the form, but floats under or behind it. Plus the form button breaks out of the bottom of the div. Maybe I need to do something with the Group block that I use, representing the div in WP?
4/ I fixed it – the Height property was the problem. As soon as I took that out & left it unset, the title and the form stopped floating and shared the space properly.
So, case solved! Thanks v. much, your plugin rocks 🙂
- You must be logged in to reply to this topic.