Guide To Editing Templates amazonaws com
Guide To Editing Templates Landing pages and other pages that contain opt-in forms will need the details of your own opt-in form. Most templates will already be styled using CSS. So you don't want to change the style. That means simply adding the form specific data to your template. Opt-in forms are exactly that. They are HTML forms. You will need to use a plain text editor to edit your templates. I highly recommender CodeLobster PHP Edition which is completely free and perfect for editing HTML files. You can download it and install it from here http://www.codelobster.com/download.html To edit a template simply open it in CodeLobster. Usually the file you want will be called index.html. Below is an example of what that looks like
Note the piece of code highlighted is the opt-in form. It will be the code between the tags. Page 1
Copyright Tony Marriott
Personal use only. Not for distribution
Guide To Editing Templates
I will cover the changes needed for Getresponse. You will need to go to (or create a new) web forms in Getresponse. In the final step yiu are given your optin form or web-form html code as shown below
As you can see I have selected HTML and turned CSS styling off. I have also highlighted the firstbit of code you need. It is the “action=?????” section. Copy that section. In the template above you will see it says 'action=”#”'. Replace that with the “action” code from your autoresponder. Now scroll down to the bottom of your Getresponse code and just before the tag you will see a hidden input which looks like this: Page 2
Copyright Tony Marriott
Personal use only. Not for distribution
Guide To Editing Templates where 99999999 is webform ID. Copy this and paste it just before the tag in the template and save your file That's all you have to do. You should now have a template opt-in form code that looks like this
Some templates may have different form codes and other autoresponders require different things added but fundamentally they are all the same. The generic rule is 1. Get the HTML version of the opt-in form code from your autoresponder 2. Find and add the “action” to the template. 3. Find and add any “hidden” inputs to the template. Aweber For instance call their forms “Sign-up Forms”. Check the HTML code and you will see a section that looks something like this: I have shown the action field and the hidden fields in blue. As I explained previously simply add in the action field at the top of the form and add the hidden fields just before the tag.
Templates Without Forms Some templates may not have the tags. In which case you will need to add the action and hidden fields as described above but also include the and tags. So copy the entire line and paste before then input fields on the template. Similarly copy and paste the hidden values and the tag after the submit button. Again the additions are shown in blue. for example
Changing images Generally templates will come with their own image folder (usually called “img”). The easiest way to change an image is to a copy your new image to the template img folder and delete or remove the original image. Now rename your new image the same as the original. Alternatively if you have or want to host the image elswheer yiu will need to replace the image URLin the template with the full URL of your hosted image. i.e. would become
Editing Text The simplest way to edit the displayed test is to change it in your codelobster editor. If you are familiar with HTML and/or CSS you may be able to do more complex changes but I suggest sticking to just changing the existing text to say what you need to say for your product or free offer.
Page 5
Copyright Tony Marriott
Personal use only. Not for distribution
Note the piece of code highlighted is the opt-in form. It will be the code between the tags. Page 1
Copyright Tony Marriott
Personal use only. Not for distribution
Guide To Editing Templates
I will cover the changes needed for Getresponse. You will need to go to (or create a new) web forms in Getresponse. In the final step yiu are given your optin form or web-form html code as shown below
As you can see I have selected HTML and turned CSS styling off. I have also highlighted the firstbit of code you need. It is the “action=?????” section. Copy that section. In the template above you will see it says 'action=”#”'. Replace that with the “action” code from your autoresponder. Now scroll down to the bottom of your Getresponse code and just before the tag you will see a hidden input which looks like this: Page 2
Copyright Tony Marriott
Personal use only. Not for distribution
Guide To Editing Templates where 99999999 is webform ID. Copy this and paste it just before the tag in the template and save your file That's all you have to do. You should now have a template opt-in form code that looks like this
Some templates may have different form codes and other autoresponders require different things added but fundamentally they are all the same. The generic rule is 1. Get the HTML version of the opt-in form code from your autoresponder 2. Find and add the “action” to the template. 3. Find and add any “hidden” inputs to the template. Aweber For instance call their forms “Sign-up Forms”. Check the HTML code and you will see a section that looks something like this: I have shown the action field and the hidden fields in blue. As I explained previously simply add in the action field at the top of the form and add the hidden fields just before the tag.
Templates Without Forms Some templates may not have the tags. In which case you will need to add the action and hidden fields as described above but also include the and tags. So copy the entire line and paste before then input fields on the template. Similarly copy and paste the hidden values and the tag after the submit button. Again the additions are shown in blue. for example
| Name: | ||
| Email: | ||
| All information is kept 100% confidential Page 4 Copyright Tony Marriott Personal use only. Not for distribution Guide To Editing Templates | ||
Changing images Generally templates will come with their own image folder (usually called “img”). The easiest way to change an image is to a copy your new image to the template img folder and delete or remove the original image. Now rename your new image the same as the original. Alternatively if you have or want to host the image elswheer yiu will need to replace the image URLin the template with the full URL of your hosted image. i.e. would become
Editing Text The simplest way to edit the displayed test is to change it in your codelobster editor. If you are familiar with HTML and/or CSS you may be able to do more complex changes but I suggest sticking to just changing the existing text to say what you need to say for your product or free offer.
Page 5
Copyright Tony Marriott
Personal use only. Not for distribution
