Home/ Questions/Q 7955281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T03:40:46+00:00

I’m trying to create a text widget that includes an entry form on top

  • 0

I’m trying to create a text widget that includes an entry form on top of a background image within a responsive theme that is using Twitter Bootstrap 2 for it’s framework. I’m trying to positon the entry button and contact from correctly on the image. Right now it’s in the middle, but I’m trying to move it down and to the left. Here is the code that I’m using for the widget. Can someone please help me figure out how what CSS to add inline to move the box and the button? (Then I can go in and tweak them, I just need to figure out what I need to add to do it.) Thanks!

<form style="-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center; padding: 25% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" <input type="text" style="width:200px;height:20px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
    </p>
    <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input type="submit" value="Subscribe" />
</form>

I’ve changed a bit of the code since I first posted the question. 

<form style="-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center;
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <p>
        <input type="text" style="width:170px;height:18px;margin-bottom:-110px;margin-left:-125px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
    </p>
    <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input type="submit"  style="margin-bottom:-134px;margin-left:-220px;" value="Subscribe" />
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I assume you meant to the bottom left corner. If so please use this:

    <form style="-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;padding: 3px;text-align:     center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg)      no-repeat center;
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
    <input type="text" style="width:170px;height:18px;float:left;margin-top:28%;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
</p>
<input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input type="submit"  style="float:left;margin-top:28%;" value="Subscribe" />
    • 0