Convertkit Form on Header

Support
#1

Hi guys!
Need some help here :slight_smile:
I’m trying to place a Convertkit form in a header and it’s not looking good!

Here’s what it looks like right now: http://sarahtry.com/blog/

What seems to happen is that it works for a second and for some reason it goes back to NOT working immediately.

I want it to look like this: http://www.chalenejohnson.com/
or like http://fabipaolini.com/es where you have the form items next to each other.

Also, please take a look at how it looks on the Mobile version as well. I’m struggling with making that blue bar word. The text is all over the place and it should be fitting inside.
PLease help!
thanks :slight_smile:

Fabi

#2

Hi there,

The problem is that you added the code of the form with all the CSS stuff many times for different viewports. It is recommended that you remove the CSS part of the code and add it to Pro > Launch > Theme Options > CSS section so that it will only be added once and not multiple times.

Also for the mobile version you need to add additional Custom CSS code to make the form smaller.

As the Form you are trying to embed is a 3rd party one I suggest that you contact the developer of the form to give you a better guidance on how they can fit the CSS work. Implementing the customization of the 3rd party scripts are outside of our support policy.

Thank you for your understanding.

#3

Hi! Thanks for your response. I checked and you were right, I did have some code related to Convertkit there by mistake. However, I removed it and I’m still having the same problem.

When I’m Editing the Header it works perfectly, but once I save and see it live, it changes back.
The other thing that’s happening is that in the mobile version, the text is overflowing the blue bar. Again, when I’m working on it and editing in the header, it doesn’t look that way, but once I save, it changes.

I know that you don’t edit code from a third party. However, I don’t think this is a problem of the third party as I have Converkit on my own site fabipaolini.com and it works perfectly and I don’t have this problem of it changing back to a different size once I save.

Can you check again to see if there’s anything you can do or help me with?
Thanks!

#4

Hi there,

What do changes back? I can’t verify it since I’m not sure what changes you made. All I could see is the form overlapping since the header height is short.

So I changed your header bar height from 6em to 8em, and set the text element(where form is) bottom margin to -1.4em.
Then I cleared the cache and it works.

Thanks!