Archived topic
Hidden form element causes form display format problem
5 replies · Started by guyhanchet on April 10, 2019
The form code that PayPal gives me to access a hosted button has two hidden input fields. When I insert it in a page it results in extra <br> elements and lots of white space. I think it is Generate Press that inserts the <br> elements but it might be WordPress itself.
How can I suppress the extra space, especially compared to the Paypal Donation plugin result that looks good but does not allow me to use a button hosted at PayPal. The button behaves as expected so this is not a mission critical problem, but it bugs me.
What can I do to correct this? I do not want to get involved with the complexity of WooCommerce just to fix this cosmetic problem.
Here's a test version of the page. https://forourgrandchildren.ca/test-page/
And here is the code I inserted (with the buttonid removed).
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick" border="0"/>
<input type="hidden" name="hosted_button_id" value="xxxxxxxxxxx" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
</form>
Hi there,
GP won't insert things like <br> tags it will be either WP or they are in the markup. To remove them is quite simple with this CSS:
input + br {
display: none;
}It removes any <br> tags that come after an input field.
To make it specific i would edit your first line of the code to include a custom class like so:
<form action="https://www.paypal.com/cgi-bin/webscr" class="paypal-form" method="post" target="_top">
Then you can target that form specifically, in case other forms need the BR:
.paypal-form input + br {
display: none;
}I checked with another theme and behaviour was still the same so it must be WP not GeneratePress. Your solution worked perfectly, although I wonder why you added class="paypal" and also "class="paypal-form".
Thanks.
Glad to be of help. Sorry the first class was me copying and pasting the wrong markup. Delete that altogether.
Cool everyone makes typos, and it wasn't hard to see what you meant. Thanks for confirming.
You're welcome :)
