Adding Opt-In Code to Form Template

by JonGall

Posted: 11 years ago 8 replies

WEB DESIGN

Hey IM Warriors,

I need help getting my template form working with the opt-in code generated. Here is the form (without my opt-in code):
 <script type="text/javascript" src="http://www.jongall.com/js/pngfix.js"></script> <style type="text/css"> #optin{margin:0;padding:0;width:414px;height:124px ;background:url(http://www.jongall.com/images/optin-bg.png) no-repeat;} #optin .optinhead{margin:0;padding:8px 0;width:414px;height:12px;text-align:center;color:#FFF;font:bold 16px verdana, helvetica, sans-serif;display:block;overflow:hidden;} #optin .optintext{margin:0;padding:4px 0;width:414px;height:11px;text-align:center;color:#FFF;font:normal 11px verdana, helvetica, sans-serif;display:block;overflow:hidden;} #optin .optinform{margin:0 auto;padding:0;width:414px;display:block;overflow: hidden;} .txtField{padding:3px 0;text-align:center;} .name_field{margin-right:5px;color:#818181;padding:4px 23px 4px 4px;width:140px;border:1px solid #ccc;background:#FFF url(http://www.jongall.com/images/name.gif) no-repeat right;} .email_field{color:#818181;padding:4px 23px 4px 4px;width:140px;border:1px solid #ccc;background:#FFF url(http://www.jongall.com/images/email.gif) no-repeat right;} .email_field2{color:#818181;padding:4px 23px 4px 4px;width:240px;border:1px solid #ccc;background:#FFF url(http://www.jongall.com/images/email.gif) no-repeat right;} .opt_btn{cursor:pointer;margin:0;padding:0;width:1 81px;height:29px;background:url(http://www.jongall.com/images/optin_btn.jpg) no-repeat top;border:none;} </style> <form> <div id="optin"> <div class="optinhead">Killer Headline Goes Here</div> <div class="optintext">Simply Enter Your Information Below To Get Instant Access!</div> <div class="optinform"> <div class="txtField"><input type="text" name="name" class="name_field" value="First Name" onFocus="if(this.value == 'First Name'){ this.value = ''; this.style.color= '#1a1a1a'; }" onBlur="if(this.value == ''){ this.value = 'First Name'; this.style.color= '#818181'; }" /><input type="text" name="email" class="email_field" value="Email Address" onFocus="if(this.value == 'Email Address'){ this.value = ''; this.style.color= '#1a1a1a'; }" onBlur="if(this.value == ''){ this.value = 'Email Address'; this.style.color= '#818181'; }" /></div> <div class="txtField"><input type="submit" name="submit" value="" class="opt_btn" /></div> </div> </div> </form> [/B]

Here is the code that I need to integrate into the form above:

<form method="post" action="http://www.gogvo.com/subscribe.php"> <input type="hidden" name="CampaignCode" value="c02ecc5d27f2" /> <input type="hidden" name="FormId" value="148501" /> <input type="hidden" name="TrackerName" value="Test_Tracking" /> <input type="hidden" name="AffiliateName" value="JonGall" /> <table align="center"> <tr> <td>First Name:</td><td><input type="text" name="FirstName" class="name_field" placeholder="First Name" /></td> </tr> <tr> <td>Email:</td><td><input type="text" name="Email" class="email_field" placeholder="Email Address" /></td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="Submit" /></td> </tr> </table> <img src="http://www.gogvo.com/show_form.php?id=148501" /> </form>

Any help would be greatly appreciated. I think I spent way too much time on this issue already.

Thanks in advance,

~JG~

#adding #code #form #optin #template

Michael71

11 years ago

Fiverr... Just pasting some code here does not inspire me to work on it...

Thanks
1 reply

Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

{{ DiscussionBoard.errors[7792853].message }}

Brandon Tanner

11 years ago

