For the longest time, HTML code was Greek to me. But after some practice, it became a language that could be manipulated into taking something from ordinary to extraordinary. You can harness this potential in more than just the HTML email campaigns you send out. For example, the HTML Signup Form can take on a more dazzling look than the default.
This form can be changed to fit nearly any website where you can put in your own code, but for the purposes of an example, I’m going to customize my form to fit the medium of my Facebook page (and when I finish my code, I’ll be using these instructions to get it on my page). To start, I go to the Signup forms tab and decide that I want to capture name, email, and zip code info on my fans. I generate the code and here’s what my default looks like:
It’s nice, but I want something that’s more eye-catching and unique to me. In five steps, I’m going to make a form that truly deserves to be on my page.
1. Get outside the box frame.
This first customization is more for function than look. When I use the HTML signup form, the submission confirms through my Fan Action Page, which I want to appear outside the Facebook iFrame. To do this, you need to change the URL target, which in the code can be found here:
Next, simply add target=”_blank” to the end of that line to match this:
Now your form will submit the information outside the Facebook iFrame, making it easier for your fans to navigate from one action to the next.
2. Announce your message on top
If you are giving out a free download to all new subscribers – which you should do if you aren’t already – you might want to let your fans know what they’ll be getting. There’s no better place than in the header of your signup form to let them know they’ll be rewarded for giving their email address.
To put in your own message, find the part of the code that looks like this:
Instead of “Signup for our Mailing List” I want to say “Join the list and get a free exclusive download”, so I replace the old message in the code as seen below:
Now, my signup form has changed to look like this:
3. Adjust to your surroundings
Signup forms can be tall and skinny or short and fat; you can change it to take up as much or as little room as you want. For my Facebook page, I want my form dead center and filling out the space available.
To do this, I find the code that looks like this:
Then, I add the property of width=”490” as shown below:
Now, my signup form will looks like this:
4. Hide your border
Even though the signup form is a table, I don’t want it to look that way. For me, I want my signup form to look like one cohesive thing. So to turn off the borders on the signup form, I find the code here:
I then change table border=”1” to table border =”0” as shown below:
Now the form is set to look like this:
5. Everything down to the submit button
This last step is a bit advanced, but if you are up to the challenge (and you should be!), then here is how you replace the default submit button with any image of your own. You’ll need the URL for the image you are using as a button, which you can host for free using the FanBrige Moxiecode Image Manager.
Scroll to the bottom of the code, where you’ll find this:
The changes you need to make to this section are (1) change input type=”submit” to input type=”image” (2) add your image URL with src=”http://www.yourimageurlhere.jpg” and (3) delete the name and value properties so that your code resembles something like this:
My final product is ready for review, and when viewed in Facebook, looks a little something like this:
There is so much more that you can do with the base HTML code, this could be just the start to what you create. So go out there and try out some different looks. Also, don’t forget to collect email addresses on Facebook using FanBridge’s Facebook application. Along with collecting email addresses, you can host audio and video content, display tour dates, and even show your merch store. Best part, no HTML knowledge required.
Want more tips like this? Sign up for the Fan Marketing Institute and get free weekly lessons designed to help you get more fans, cultivate loyalty, and turn fans into customers.
