Skip to content

Instantly share code, notes, and snippets.

@nathanbarry
Created April 20, 2015 22:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nathanbarry/f4802a87a34ec91426a6 to your computer and use it in GitHub Desktop.
Save nathanbarry/f4802a87a34ec91426a6 to your computer and use it in GitHub Desktop.
Top bar ConvertKit form
.ck_form_bar {
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
line-height: 1.5em;
overflow: hidden;
color: #666;
font-size: 16px;
border-bottom: solid 1px #d1d1d1;
clear: both;
margin: 20px 0px;
padding: 20px;
background: #f9f9f9;
width: 100%;
position: relative;
position: fixed;
top: 0px;
margin: 0px;
left: 0px;
z-index: 500;
}
.ck_form_bar, .ck_form_bar * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ck_form_bar .ck_form_bar_title {
font-size: 30px;
color: #333;
text-align: left;
margin: 18px 0px;
font-weight: normal;
}
.ck_form_bar_content {
width: 50%;
float: left;
}
.ck_form_bar_fields {
width: 50%;
float: left;
}
/* Form fields */
.ck_errorArea {
display: none; /* temporary */
}
#ck_success_msg {
padding: 10px 10px 0px;
border: solid 1px #ddd;
background: #eee;
text-align: center;
}
.ck_form_bar input[type="text"], .ck_form_bar input[type="email"] {
font-size: 14px;
padding: 10px 8px;
width: 100%;
border: 1px solid #d6d6d6; /* stroke */
background-color: #fff; /* layer fill content */
margin-bottom: 5px;
height: auto;
width: 58%;
display: inline-block;
}
.ck_form_bar input[type="text"]:focus, .ck_form_bar input[type="email"]:focus {
outline: none;
border-color: #aaa;
}
.ck_checkbox input.optIn {
margin-left: -20px;
margin-top: 0;
}
.ck_form_bar .ck_opt_in_prompt {
margin-left: 4px;
}
.ck_form_bar .ck_opt_in_prompt p {
display: inline;
}
.ck_subscribe_form {
margin: 0px;
}
.ck_form_bar .ck_subscribe_button {
color: #fff;
margin: 10px 0px 0px;
padding: 10px 0px;
font-size: 16px;
background: #0d6db8;
cursor: pointer;
border: none;
text-shadow: none;
display: inline-block;
width: auto;
width: 38%;
padding-left: 2%;
padding-right: 2%;
}
/* Trigger the vertical layout with media queries as well */
@media all and (max-width: 1023px) {
.ck_form_bar_content, .ck_form_bar_fields {
width: 100%;
float: none;
}
}
@media all and (max-width: 611px) {
.ck_form_bar input[type="email"] {
width: 100%;
}
.ck_form_bar .ck_subscribe_button {
width: 100%;
}
}
<script src="https://app.convertkit.com/assets/CKJS4.js?v=18"></script>
<div class="ck_form_bar">
<div class="ck_form_bar_content">
<h3 class="ck_form_bar_title">Join the newsletter</h3>
</div>
<div class="ck_form_bar_fields">
<div id='ck_success_msg' style='display:none;'>
<p>Check your email to download the free resources.</p>
</div>
<!-- Form starts here -->
<form id="ck_subscribe_form" class="ck_subscribe_form" action="https://app.convertkit.com/landing_pages/000/subscribe" data-remote="true">
<input type="hidden" name="id" value="000" id="landing_page_id"></input>
<p class="ck_errorArea"></p>
<input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="Email address" required></input>
<button class="subscribe_button ck_subscribe_button btn fields" id='ck_subscribe_button'>Join the list</button>
</form>
</div>
</div>
@BelleLockerby
Copy link

Hey Nathan - One of your CK newbie customers here.
I'm loving Convertkit, and am trying to work out how to have an image as a button. Can I save a button image in wordpress as media and do some basic coding, or can I use the button image saved in wordpress?? Can't figure out the change.
Thanks Belle

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment