Tips and Tricks HQ Support Portal › Forums › WP eMember › WP eMember Troubleshooting › eMember – registration page send verification button not aligned-worse on mobile
Tagged: captcha, mobile, responsive
- This topic has 16 replies, 3 voices, and was last updated 6 years, 5 months ago by Mj.
-
AuthorPosts
-
May 31, 2018 at 7:53 pm #14903MjMember
While using eMember, the pre-built registration page “send verification email” button is not aligned with the other objects within the form. All fields seem to be nicely set within the frame/form except for that button. When visiting via desktop the button seems to be aligned to the right of the form field and overlaps the form field and form frame as opposed to center (where it should be in my opinion). The issue is even worse on mobile. On a mobile device (using iphone), the “send verification email” button is so far right that most of the button is outside of the form field/frame that it also causes the page to expand forcing a horizontal scroll option. How can this be adjusted so that the “send verification email” button is centered in the field of the form or at the very least aligned so that it does not overlap outside of the registration form? I have done nothing to alter the pre generated page.
link to page: matthutabarat.com/join-us/registration/
Thank you in advance!
May 31, 2018 at 8:08 pm #77926wzpModeratorI tried to inspect the CSS on the page you posted; but it appears you have some kind of mouse click disablement going on.
June 1, 2018 at 5:51 pm #77927MjMember@wzp You are correct, I will disable right click protection temporarily. Please check again and I will watch for your response so that I may re-enable right click protection.
Thank you.
June 1, 2018 at 8:51 pm #77928wzpModeratorThe “technical reason” is that when you changed the string EMEMBER_REGISTRATION from “Register” to “Send Email Verification” you exceeded the size of the <td> element, that is shared between the form fields and the form button. The “easiest way” to fix the situation is to be a little bit less wordy with the button text.
June 2, 2018 at 2:37 am #77929MjMember@wzp thank you for the prompt response. I will assume that there is no CSS to center this button.
Now after 2 hours of trying to figure out where in the plug in I go to alter the text of the button I am at a loss. I have been through all tabs, checked my CSS, tried to edit the page, etc.etc.I am sure i did alter it to the current text but i cannot figure out how i did that or how to change it back. I have searched the forums and find nothing, also my account says this is my only post although it is not as i have had a response from ivy which i am sure is where i got the info to change the text in the first place.
Could you be so kind as to map it? e.g. emember>settings>forms>
or simply tell me how to change the text?
Thanks again for your help and patience.
June 2, 2018 at 3:36 am #77930wzpModeratorI will assume that there is no CSS to center this button.
The button is already left justified, in the right hand column of a 2 column table. You’d have to perform “custom coding” to get what you want.
I am sure i did alter it to the current text but i cannot figure out how i did that or how to change it back.
Look inside the lang/eng.php file.
June 2, 2018 at 1:13 pm #77931MjMember@wzp Thank you again for the quick response. Found the file, edited, fixed! You sir are a genius!!
June 2, 2018 at 1:19 pm #77932wzpModeratorThanks for the “attaboy.”
June 4, 2018 at 3:45 am #77933adminKeymasterWe have updated the “email confirmation” form to use the new style so it renders better in mobile (and all other devices). I have sent you an update so you can check it out.
June 8, 2018 at 3:03 pm #77934MjMember@wpz @admin I have recently added the CAPTCHA feature to the registration form. I 100% did no modifications as I simply marked the tick box in eMember settings to allow this feature. The same issue is happening as the one I had before with the submit button (which was my fault). The reCAPTCHA box overlaps the table/form on mobile. It is fine on CPU, and in landscape mode on mobile, but in portrait view on mobile and portrait view on tablet, the overlap occurs causing the page to expand. I will once again disable my right click protection temporarily so that you may look into the issue and will watch for your response.
Thank you in advance as your support is amazing!
June 8, 2018 at 4:20 pm #77935wzpModerator@Mj — What kind of theme is the mobile site using? Or are you trying to use “the same theme” on both the desktop and mobile sites? If you are not doing so already, consider using a “responsive theme” on the mobile site; that will adapt the site display to match that of the mobile device.
June 9, 2018 at 12:38 am #77936adminKeymasterJust an FYI: I tested the captcha on mobile devices (for the standard registration form and the email confirmation form). They all work fine.
June 11, 2018 at 2:41 pm #77937MjMemberHello and thank you guys again for being so helpful with amazing response time. I have contacted the Theme creators and they say my theme is absolutely responsive. Everything looks great on mobile except for the CAPTCHA box. I have submitted and support ticket to them so they can see if it is something they can fix. If they can’t I will simply remove the CAPTCHA box and enable admin approval on registration. I will post the result and answers I receive from them in case anyone else has this issue. Once again thank you so much!!
June 12, 2018 at 2:10 am #77938adminKeymasterOn the new version of the eMember plugin, you can do the following theme test to quickly determine if the plugin’s registration form is working as it should on a standard WordPress theme (the ones that come from WordPress):
https://support.tipsandtricks-hq.com/forums/topic/test-to-identy-a-conflicting-theme-or-plugin
June 15, 2018 at 4:00 pm #77939MjMemberThank you @admin
Here is what my theme admin wrote me:
“ Captcha is not generated by the theme and is generated by third party so this being not responsive is not a theme related issue. Also you seem have used tables which does not help responsiveness.
I see that you have used two empty <td> in the last two rows. What you can do is give those two <td> a class and hide those <td> in mobile view using CSS Code. This should help the form look better in mobile view.”
I am reactivating my right click disable as my content needs to be protected.
I will probably just disable the CAPTCHA and use admin verification.
Thanks again for the help and quick responses!
-
AuthorPosts
- You must be logged in to reply to this topic.