^ Yep. And just a FYI... you should format your code properly before you post it here (put each piece of your code on a separate line, use nested div's, whitespace, etc). Like...

HTML Code:

<style>
    #div1 {styles}
    #div2 {styles}
</style>

<div>
    <div>
        <element>
    </div>
</div>

That will make your code a lot more readable, and will greatly increase your chances of someone here helping you out. No one here wants to sort through one giant blob of spaghetti code.

[ 1 ] Thanks
2 replies

Signature

{{ DiscussionBoard.errors[7794375].message }}

JonGall

11 years ago

Yeah, you guys are so right. That was my bad! Here's the codes in a more readable format:

Here's the actual form w/out the opt-in code included:

HTML Code:

<script type="text/javascript" src="http://www.jongall.com/
js/pngfix.js"></script>
<style type="text/css">
#optin{margin:0;padding:0;width:414px;height:124px;background:url
(http://www.jongall.com/images/optin-bg.png) no-repeat;}#optin .
optinhead{margin:0;padding:8px 0;width:414px;height:12px;text-align:
center;color:#FFF;font:bold 16px verdana, helvetica, sans-serif;display
:block;overflow:hidden;}#optin .optintext{margin:0;padding:4px 0;
width:414px;height:11px;text-align:center;color:#FFF;font:normal 
11px verdana, helvetica, sans-serif;display:block;overflow:hidden;}
#optin .optinform{margin:0 auto;padding:0;width:414px;display:
block;overflow:hidden;}.txtField{padding:3px 0;text-align:center;}
.name_field{margin-right:5px;color:#818181;padding:4px 23px
 4px 4px;width:140px;border:1px solid #ccc;background:#FFF 
url(http://www.jongall.com/images/name.gif) no-repeat right;}
.email_field{color:#818181;padding:4px 23px 4px 4px;width:
140px;border:1px solid #ccc;background:#FFF url(http://www.
jongall.com/images/email.gif) no-repeat right;}.email_field2
{color:#818181;padding:4px 23px 4px 4px;width:240px;border:
1px solid #ccc;background:#FFF url(http://www.jongall.com/
images/email.gif) no-repeat right;}.opt_btn{cursor:pointer
;margin:0;padding:0;width:181px;height:29px;background:url
(http://www.jongall.com/images/optin_btn.jpg) no-repeat top
;border:none;}
</style>

<form>
<div id="optin">
	<div class="optinhead">Killer Headline Goes Here</div>
	<div class="optintext">Simply Enter Your Information 
        Below To Get Instant Access!</div>
	<div class="optinform">
	<div class="txtField"><input type="text" name="name" 
        class="name_field" value="First Name" onFocus=
        "if(this.value == 'First Name'){ this.value = ''; this.style.
        color= '#1a1a1a'; }" onBlur="if(this.value == ''){ this.value
        = 'First Name'; this.style.color= '#818181'; }" />
        <input type="text" name="email" class="email_field" value="Email 
        Address" onFocus="if(this.value == 'Email Address'){ this.
        value = ''; this.style.color= '#1a1a1a'; }" onBlur="if(this.
        value == ''){ this.value = 'Email Address'; this.style.color
        = '#818181'; }" /></div>
	<div class="txtField"><input type="submit" 
        name="submit" value="" class="opt_btn" /></div>
	</div>
    </div>
</form>

Here is the opt-in code that I'd like to integrate into the form above:

HTML Code:

<form method="post" action="http://www.gogvo.com/subscribe.php">
<input type="hidden" name="CampaignCode" value="c02ecc5d27f2" />
<input type="hidden" name="FormId" value="148501" />
<input type="hidden" name="TrackerName" value="Test_Tracking" />
<input type="hidden" name="AffiliateName" value="JonGall" />
<table align="center">
<tr>
<td>First Name:</td><td><input type="text" name="FirstName" /></td>
</tr>
<tr>
<td>Email:</td><td><input type="text" name="Email" /></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" value="Submit" /></td>
</tr>
</table>
<img src="http://www.gogvo.com/show_form.php?id=148501" />
</form>

I'd greatly appreciate any assistance.

Thanks in advance,

JG

Thanks

{{ DiscussionBoard.errors[7803083].message }}

JonGall

11 years ago

Yes Sir! Thanks for responding Brandon. I really appreciate it. I have modified the HTML code. I hope this helps. ~JG~

Originally Posted by Brandon Tanner

^ Yep. And just a FYI... you should format your code properly before you post it here (put each piece of your code on a separate line, use nested div's, whitespace, etc). Like...

HTML Code:

<style>
    #div1 {styles}
    #div2 {styles}
</style>

<div>
    <div>
        <element>
    </div>
</div>

That will make your code a lot more readable, and will greatly increase your chances of someone here helping you out. No one here wants to sort through one giant blob of spaghetti code.

Thanks

{{ DiscussionBoard.errors[7803088].message }}

Michael71 11 years ago

Do you maybe have a link to the form (if online)? Would be easier for me.
- Thanks
- 1 reply
Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu
{{ DiscussionBoard.errors[7803203].message }}
- JonGall 11 years ago
  
  Hi Mike,
  
  Yes, here's the link to the form: http://www.jongall.com/Test/Form2.htm
  
  And just in case it becomes useful, here is the link to the opt-in code:
  http://www.jongall.com/Test/Code.html
  
  Thanks so much for taking a look. I really do appreciate it.
  
  ~JG~
  
  Originally Posted by Michael71
  
  Do you maybe have a link to the form (if online)? Would be easier for me.
  
  Thanks
  
  {{ DiscussionBoard.errors[7803390].message }}
Michael71 11 years ago

Could do it tomorrow, it is 1:22am here (Spain)...
- Thanks
Signature

HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
---
Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu
{{ DiscussionBoard.errors[7803422].message }}
Istvan Horvath 11 years ago

JonGall, stop messing with the font size and keep the fonts of your posts at normal size!
- Thanks
Signature
{{ DiscussionBoard.errors[7803775].message }}

Adding Opt-In Code to Form Template

Trending Topics

Been a while! Any of you Old Timers here?

How much does the rebranding affect CR ?

Are billboards still effective in driving customers?

Boat and Jet Ski Rentals...... Door Hangers Effective?

A Very Strange Internet Problem