Флажок и выравнивание меток для формы MailChimp, встроенной в сайт Wordpress.com - PullRequest
Новая
       8

Флажок и выравнивание меток для формы MailChimp, встроенной в сайт Wordpress.com

0 голосов
/ 26 апреля 2018

У меня есть WordPress сайт, который был составлен дизайнером, но я отвечаю за обновления и т. Д. У меня нет опыта программирования, просто я учусь пробам и ошибкам, исследую и т. Д.

Я встроил форму регистрации MailChimp на боковой панели веб-сайта, используя HTML-виджет.Я использую редактор CSS для стилизации кода / формы.

Проблема, с которой я сталкиваюсь, заключается в том, что флажки и их метки не выстраиваются должным образом и выглядят ужасно.

Я простоне могу найти нужные атрибуты для использования, и я действительно это делаю, и могу воспользоваться некоторыми рекомендациями:)

Ниже приведен HTML-код: 

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://laszloenergy.us16.list-manage.com/subscribe/post?u=cadefcfd20b919dfe5e667734&amp;id=69d0a8f56b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
<div class="mc-field-group">
	<input type="text" value="" name="FNAME" class="required FNAME" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="LNAME" class="required LNAME" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder ="Email Address">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="MMERGE5" class="" id="mce-MMERGE5" placeholder="Organization">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="MMERGE4" class="" id="mce-MMERGE4" placeholder="Title">
</div>
<div class="mc-field-group">
	<input type="text" value="" name="MMERGE3" class="" id="mce-MMERGE3" placeholder="Sector">
</div>
<div class="mc-field-group input-group">
    <strong>Interests </strong>
    <ul><li><input type="checkbox" value="2" name="group[4095][2]" id="mce-group[4095]-4095-0"><label for="mce-group[4095]-4095-0">Cap and Trade</label></li>
<li><input type="checkbox" value="4" name="group[4095][4]" id="mce-group[4095]-4095-1"><label for="mce-group[4095]-4095-1">Carbon Pricing</label></li>
<li><input type="checkbox" value="8" name="group[4095][8]" id="mce-group[4095]-4095-2"><label for="mce-group[4095]-4095-2">Energy Reporting and Certifications</label></li>
<li><input type="checkbox" value="16" name="group[4095][16]" id="mce-group[4095]-4095-3"><label for="mce-group[4095]-4095-3">Strategic Planning and Implementation</label></li>
<li><input type="checkbox" value="32" name="group[4095][32]" id="mce-group[4095]-4095-4"><label for="mce-group[4095]-4095-4">Facilitation and Engagement</label></li>
</ul>
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_cadefcfd20b919dfe5e667734_69d0a8f56b" tabindex="-1" value=""></div>
    <div class="show"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

И ниже CSS: 

/* Changes the style of the overall form */
#mc_embed_signup {
    background: rgba(0, 0, 0, 0) !important;
    color: #ffffff;
    padding: 0px;
    text-align: center;
}

/* Adds extra space around the input boxes */
#mc_embed_signup .mc-field-group {
    padding: 10px 0;
}

/* Styles the input boxes */
#mc_embed_signup  input {
    width: 200px;
}

/* Styles the subscribe button */
#mc_embed_signup .button {
    background-color: #7fbf69;
    color: #ffffff;
    margin: 0 auto;
}

Результирующая форма: Встроенная форма Mailchimp на Wordpress

1 Ответ

0 голосов
/ 26 апреля 2018

Попробуйте удалить выравнивание текста: по центру; 

#mc_embed_signup {
    background: rgba(0, 0, 0, 0) !important;
    color: #ffffff;
    padding: 0px;
    text-align: center;
}
...