Awesome Form Box that Automatically Styles your Form

  • 2
  • Idea
  • Updated 8 years ago
Hi, Today I will Be Introducing a new form box that if you put a form in it your form with be styled automatically!

All you have to do is put this code in the html widget and add you form in the spot where it says

<!--

<style type="text/css">
.white_content_2 {display: none;position: fixed;top: 7%;right:45%;padding: 16px;background-color: white;z-index:2002; border-radius:7px; -o-border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;overflow:auto;box-shadow:0px 0px 15px black;/*CSS3 shadow: 30px blurred shadow all around form*/ -webkit-box-shadow:0px 0px 15px black;/*Safari shadow version*/ -moz-box-shadow:0px 0px 15px black;/* Mozilla shadow version*/ }
#form {cursor:pointer;border:5px solid red;border-radius: 20px; -moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;width:700px;height:60px;padding-top:5px;padding-bottom:5px;margin:7px;background-color:none;color:black;font-size:15px;}
#form:hover {cursor:pointer;border:5px solid red;-webkit-box-shadow:0px 0px 13px black;-o-box-shadow:0px 0px 13px black;-moz-box-shadow:0px 0px 13px black; box-shadow:0px 0px 13px black;border-radius: 20px; -moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;width:700px;height:60px;padding-top:5px;padding-bottom:5px;margin:7px;background-color:red;color:white;font-size:20px;}
</style>
<link rel="stylesheet" type="text/css" href="http://freehtmlcodes.tk/resources/css..." />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest....>
<script type="text/javascript">
function showform1(){$('#form1').show(1000);}
$(document).keyup(function(e) { if (e.keyCode == 27) { $('#form1').fadeOut(1000) } });</script>
<div id="form1" class="white_content_2">

YOUR FORM HERE

<br><br> <font size="5"> Press <img src="http://t1.gstatic.com/images?q=tbn:AN..." width="60px" height="35px" /> To Close Lightbox </font>
</div>
<center><div id="form" onclick="showform1()"><p><center><b>Click here to Open Our Form</b> </center></p></div>

-->

PLEASE DON'T EDIT THIS CODE UNLESS YOU KNOW WHAT YOU ARE DOING

Best Regards,
Shawn Holman.

If you are confused please tell me so i can help
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
  • Happy

Posted 8 years ago

  • 2
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Awesome! Thanks Shawn for sharing this with the Yola Community!

Thank you,
Nathan
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Shawn,

Thanks for sharing this idea! I am excited to test it out on my account later this evening.

Cheers!
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
@Nathan- Thank Nathan, I seen a lot of codes you did and this is nothing compared to your stuff.

@Brianna- Hope you like it! You can also add text into the lightbox. This lightbox has a unique way of closing. Using the ESC Button

@Everyone- Here is the example: http://freehtmlcodes.tk/newsletter-co...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem Shawn :) This is a pretty awesome script though! :)
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
I just like how it styles forms automatically using a stylesheet
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, thats a nice code for people that don't know how to style their form with CSS, I hate it when forms are blank and default, its like these days your forms NEED to be styled! =D
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
That's so cool! I love it! Can I try to edit this code so you can make more than one on a page easily please?