0
Как я могу разместить свою форму подписки на курс - Использование Bootstrap.Центрирование ввода электронной почты и кнопки с помощью Bootstrap
Живой сайт:http://185.123.96.102/~kidsdrum/moneynest.co.uk/
Сейчас:
Ожидаемый результат:
HTML
<div class="text-center">
<h1 class="boldme hidden-xs hidden-sm">Wish you were taught personal finance at school? We do too</h1>
<div class="greenpromobox">
<h2 class="boldme">Aged 20-30 and frustrated with money?</h2>
<h3 class="boldme">Take our free <b class="jumpstarttext">Jumpstart Your Finances</b> class to<br /> secure your financial future</h3>
<script src="https://app.convertkit.com/assets/CKJS4.js?v=21"></script>
<div class="ck_form ck_naked">
<div class="ck_form_fields">
<div id='ck_success_msg' style='display:none;'>
<p>Success! </p>
</div>
<!-- Form starts here -->
<form id="ck_subscribe_form" class="ck_subscribe_form" action="https://app.convertkit.com/landing_pages/32973/subscribe" data-remote="true">
<input type="hidden" value="{"form_style":"naked","embed_style":"inline","embed_trigger":"scroll_percentage","scroll_percentage":"70","delay_seconds":"10","display_position":"br","display_devices":"all","days_no_show":"15","converted_behavior":"show"}" id="ck_form_options">
<input type="hidden" name="id" value="32973" id="landing_page_id">
<div class="ck_errorArea">
<div id="ck_error_msg" style="display:none">
<p>There was an error submitting your subscription. Please try again.</p>
</div>
</div>
<div class="ck_control_group ck_email_field_group">
<label class="ck_label" for="ck_emailField" style="display: none">Email Address</label>
<input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Enter your email" required autofocus>
</div>
<button class="subscribe_button ck_subscribe_button btn fields text-uppercase" id='ck_subscribe_button'>
Start Class Now
</button>
</form>
</div>
</div>
</div>
</div>
CSS
/* Layout */
.ck_form.ck_naked {
/* divider image */
background: transparent;
line-height: 1.5em;
overflow: hidden;
color: #666;
font-size: 16px;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
clear: both;
margin: 0 0 0 0;
}
.ck_form.ck_naked p {
padding: 0px;
}
.ck_form, .ck_form * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ck_form.ck_naked .ck_form_fields {
width: 100%;
float: left;
padding: 5%;
padding-bottom: 1.5%;
}
/* Form fields */
.ck_errorArea {
display: none; /* temporary */
}
#ck_success_msg {
padding: 10px 10px 0px;
border: solid 1px #ddd;
background: #eee;
}
.ck_form.ck_naked input[type="text"], .ck_form.ck_naked input[type="email"] {
font-size: 18px;
padding: 10px 8px;
width: 34%;
border: 1px solid #d6d6d6; /* stroke */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px; /* border radius */
background-color: #fff; /* layer fill content */
margin-bottom: 5px;
height: auto;
float: left;
margin: 0px;
margin-right: 1%;
height: 42px;
}
.ck_form input[type="text"]:focus, .ck_form input[type="email"]:focus {
outline: none;
border-color: #aaa;
}
.ck_form.ck_naked .ck_subscribe_button {
width: 100%;
color: #fff;
margin: 0px;
padding: 9px 0px;
font-size: 18px;
background: #0d6db8;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px; /* border radius */
cursor: pointer;
border: none;
text-shadow: none;
width: 30%;
float: left;
height: 42px;
}
.ck_form.ck_naked .ck_subscribe_button:hover {
background: #3d8ac6;
}
.ck_converted_content {
display: none;
padding: 5%;
background: #3d8ac6;
}
/* max width 500 */
.ck_form.ck_naked.width500 .ck_subscribe_button {
width: 100%;
float: none;
margin-top: 5px;
}
.ck_form.ck_naked.width500 input[type="text"], .ck_form.ck_naked.width500 input[type="email"] {
width: 49%;
}
.ck_form.ck_naked.width500 input[type="email"] {
margin-right: 0px;
width: 50%;
}
/* max width 400 */
.ck_form.ck_naked.width400 .ck_subscribe_button, .ck_form.ck_naked.width400 input[type="text"], .ck_form.ck_naked.width400 input[type="email"] {
width: 100%;
float: none;
margin-top: 5px;
}
.ck_slide_up, .ck_modal, .ck_slide_up .ck_naked, .ck_modal .ck_naked {
min-width: 400px;
}
.page .ck_form.ck_naked {
margin: 50px auto;
max-width: 700px;
}
Я недавно перешел от MailChimp к ConverKit и это дал мне большое количество коды для вставки в Я мог бы легко центрировать с позицией:. Относительной но перекосы вверх, если смотреть на мобильном телефоне ,
Это прекрасно работает на рабочий стол (теперь на живом сайте), однако на мобильном телефоне форма ввода электронной почты имеет более длинную ширину, чем кнопки отправки , также текст «Введите адрес электронной почты» показывает выше, чем нужно? Если я смогу исправить это, ответ будет вашим! –
да, вы можете это исправить .. –