How To Insert Autoresponder Code in WP?

4 replies
  • WEB DESIGN
  • |
Hi guys, I am trying to insert a webform into my WP post but everytime I command to centralise it, it would default back to align left. How should I change the code to allow it to centralise? Here is the code:

<style type="text/css">
<!--
#webFrmID { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 12px; color: #666;}
#webFrmID .cntBox { position: relative; left: 50%; width: auto; float: left; clear: both; text-align: left; margin: 5px 0 12px 0; }
#webFrmID .cntBox .box { position: relative; left: -50%; float: left; padding: 0; }
#webFrmID .chikLet { margin: 0 0 5px 0; padding: 0; height: 24px; }
#webFrmID .chikLet li, .chikLet li span { background: url(http://www.getresponse.com/images/co...r_chicklet.png) left top no-repeat; display: block; height: 24px; }
#webFrmID .chikLet li { margin: 0; padding: 0 0 0 24px; float: left; line-height: 24px; }
#webFrmID .chikLet li span { background-position: right bottom; padding: 0 8px 0 4px; float: left; }
#webFrmID .clearer { width: 100%; height: 0.1px; font-size: 0.1px; clear: both; line-height: 0.1px; }
-->
</style>
<div id="webFrmID">
<form accept-charset="utf-8" action="Request Confirmation - email marketing- GetResponse" style="width: 241px; margin: 10px;"><input type="hidden" name="custom_http_referer" id="custom_http_referer" value=""/>
<div style="width: 241px; font-family: tahoma;">
<div style="height: 19px; background-image: url(http://www.getresponse.com/images/co.../brown_top.png); background-repeat: no-repeat;"></div>
<div style="background-image: url(http://www.getresponse.com/images/co...own_middle.png); background-repeat: repeat-y; padding: 0 9px 0 9px;">
<div id="webform_title" style="line-height:21px; color: #0240A7; font-size: 20px; padding-left: 10px;">&nbsp;</div>
<div style="font-size: 12px; color: #5A5A42; background-color: #E2DEC1; border: 1px solid #B1AF98; padding: 20px 13px 34px 7px; margin: 12px 0 12px 0;">
<ul id="fields" style="list-style: none; padding: 0; margin: 0;">
<li id="subscriber_name-field" style="list-style: inherit; background: none; float: none; height: 20px; width: 181px; padding: 0; margin-bottom: 10px; margin-left: 20px;">
<label style="float: left;" for="subscriber_name">Name</label>
<input id="subscriber_name" name="subscriber_name" value="" type="text" style=" float: right;width: 120px; border: 1px solid #AAAAB6;"/>
<div style="clear: both;"></div>
</li>
<li id="subscriber_email-field" style="list-style: inherit; background: none; float: none; height: 20px; width: 181px; padding: 0; margin-bottom: 10px; margin-left: 20px;">
<label style="float: left;" for="subscriber_email">Email</label>
<input id="subscriber_email" name="subscriber_email" value="" type="text" style=" float: right;width: 120px; border: 1px solid #AAAAB6;"/>
<div style="clear: both;"></div>
</li>
</ul>
</div>

<input type="hidden" name="confirmation_url" id="confirmation_url" value=""/>
<input type="hidden" name="error_url" id="error_url" value=""/>
<input type="hidden" name="campaign_name" id="campaign_name" value="emarketingchannel"/>
<input type="hidden" name="custom_ref" id="custom_ref" value="EMC"/>
<div style="padding-bottom: 3px; padding-top: 20px; text-align: center;">
<input id="webform_submit" style="cursor: hand; font-size: 14px; font-weight: bold; color: #FFFFFF; background: url(http://www.getresponse.com/images/co...nge_button.png) 0 0 no-repeat; border: 0; width: 150px; height: 25px;" type="submit" value="Subscribe"/>
</div>
<div style="text-align: center; font-size: 12px;">
<div style="color: #0000ff; margin-top: 10px;width: 100%; clear: both;">GetResponse <a href="http://www.getresponse.com/">Email Marketing</a></div>
<div class="clearer"></div>
</div>
</div>
<div style="height: 9px; background-image: url(http://www.getresponse.com/images/co...own_bottom.png); background-repeat: no-repeat;"></div>
</div>
</form>
</div><script type="text/javascript">var el=document.getElementById("custom_http_referer"); if(el != null){el.value = document.location};</script>
#autoresponder #code #insert
  • Profile picture of the author Deadly Designs
    <center> after the end style tag and </center> at the end of all the code?
    {{ DiscussionBoard.errors[2431812].message }}
  • Profile picture of the author swiminsoda
    I tried that exactly 3 times. Upon refrehsing the 1st time, the web form appears to center. But after that I would check the code again but the <center> & </center> disappears by itself and the web form it just defaults to the left.
    {{ DiscussionBoard.errors[2431818].message }}
  • Profile picture of the author csmcmanus
    Your code for the plug in seems to be right, it may be a conflict of stylesheets.
    check the css that is running your template. Look for a reset of your text alignment on either the div that you are trying to contain the form into, or in the top hierarchy of your page structure of your css file.

    The reason I suggest this check is because you are declaring where your want certain elements in the above code, however it keeps wanting to go to the left. When you have conflicting styles, the first one listed becomes the one that passes its attributes down. AND often times you will have instances where your <h1> is gonna clash with the themes <h1>

    Hope this helps. Do let us know the progress
    {{ DiscussionBoard.errors[2431890].message }}
  • Profile picture of the author swiminsoda
    It was in the rtl.css file under themes - editor. I changed to center in this part of the code right on top of the page where you said it would be and the 'center' tags I insert does not disappear anymore.

    /* Based on Arabic (RTL) version of Xaxa theme */

    .narrowcolumn, .alignleft, .widecolumn .smallattachment { float: right; }
    .alignright, #commentform #submit { float: left; }

    #page, .post, #wp-calendar #prev a { text-align: center; }

    Brilliant advise csmcmanus!
    {{ DiscussionBoard.errors[2433642].message }}

Trending Topics