Jump to content
jka

Credit Card Form

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

 

 

Share this post


Link to post
Share on other sites

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  😕

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...