Basic help - inserting a form into a wordpress post with formatting problems

by jt47000

Posted: 10 years ago 8 replies

WEB DESIGN

Hi guys,

I'm sitting at starbucks working on my bike website and I've hit a major wall to say the least.

My bike site reviews beach cruisers and I do one per post. Every post page has a bike picture at the very top and left justified so the text flows around it.

Here's my issue:

I'd like to put an amazon buy button right below it but it just will not format correctly.

Here's the form code:

<form method="GET" action="http://www.amazon.com/gp/aws/cart/add.html">
<input type="hidden" name="AssociateTag" value="guiXXXXX"/>
<input type="hidden" name="SubscriptionId" value="XXXXXXXXXXXXXXXX"/>
<input type="hidden" name="ASIN.1" value="XXXXXXXXXX"/>
<input type="hidden" name="Quantity.1" value="1"/>
<input type="image" name="add" value="Buy from Amazon.com" border="0" alt="Buy from Amazon.com" src="http://images.amazon.com/images/G/01/associates/add-to-cart.gif">
</form>

If I put the code right after the picture coding, it pops up to the right of the picture. If I place it within the post somewhere else, this buy button literally has 7-10 lines before it (before the last paragraph) creating a big ugly white space.

I'd like to put this add to cart picture/form/link right below the picture of the bike on the main page. Anyone know of a way?

Here's an example...

"Ladies Beach Cruiser Bicycle Rover GX Review"

Notice the big white empty space above the buy button, notice how in the coding its right after the big picture but appears to the right of it. I also put the form within the bike pictures html and still doesnt work.

This might be really basic, for that I apologize, I'm in really desperate need of help

Thanks and any help would be appreciated

J

#basic #form #formatting #inserting #post #problems #wordpress

dconjar 10 years ago

One way to fix it is to clear your floats after the image and add a negative margin-bottom to the form element. It's not ideal though. Just give me a minute or two to find a better way...
- Thanks
- 1 reply
Signature
I build websites and web apps.
{{ DiscussionBoard.errors[6382546].message }}
- jt47000 10 years ago
  
  One way to fix it is to clear your floats after the image and add a negative margin-bottom to the form element.
  
  dconjar thank you for helping me. I'm a little bit confused by what your suggesting tho. I have very limited html, css, php programming skills, is that a hard thing to do?
  
  Thanks buddy, I'll wait and check back
  
  Thanks
  
  {{ DiscussionBoard.errors[6382614].message }}
dconjar 10 years ago

You can fix it by adding this code above the <form> element:

<div style="clear: both;"></div>

And this code within the <form> element:

style="height: 40px; display: block;"

And remove the <p> and <br> tags within the form, and you should be good to go.

You may also want to add a negative margin-bottom to the <form> style. There's a lot of whitespace within the image, so a negative margin-bottom will position the form on top of the bottom of the image.
- [ 1 ] Thanks
- 1 reply
Signature
I build websites and web apps.
{{ DiscussionBoard.errors[6382624].message }}
- jt47000 10 years ago
  
  thanks buddy!
  
  I'm gonna mess around with it right now,
  
  I'll let you know how it goes,
  
  Thx again
  
  Thanks
  
  {{ DiscussionBoard.errors[6382644].message }}
dconjar 10 years ago

So what it would basically look like is this:

<div style="clear: both"></div>
<form style="height: 40px; display: block; margin-bottom: -10px" method="GET" ...

And just remove all those <p> and <br> tags from the form.

The clear: both clears your floats, which basically means that the image's left-float (the thing that positions the image to the left of whatever else is there) ceases to exist. That allows what comes after the image to move down below it, rather than beside it.

Let me know if you have any questions about any of the other stuff.
- Thanks
- 1 reply
Signature
I build websites and web apps.
{{ DiscussionBoard.errors[6382645].message }}
- jt47000 10 years ago
  
  One more question for ya if you don't mind,
  
  Is it possible to make the text wrap around both the bike image and the form?
  
  I'm totally going to use the exact coding that you gave me for the bottom
  
  Ideally for the top, I'd like to have the bike image with the buy now/ add to cart button just below with text wrapping around the two.
  
  You helped me out huge already dconjar
  
  Thanks again for taking the time to help me
  
  Thanks
  
  {{ DiscussionBoard.errors[6382749].message }}

dconjar

10 years ago

Yep, you just need to wrap the image and the form up in one div and float it to the left.

1). First, create a new div that floats to the left. Insert this code right above the <a> tag that contains the bike image:

<div style="float: left;">

2). And close that div by adding this right after the end </form> tag:

</div>

3). The <img /> tag with the bike picture is still set to float to the left. Since it's now in a div that floats to the left, you'll want to remove that float using an inline style:

<img class="alignleft size-full wp-image-71" style="float: none;" title=" ...

4). You should probably center- or right-align the "buy from amazon" button. Center looks better IMO, but right is arguably better for usability. And you can use the bike as a subtle directional cue:

<form style="text-align: right; display: block; margin-top: -49px;" method="GET" ...

Note that I added a negative margin-top to move the CTA button closer to the image.

5). Finally, you need to remove the float from the "buy from amazon" button for this to work:

<input style="float: none;" type="image" name="add" value="Buy from Amazon.com" img="" class="alignleft border=" 0"="" alt="Buy from Amazon.com" ...

That should do it.