Jump to content

Credit Card Form


jka

Recommended Posts

Any idea on how to make this credit card form at checkout look a bit more small and concise. The form is under the gateway module. This specific attached form is from the PayPal Pro hook module. For example, make the form small and compact and centered on the page.

643861975_ScreenShot2018-11-15at11_59_02PM.thumb.png.0ecdfeb3693148899919098dfc48536f.png

Link to comment
Share on other sites

Please realize that any HTML provided by extensions should strive to be as compatible as possible with any arbitrary skin. That means to not have any aspect about its appearance that would otherwise break its layout in a skin it wasn't expecting. Since that is the case - not knowing how any skin's layout would be structured - third-party HTML must be as plain-vanilla as possible.

The full-width text entry fields are the result of the CSS rules of the Foundation skin. When viewing this form on a hand-held device, it will display the same, except that it will be only as wide as the viewport of the device (Foundation being a "responsive" layout).

However, this does not mean that one cannot edit the third-party HTML to suit. If Foundation is the one and only skin a site will ever use, then certainly one can re-code the HTML to be more conversant with Foundation's responsiveness - such that, at the "large" width, there could be two, three, four, or more form fields per row as desired.

Offline, we can work together on applying the Foundation row/column responsiveness to this form.

Link to comment
Share on other sites

  • 1 month later...

After the customer enters their address info, they choose a payment option and go on to the credit card number entry form. 

Realizing the HTML has to be adaptable to tons of display formats, is there a way to enlarge, or better yet, simply SHOW the form fields in the entry area? I'm not sure it's intuitive to expect people to just click around until they find the (hidden) fields with text instructions just nearby.

Would this kind of formatting contained within the CSS of Foundation or the Stripe module? I've searched and searched but evidently for the wrong strings.

credit card entry form.png

Link to comment
Share on other sites

Look for the file /modules/gateway/name_of_gateway/skin/form.tpl.

What module is the above image taken from?

If Stripe v2.1.1, then the file name is form.php. And, it seems the text entry code is brought in from Stripe itself and 'pasted' into the HTML under javascript control. One would need to examine that javascript to discern what the HTML is that draws the form.

Or, use the browser's Developer Tools to Inspect the form's elements and learn what CSS rules are being applied to these text entry fields.

 

 

Link to comment
Share on other sites

12 hours ago, daveherr said:

Thanks b, and yes, it's Stripe 2.1.1. Good suggestion to go in deep via developer tools. Even if I could just wrap their pasted HTML in a DIV or something, that might be enough  😕

Hi Dave,

If you use CSS attribute selectors you can probably manage without having to add a div or edit the html at all.

If the attributes are generated dynamically you can use * to style any attribute containing a particular string of characters. Usually dynamically generated attributes will have some common characters eg myforminputxyz, inputxyz_myform, thismodinputxyz_name. To target all of those you could use similar to this.

Example any div ID containing inputxyz

div[id*="inputxyz"]  {
    border: 1px solid red;
}

or similar ^ instead of * for any span with a class starting with button_myform eg class='button_myform123'

span[class^="button_myform"] {
    border: 1px solid #f80b03;
}

You can add a custom .css file if you prefer not to hack the original files to safeguard for future updates.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...