39 Comments

  1. awesome. any way i can change the form to look like your blog post image ? so i guess im looking for: how to determine the size of the form, how to setup image as background and how to force to form to be vertical,

    1. Restored316 says:

      Hi Thomas,

      The form will automatically resize on it’s own so it looks great across all platforms. To add a background image, you’ll have that to the .ck_form element.

  2. Hello! How did you center your form fields like you have above? I love that!

    1. Restored316 says:

      Hmm.. are you referring to the embedded form within the post? Those are positioned to the right?

  3. Hi there Lauren!

    Thanks so much for posting this. I’m brand new with ConvertKit and this extremely helpful. I’m in the process of tying up some loose ends with my wife’s new blog site and have one quick ConvertKit question… I placed a form on the Contact Us page ( https://FamilyFelicity.com/contact-us ) – promise I’m not trying to get a backlink (even though that would be nice). The last form field is a text-area for a multiple line message. For the life of me, I can’t figure out how to 1.) Make the input text start at the top of that field, and 2.) How to get that field to display/use multiple lines as opposed to a never-ending single line. Any help on that would be Amazing! Thanks in advance!

    1. Restored316 says:

      Hi Reggie,

      I took a peek at your site and inspected the code a bit and I’m not seeing the issue right off. This could be a plugin conflicting somewhere if you haven’t ruled that out. Beyond that, I think I would submit a support ticket with Convert Kit to see if they have any advice for you!

  4. Thank you for this!

    I’d love to know how to change the font on the button, and how to round the corners of boxes and buttons to match the rest of my branding. (8px radius).

    Thanks in advance!! 🙂

    1. Restored316 says:

      Hi Natalie,

      You’re so welcome!

      To add rounded corners to the buttons, you’ll edit this code:

      .ck_form .ck_subscribe_button {
      background: #3A3F57;
      border-radius: 8px;
      }

      .ck_form {
      border: 1px solid #eee;
      border-radius: 8px;
      }

      And you’ll add what I’ve bolded above!

  5. This may be the dumbest question ever but I’m not getting it to work and wondering if my problem is that the code should be stacked altogether or just the few lines you provided. So, would you add more lines of codes based on the manipulations or just pick one? Thanks in advance! (This is so helpful!)

    1. Lauren Dierschke says:

      Hi Sara, no question is dumb.. you’re all good!!

      So you’ll just stack the code one on top of the other to add all that you need!

  6. Great article! Very helpful!
    Is there any way to use a minimal form but add a “first name” field as well?

    1. Lauren Dierschke says:

      Hi Stephen,

      Wonderful.. I’m so glad this was helpful for you!

      I’m not really sure the answer to your question, so that might be something you ask the Convert Kit team.

  7. Where is the hands up Emoji! yay did not even know I could do this, so nice of you to help us out

    1. Lauren Dierschke says:

      You’re so very welcome!

  8. Thanks! This is super helpful 🙂
    Do you know the CSS for changing the text of the subscribe button to a different phrase?

    1. Fiona, you can actually edit the text of the Subscribe button directly in Convert Kit. Just make certain you’re on the Content tab within your Form and then you can click directly on Subscribe and edit the word right there.

  9. Thanks for this, for some reason the only thing that changed for me was making the edges rounded, the other things refused to change when i copied and pasted them into the style custom css on convert kit, any ideas?

    1. Hi Lola,

      Can you paste in your entire code you have in the box in ConvertKit? I’d need to see the full thing.. sounds like something might be broken there.

  10. Hello, thank you for this post! Very useful 🙂
    I am wondering if there’s a way to change the font of both the subscribe button and of the text inside my box? I would like to style them to my branding.

    1. You can add a font-family: NAME OF FONT; to these two sections:

      .ck_form .ck_subscribe_button {
      background: #3A3F57;
      }

      .ck_form_content p {
      font-size: 16px;
      }

  11. I’m so excited I found this post! Thank you for sharing. I’m still having trouble formatting mine. I feel like I’m all over the place with what to enter. Can you share what your code looks like for your form in your sidebar? Thanks in advance! -xx

    1. Hi Monica, Can you send me a screenshot of your genesis e-news extended widget so I can help you? Please email it to lesley@restored316.com. Thank You!

  12. Thank you sooooooso much for this help. I almost wanted to cry after seeing that ugly blue box splat in the middle of my cute little site. lol I copied and pasted the exact text for changing the color of the Subscribe button, but nothing is changing. Does it take a few minutes??

    1. Hi Naomi, The changes should actually work right away. Did you click the view button as opposed to just looking at the form under the “content” section? Also, double check the color hex code to make sure that’s correct.

  13. Hi Lauren,
    Thank you so much for doing this! Any chance you can advise how to remove the padding on the top of a form (where the title goes)? Thank you in advance!
    ~ Katie
    PS You can see the form at http://www.thebakers.tv (12 Unique Date Night Ideas…for $15 or Less)

    1. Hi Katie,

      You’re so welcome!

      I’m not seeing the title on your form. Were you able to get that figured out?

  14. Lauren…

    Super useful info. Thanks.

    My issue is trying to adjust the height of the embedded ConvertKit form. Not sure which element of the HTML or CSS controls that height setting, but I can’t seem to adjust it.

    http://www.MedoraHeilbron.com

    For reference I included the ugly orange bar above the subscribe box – as that’s roughly the target height for the entire Subscribe box (knowing I’ll also need to decrease the height of the button and the form fields).

    Any guidance here is exceptionally appreciated.

    Thanks!!

    Enjoy………….G

    1. Hi Gary,

      I just took a peek but the subscribe box on the home page looks like it’s a plugin and not the embed code from Convert Kit. Did you decide to switch this up?

  15. This is so GREAT! I’ve pinned your article.

    I’m a little stuck – how do you change the alignment to the left? For example, I am using a simple email form in a wordpress template and want to make it align left.

    website –> iglm.rocks

  16. Hi! Thanks for your article! I’m trying to reduce the padding between the elements. Any idea how I can do that?

    Thanks!

    1. Hi Sarah! You’re very welcome! Glad this was helpful!

      Are you able to link me to an example so I can see the code?

  17. Laura Shaw says:

    This is so helpful! Thank you!

    Do you happen to know if there is an option to resize an image within a form?

    1. You’re very welcome!

      Hmm.. I don’t think so actually! You probably can with CSS but I’d need a link to it to see.

  18. Helpful! Is there a way to put CSS into the Custom CSS box to add an image gallery? i appreciate your help!

    1. Hi Anita! So glad you found this post helpful!

      If you’re using the new editor in ConvertKit, they have an option to add Galleries directly to your broadcasts.

  19. This is so helpful! I am also having an issue with the padding. I am trying to reduce the padding above the form where I have it at the top of my homepage and also in my sidebar: https://unanchoredpassenger.com/

    Thank you in advance!

    1. You can try adding the following:

      .formkit-form[data-uid=”c2f6107938″][min-width~=”700″] [data-style=”clean”], .formkit-form[data-uid=”c2f6107938″][min-width~=”800″] [data-style=”clean”] { padding-top: 0; }

Leave a Reply

Your email address will not be published. Required fields are marked *