Aweber integration advice

by 8 replies
10
Guys, i have a great coder guy but he is unsure how to integrate my aweber form to page correctly and im finding it hard to explain to him to due to language barrier, therefore could some one here advise me how to do this correctly?

I will try explain best possible.

Lets say we have made a fancy design for a form and its now on our web page like this..

So you can click in the boxes provided.

check this image here

Click This

and then we have created the exact form on aweber for name, email and something else for third line....we now have the code from aweber....

but how do we integrate it to the webpage so it works with our form we have made?

i hope this makes sense to some one!

Thanks all!
#programming #advice #aweber #integration
  • If I was going to do it I would build the form as a self standing, relocatable chunk of code.
    Your best bet would be to utilize html5 and css3. You will probably lose older browsers with alignment issues.
    Set your image as the background and layout divs of the proper dimensions for your form fields and submit button.

    That is a very simplified basic answer that hopefully can point you in the right direction.
  • How simple is it do this, with the form/design thats already on my webpage?

    If anyone can help or do this for, please PM me.

    Thanks
    • [1] reply
    • It's more of a design then a programatic issue. It will probably cost 50-100 bucks to build it as a free standing html element. I would do it this way so when you want to do this the next time you have a working framework to use to swap elements in and out.
      Your probably looking at 1-2 hours developer time on it.
  • You need a coder than knows how to merge the form codes together.

    You need the functionality of Aweber's working form, with the design your coder has built. There will be overlaps, so those will need to be removed.
  • In order to use any custom form that you created (outside your autoresponder), it's simply a matter of using the relevant and important parts of the code they generate to make sure your custom form works properly.

    Try to think of the style/design separate from the function of the form.

    So for example; here is some code from Aweber (some older form I had) with all the inline css stripped out. So basically just between the form tags.

    I've Bolded the important parts that you need to apply to your custom form design.
    Note: What's important depends of whether you have tracking, a custom thank you page, etc...

    Code:
    <form method="post" class="af-form-wrapper" accept-charset="iso-8859-1" action="http://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1650417898" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3543655" />
<input type="hidden" name="redirect" value="https://examplesite.com/thank-you/" id="redirect_8fa5653953a0buieUeT4b99ea51ffaf" />
<input type="hidden" name="meta_adtracking" value="Tracking_Value" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1650417898" class="af-form"><div id="af-body-1650417898"  class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-64528936">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-64528936" type="text" name="email" value="" tabindex="500" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" id="af-submit-image-1650417898" type="image" class="image" style="background: none; max-width: 100%;" alt="Submit Form" src="http://aweber.com/images/forms/plain/buttons/grey.png" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
<div id="af-footer-1650417898" class="af-footer"><div class="bodyText"><p>&nbsp;</p></div></div>
</div>
<div style="display: none;">
<img src="http://forms.aweber.com/form/displays.htm?id=jGysDCyM7BycHA==" alt="" /></div>
</form>
    Everything else in there is related to styling.

    So here's an older custom form with the relevant Aweber code applied:

    Code:
    <div id="form">
<form method="post" class="" action="http://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="923837417110" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="srp-prelaunch" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_e7692b6a79578aa40474b72c6b4fa2b4" />
<input type="hidden" name="meta_adtracking" value="SRP_pre-launch" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div class="field-holder"> Email:<br>
<input id="email" onfocus=" if (this.value == 'Enter Your Best Email...') { this.value = ''; }" onblur="if (this.value == '') { this.value='Enter Your Best Email...';} " type="text" class="email" name="email" tabindex="500">
<input name="submit" type="submit" class="submit" value="Notify Me!" tabindex="501">
</div>
<div class="clear"></div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=nEzMHIzsjIwM" alt="" /></div>
</form>
    So as your creating your form code inside of Aweber, just create a bare-bones form with the values you want such as name/email, a custom thank you redirect, tracking.

    Now when you get to the end and they show you the code, grab the bare code for webmasters/developers without the css and use the important parts above and apply to your own custom form design.

    If you have a tough time doing this, PM me the custom html code (in a plain text file) along with Awebers code, and I'll merge it for you.
  • I'm having the same problem. Hope you figure it out and if you do please let me know.
    • [1] reply
    • Taking the code from any autoresponder and using it with your own custom form design is really just a matter of pulling the important parts from the autoresponder service and integrating them into your form code so the form knows what to do when submit is clicked and what information to pass on.

      The vast majority of the html code given to you by an autoresponder service is about styling.
      Only a few lines of code actually deal with the function of the form.

      Aweber I already outlined. GetResponse is way easier and only a couple lines of code.
      • [1] reply
Join the discussion

Next Topics on Trending Feed

  • 10

    Aweber integration advice

    Guys, i have a great coder guy but he is unsure how to integrate my aweber form to page correctly and im finding it hard to explain to him to due to language barrier, therefore could some one here advise me how to do this correctly? I will try explain best possible.