Seen the new Sign Up Form?
One of the few good things that I found at the dotcomsecretsX coaching course was the cool ribbon effect at the top of the Sign Up form on the squeeze page that is produced.
By coincidence I found the code for making that ribbon effect in a magazine that I bought several months ago. So I have been experimenting with code, which uses CSS.
The experience was another of those frustrating, but when it all worked out fine, eventually, but rewarding things that I enjoy working on.
The process I followed went something like this:
1: Code a page that has containers to hold the elements that make up the a box to hold the contents, the ribbon to go around the top of the box, the text to write on the ribbon and position to hold the form. For that I used an editor that allows me to write up html code and CSS stylesheets, along with other code not used in this project, such as PHP etc. There are many editors available that can do this from the incredibly expensive Dreamweaver to many free software packages. See below for a part of the html code.
2. Prepare the CSS code for the various containers above. Again I used the editor as described above. A small part of the CSS stylesheet is shown in the image below.
3. Test the code. The result is shown below. It took several attempts at loading the page to get the end result as some of the settings needed to be adjusted to get the best result. The page displays well in FireFox and Chrome, but Internet Explorer ignores some of the code and produces a less than optimal result. Please note the form below is not active.
2. Prepare the CSS code for the various containers above. Again I used the editor as described above. A small part of the CSS stylesheet is shown in the image below.
3. Test the code. The result is shown below. It took several attempts at loading the page to get the end result as some of the settings needed to be adjusted to get the best result. The page displays well in FireFox and Chrome, but Internet Explorer ignores some of the code and produces a less than optimal result. Please note the form below is not active.
4. Combine elements from the html and CSS code with the html code from my AutoResponder to add to a text widget to show in the sidebar. Some tweaking of settings was also necessary to make it fit, and most of that was done on my test WordPress site where I play around with things like this so that I do not destroy this blog. When it is works on the test site, it is simply a matter of copying it to the real site. The result of that step can be seen in the sidebar of this site, and completing the form will subscribe you to my email marketing list and a sequence of messages that will have links to some resources for list-building.
Looking for something like that for your blog? Use the Contact Us page. That page can also be reached from a link hidden below the About link in the header menu. (I really must tweak the header to makes sure all links show!)
