[Resolved] Hidden form element causes form display format problem

[guyhanchet]

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&#8221; 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&#8221; border=”0″ name=”submit” title=”PayPal – The safer, easier way to pay online!” alt=”Donate with PayPal button” />

</form>

[David]

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;
}

[guyhanchet]

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.

[David]

Glad to be of help. Sorry the first class was me copying and pasting the wrong markup. Delete that altogether.

[guyhanchet]

Cool everyone makes typos, and it wasn’t hard to see what you meant. Thanks for confirming.

[David]

You’re welcome 🙂

[Author]

Posts