4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

How Do I Create An Optin Form That Looks This Way?

by sownsow
3 replies
  • WEB DESIGN
    • |
I am learning how to code slowly but surely, but I definitely want to learn how to create an optin form that looks like this?

I've been wanting to learn this for a while but never took the initiative to learn CSS. (I'm guessing I need to know CSS to do this?)

If someone could sort of explain how it's done and then point me in the right direction where I can teach myself how to do this, I'm sure I can figure it out.

Here's how it looks:

#create #form #optin
  • Profile picture of the author Brandon Tanner
    Yeah, you need to know HTML & CSS for that. Nothing complicated about that opt-in form though, as long as you understand how CSS layout / positioning works, and how forms work.

    That said, Firebug is great for figuring out how specific parts of webpages are coded.

    When you're at a webpage that you want to learn about, open up Firebug, make sure it's on the 'HTML' tab, then click the 'Inspect Element' button (looks like a rectangle with an arrow on top of it). Then click on any element on the webpage, and it will display the HTML/CSS code that created that element.

    Definitely an essential tool to have in your coding toolbox!
    Signature

    {{ DiscussionBoard.errors[8122538].message }}
  • Profile picture of the author Michael71
    Brandon,

    it does not mean you "learn" how to code (I mean correctly) by inspecting some websites...

    Most of the sites in IM are really bad code, especially the sales/squeeze pages.
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8123020].message }}
    • Profile picture of the author Brandon Tanner
      Originally Posted by Michael71 View Post

      Brandon,

      it does not mean you "learn" how to code (I mean correctly) by inspecting some websites...

      Most of the sites in IM are really bad code, especially the sales/squeeze pages.
      Depends on the website he's inspecting, of course. But yeah, I agree that most websites in the internet marketing niche are coded pretty badly... good point!

      @ sownsow... here's some quick and dirty code I just whipped up for you. It's pretty basic and not mobile-optimized or anything like that... but it should at least get you headed in the right direction.

      HTML:
      HTML Code:
      <!DOCTYPE html>
<html>

<head>

    <title>Page title goes here</title>
    <meta name="description" content="Page description goes here">
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css" />

</head>

<body>

    <div id="optin">
    
        <!-- Opt-in header text -->
        <span class="red">FREE VIDEO:</span>
        <span>Blah blah blah blah blah, blah blah blah, blah blah blah blah :)</span>
        
        <!-- Form -->
        <form action="http://www.LinkToYourAutoresponderSubmitPage.com" method="POST">
            <input id="email" type="text" value="Your Email Address..." onClick="this.value = ''">
            <input id="submit" type="submit" value="Yes! Send Me Spam!!">
        </form>
        
        <!-- Disclaimer -->
        <p id="disclaimer">Your information is definitely not safe with us, and we will spam the crap out of you if you let us. Suckers!!! :)</p>

    </div>

</body>
</html>
      CSS:
      HTML Code:
      #optin {
    width: 300px;
    padding: 10px;
    background-color: rgb(255,255,154);
    border-color: rgb(209,0,0);
    border-width: 3px;
    border-style: dashed;
    font-family: tahoma, verdana, arial;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

#email {
    width: 270px;
    height: 30px;
    margin: 10px;
    font-family: tahoma, verdana, arial;
    font-size: 22px;
    font-weight: normal;
}

#submit {
    width: 250px;
    height: 56px;
    margin: 10px;
    background-color: rgb(255,190,38);
    font-family: tahoma, verdana, arial;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

#disclaimer {
    font-family: tahoma, verdana, arial;
    font-size: 12px;
    text-align: center;
    color: grey;
}

.red {
    color: red;
}
      Signature

      {{ DiscussionBoard.errors[8123511].message }}

Trending Topics