How to Build an Opt-In Page
Karl Kasca
Printer-Friendly Format

Here's a quick and dirty way to design Opt-In Pages.

Link to Video
Note: This video is a "how to" about designing opt-in pages quickly. Please skim the text below for additional info and links you may find helpful.

Please refer to our related article on eNewsletters for additional information on the Opt-In process (in General).

Also, please note that there are other Related Articles which provide more info re: the Action Steps for this article:

Opt-In List


One of the most basic things you need for building your list is a way for people to opt-in to your list. Along with the sign-up you need to give something of value to enourage people to sign-up.



Give Something of Value


The most common thing to offer is an eNewsletter, since you need a way to communicate with your list of subscribers regularly.

You can also offer something else of value such as an e-Book, White Paper, list of top ten (or more) tips, checklists, etc. Think of it this way: What offer would get you to sign-up? If it's enough to convince you (and people you know) then it will probably convince others.  Of course you can always test this, or survey some people to see what the consenus is.



Action Steps


  1. Download and Install the free Kompozer HTML editing program.


    1. http://kompozer.net/


  2. Save file: File > Save  


    1. Choose a place on your hard drive to Save the file to.


      1. If you don't know where, Save the file to your Desktop. 


  3. Insert a 3-box (cell)  Table into the web page by:


    1. On Kompozer's menu, click: Insert > Table > Quickly


    2. Click in the upper-left box in the quick table grid and drag it two boxes to the right and click in the third box (on the right).


      1. This automatically brings a three-box (cell) table into your opt-in page.


  4. Insert an image by:


    1. Clicking in the box on the left and on: 


    2. Kompozer's menu, click: Insert > Image 


      1. On "Image Properties": 


        1. Under the "Location" tab:


          1. Copy and paste the URL for an image, e.g., a Shiny Blue Arrow (pointing right):


          2. http://www.increaseonlineprofits.com/public/images/ShinyBlueArrowRight.gif  


          3. Type in the "Alternative Text", e.g., "Shiny Blue Arrow Pointing to the Right"


          4. Click on: "Advanced Edit"


            1. Under "HTML Attributes":


              1. Click the down-arrow for "Attributes" and choose "Align".


              2. Click the down-arrow for "Value" and choose "Right".


        2. Under "Dimensions" tab:


          1. Choose the "Custom Size" radio button


            1. Make sure "Constrain" is clicked.


              1. Enter "150" (without the quotes) into the Width and hit the Tab key.


                1. Note that the Height will automatically adjust.


  5. Insert some Text to the left of the image (e.g., shiny blue arrow) by:


    1. Clicking in the box on the far-left of the image and entering some Text using your keyboard.


  6. Insert the HTML code/script for your aWeber Sign-up form


    1. Click in the box (cell) on the far-right of the box the image is in.


    2. Go to aWeber and login.


      1. Click List Settings > Web Form


        1. Find the web form for your sign-up box, e.g., "Sign-up Box Test"


          1. Click on "Get HTML"


            1. Copy the Javascript Snippet 


            2. Paste the Javascript Snippet into the box on your Sign-up box page.


              1. Note: In some cases you may wish to use the Raw HTML Version of the text (e.g., for the sidebar of your blog), but then you will not be able to track statistics.


  7. Edit the properties of the table by right clicking anywhere on the outer boundary line of the table


  8. You should see a drop-down menu where you can choose "Table Cell Properties".


    1. Note: If you *don't* see this option, left-click in a cell of the table, left-click on the border, then right-click on the border.


    2. Choose "Table Cell Properties"


      1. Choose the Table tab.


        1. Assure that the Border is 0 (zero), so the table border doesn't show on the web page.


        2. Under "Table Alignment", choose: Right.


      2. NOTE: If after doing this, the 3-box table does *not* stretch all the way across the page:


        1. Under the "Table" tab, set the Width to "100% of window" (and *not* "100 pixels", which is the default).


  9. Now you can go back and Enter: 


    1. A logo/banner at the top of the page.


      1. See article on: "How To Insert An Image Into A Web Page"


    2. Other/additional text in the box on the far-left of the image (e.g., Shiny Blue Arrow)


    3. Text, etc., above and below the Arrow/Sign-up box.


  10. The final results will look something like our Opt-In Page:


    1. http://www.increaseonlineprofits.com/


    2. And here's the "New Opt-In Page" created in the Video created in the Video below.




Video: How to Create a Quick & Dirty Opt-In Page


Note: This video is a "how to" about designing opt-in pages quickly. Please skim the text in this article for additional info and links you may find helpful.





Resources


  • Kompozer - Free HTML Editing software program which we highly recommend.




Related Articles:




ARTICLE DATE: 12/01/08
REVISED DATE:





Printer-Friendly Format
 Related Articles
·  List Building Part 2: Google AdWords, Yahoo! Sponsored Search, Microsoft adCenter, placement targeting and Pay Per Click
·  List Building Part 1: Why Build a List and How Do I Do It?
·  How to Create a Sign-up Box Using AWeber's Web Form
·  How to Insert an Image into a Web Page
·  How to Upload/Transfer/FTP Files to Your Website Server
·  How to Find, Download, and Edit an Image


#bottom_spacer# height=1 ALT="">
How to Build an Opt-In Page ">