Jump to content
Sign in to follow this  
artkit

Adding CSS opt-in form

Recommended Posts

artkit

I am try to add a CSS,HTML opt-in form to my text widget and it keeps taking the form of the default theme CSS. Do I put the Raw HTML in the text widget and then where do I put the external style sheet code? I tried even putting in the html in CSS format and still no background image and button appears. I put the CSS in the custom code section for the Platform pro dashboard in the body but that didn't work either. Can you please explain the steps I need to follow to accomplish a form in CSS using Platform Pro. Here is the html code: </style></head><body> <div class="formContainerDiv" > <form action="http://xxx.us1.list-manage1.com/subscribe/post?u=5baacd70f453387d9cbc00fd9&id=3884facc0f" name="SubscriptionForm" method="POST" > <input value="PASTE THE U VALUE HERE" name="u" type="hidden" /> <input value="PASTE THE ID VALUE HERE" name="id" type="hidden" /> <div> <p class="fieldName" > Name </p> <input type="text" name="name" class="textInput" /> <p class="fieldName" > E Mail </p> <input type="text" name="email" class="textInput" /> <p class="fieldName centerAlign" > Where Did you Find Us? </p> <input type="text" name="findus" class="textInput" /> <input type="submit" name="submit" value="SUBSCRIBE" class="subscribeB" /> </div> <!-- End div Container --> </form> <!-- End Form --> </div> <!-- End formContainer --> </body></html> And here is the CSS: * { margin:0; padding:0; } div.formContainerDiv { height:474px; width:300px; background-image:url(images/bg.png); background-repeat-x:no-repeat; background-repeat-y:no-repeat; background-repeat:no-repeat; background-attachment:initial; background-position:initial initial; background-position-x:initial; background-position-y:initial; background-origin:initial; background-clip:initial; padding-top:1px; background-color:transparent; margin:10px; } div.formContainerDiv > form > div { width:280px; border-width:initial; border-color:#000000; border-style:none; margin:85px 0px 0px 14px; } p.fieldName { padding-left:8px; font-family:'lucida sans unicode'; font-size:20px; font-weight:100; color:#FFFFFF; } p.centerAlign { text-align:center; margin-top:2px; } input.textInput { background-image:url(images/textFieldsBG.png); background-repeat-x:no-repeat; background-repeat-y:no-repeat; background-repeat:no-repeat; background-attachment:initial; background-position:initial initial; background-position-x:initial; background-position-y:initial; background-origin:initial; background-clip:initial; height:40px; width:275px; border-width:initial; border-color:#000000; background-color:transparent; border-style:none; margin:1px 0px 8px 0px; } input.subscribeB { background-image:url(images/subscribeButtonbg.png); background-repeat-x:no-repeat; background-repeat-y:no-repeat; background-repeat:no-repeat; background-attachment:initial; background-position:initial initial; background-position-x:initial; background-position-y:initial; background-origin:initial; background-clip:initial; width:233px; height:53px; border-width:initial; border-color:#000000; font-family:helvetica; font-size:30px; font-weight:bold; background-color:transparent; border-style:none; margin:10px 0px 0px 22px; } input.subscribeB:hover { color:#FFFFFF; } Thank You Beau Thorogood My website is http://fivelinedesigns.com

Share this post


Link to post
Share on other sites
catrina

The CSS code must not be put in the widget and if it's not working in the Custom Code area, paste it into the base.css file (in PlatformBase, the child theme) instead.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
artkit

Thanks for the help. I figured out what was wrong and it was the url path to the images. I had the url(images/bg.png) I just changed the url to url(http://my domain/images/bg.png) Kinda important if I want any graphics to show up. I am a relatively new coder. I love platform pro though. Thanks anyway Catrina

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×