Web Design : Graphical Opt-ins

10 replies
Hey folks

I'm in the process of setting up a new website which I created in photoshop.
I've done the graphic design for an optin box which I intend to connect to Aweber.

Whats the best way of creating a graphical optin box and how do you allow users to enter data into it on your site ???

Many thanks for your help

G
#design #graphical #optin box #optins #web #wedesign
  • Profile picture of the author Lynn Stivers
    Hi Glen,

    You need to define the graphic as a background in your HTML so your
    autoresponder form will be in front (or on top) of the graphic.

    Then just paste your autoresponder code into your HTML so that it
    shows up on the opt-in graphic that you set as a background.

    You can get some graphics with opt-in boxes here if you'd like to see
    how it works - they're free.


    Lynn
    {{ DiscussionBoard.errors[236185].message }}
  • Profile picture of the author Rajul kaushik
    Glen,
    There's a warrior by the name seree: check out his wso.
    It's awesome and is very affordable. It has good amounts of opt-in options and I am sure u'll like them. They are impressive if not out of the world awesome:-)
    Go to: http://www.warriorforum.com/warrior-...free-plug.html
    All the best.
    {{ DiscussionBoard.errors[236399].message }}
  • Profile picture of the author blokh
    Hey

    The users can not enter information on the graphic (as you know) so the best bet is to make the background in photoshop and paste the optin text boxes on it from the aweber code. You can use your graphic submit button by changing :

    <input type="submit" value="Submit Form">

    TO

    <input type="image" src=".../path to image">

    ------------

    You can also modify the text boxes that you get from aweber code to make them look different:

    <input type="text" name="name" style="font-face:Arial;background-color:Blue;height:20px; font-size:15px;"> and so on ...

    Good Luck
    Signature

    Raakesh (Blokh)
    Raakesh.com - My Web Presence. All about me and my products.
    LongTailMagic.com - Analytics Software helps you track actual search terms and other visitor information.
    InstantLP.com - Generate high Quality Score landing pages with just a few clicks.

    {{ DiscussionBoard.errors[236411].message }}
  • Profile picture of the author Glen Kirkham
    Thanks for the quick reply.

    I have just downloaded your headers, they are fantastic....
    How can i nudge it left and right in dreamweaver??

    Thanks

    Glen
    {{ DiscussionBoard.errors[236458].message }}
  • Profile picture of the author Lynn Stivers
    Hi Glen,

    I'm glad you like the headers - thank you.

    To be honest I'm not familiar with Dreamweaver but if you can view the HTML you should see where the sizes and alignments are defined.

    Use a copy of the original in case something gets messed up and then tweak the HTML until the page starts looking the way you want it to look.

    If you only make one change at a time you can see if it's ok or not and if it isn't undo the change and try something else. Believe it or not that's how I learned HTML.


    Lynn
    {{ DiscussionBoard.errors[236539].message }}
    • Profile picture of the author jan roos
      Lynn I also ordered your headers and I bought the matching graphics. Looking forward on learning how to install them on my site.Very nice graphics

      Regards
      Signature

      I'll teach you how to make money like a Mamba.

      Sign up for the free money mambas newsletter!

      {{ DiscussionBoard.errors[236656].message }}
  • Profile picture of the author Glen Kirkham
    Do I get a comission on that Lynne ???? :-P

    I've got my page ready complete graphical opt in box ready and inserted my Aweber fields in my HTML editor but I'm having real difficulty aligning the Aweber text fields up into the background main page....

    I'm using Dreamweaver and NVU so I know I've got the tools.... I've tried resizing, indenting, spacing etc with no luck....

    Grrrrrrrr....

    Cheers for all your help :-)

    G
    {{ DiscussionBoard.errors[236700].message }}
  • Profile picture of the author Lynn Stivers
    Jan,
    Thank you - I appreciate it! If you have any questions about anything just let me know.




    Glen,

    Are you pasting ALL of the code that Aweber gives you for a form? If so then that's probably your problem - here's why...

    The autoresponder code that Aweber and other services give you includes a table for it to be in, text boxes for the name and email, and a submit button.

    You don't need those elements for these headers because they're already included and resized to fit. All you need to do is copy the "values" from your autoresponder code (the parts that identify it as yours - user ID, autoresponder name or number etc.) and paste it into the designated places in the autoresponder code included with the graphics.

    You also need to copy and paste the URL of the page you want your autoresponder to forward your subscribers to and the URL for it to post to - usually at the top of the code.

    In other words - the only parts of your autoresponder code that you should be pasting into the HTML are the parts that identify it as yours and the parts that make it work.

    All of that info should be marked in the HTML with comments - (comments are between these... <-- -->).

    I hope that helps.


    Lynn
    {{ DiscussionBoard.errors[236765].message }}
  • Profile picture of the author Glen Kirkham
    Ok... We're all ready to go except one minor issue... The button doesn't work... But here it is for you, let me know what you think:

    Untitled Document

    I have actually bought the domain at the top of the page.. I will upload it there once it's glitch free :-)

    Compare that to the front end i've been using since money-legends came online

    Money-Legends.com - Changing Financial Destinies Since 2005

    I think this is a real step forward to increasing conversions...

    The whole button issue... which part of the code from Aweber am I taking and where do i assign it in Dreamweaver ?

    Think outsourcing may be a good idea for future projects..

    I look forward to your feedback :-)

    Cheers

    Glen
    {{ DiscussionBoard.errors[238006].message }}
  • Profile picture of the author Glen Kirkham
    P...S.... Lynn, That optin graphic I got from your website works a real charm :-)
    {{ DiscussionBoard.errors[238012].message }}

Trending Topics