How do I use a signup form graphic overlay around the fields

[davemarcotte]

Hi,
This isn't specifically a listmail pro question except in how it relates to the signup code generation.

But it is something I've wanted to know for awhile now.

Question: How do I generate the signup code and then be able to surround the Name and Email fields with a graphic?

Here's an example I saw today that reminded me how much I want to know how to do this. (Apologies for advertising this. I am not promoting this product, not know anything about it.)

http://www.videoskinstemplates.com/

About mid way down the page he's got a graphic that has the signup form integrated into it.

How can I do this?

Thanks,
Dave

[DW]

Hi Dave,

It looks like either HTML background images or a flash presentation.  I would think you can do that with just HTML, but unfortunately this is beyond the scope of my support.  Here's a helpful tutorial:

http://www.tizag.com/cssT/background.php

Regards

[davemarcotte]

Thanks Dean,
I'm not seeing anything on that example page relating to integrating the signup form code into a graphic though. Maybe I'm missing it. But no worries.

It is definitely outside your obligation. But thank you for a quick comment.

I would like to ask for a feature request though:

My signup form generator generates a form that is skewed. I'd like to have the sign up form generator to have an option for an aligned name/email block so it looks good on my page.

Is this something you could integrate? Perhaps with a quick button option, or dropdown with templates to choose from?

Thanks so much Dean.
Dave Marcotte

[DW]

Hi Dave,

The page simply shows how to set the background of any part of your page to an image.

I am working on the next update and indeed there are some improvements to the signup form generator already made including surrounding the form in a basic HTML table, which lines things up the way you requested.

While I cannot instruct you on HTML basics, I can provide an example form for you to use:

Code: [Select]

<form method=post action=http://example.com/mail/signup.php>
<input type=hidden name=list value=1>
<table border=1 cellspacing=0 cellpadding=5>
 <tr>
  <td>Name</td>
  <td><input type=text name=fname size=15></td>
 </tr>
 <tr>
  <td>Email</td>
  <td><input type=text name=email size=25></td>
 </tr>
 <tr>
  <td colspan=2 align=center>
   <input type=submit value=Subscribe>
  </td>
 </tr>
</table>
</form>
I highly recommend Googling the phrase "HTML tutorial" as this is pretty standard stuff.

Regards

[davemarcotte]

Yep, that's it!

But I've changed the first field size to match the second at a value of 25

 <td>Name</td>
  <td><input type=text name=fname size=25></td>
 </tr>
 <tr>
  <td>Email</td>
  <td><input type=text name=email size=25></td>
 </tr>
 <tr>
  <td colspan=2 align=center>
   <input type=submit value=Subscribe>
  </td>
 </tr>
</table>
</form>

And I removed the table border and set it to a value of zero.

Now, I need to figure out how to get the code generated from the ListMailPro signup generator into this layout.

And then wrap a graphic around this to look cool!

Thanks again Dean,
You're great!

[DW]

Hi Dave,

You can set a background for the table like this:

Code: [Select]

<table border=1 cellspacing=0 cellpadding=5 style="background-image:url(background.gif);">
The background.gif file would need to exist on your web site in the same folder as the file displaying the signup form.  This will get you a basic square signup form with a background... for rounded corners you would need to create a very specific (size, colour, etc) graphic for behind your signup form, and then make sure the table is just as wide and high as the graphic.  Or use a custom CSS corners solution.  This is all not easy stuff, even for me (graphics are not my strong point).  I recommend finding an experienced web+graphic designer to handle this for you.  You could try www.guru.com, www.elance.com, www.rentacoder.com, etc

Regards

[Cheng]

Hello,

A very good site for HTML tutorials is http://www.htmlgoodies.com

Brgds
Geir Hoem