Problem with registration form layout
-
Hi, I have a registration form (in Hebrew) on my website that used to look just fine, but is now looking very strange, without me changing anything.
How can I fix that?
On the backend it looks just fine.
Link to the page – https://danitbirth.com/%D7%A6%D7%A8%D7%95-%D7%A7%D7%A9%D7%A8/
Thanks!The blog I need help with is: (visible only to logged in users)
-
Hi there,
I’m sorry to hear that you’re experiencing an issue with your registration form.
I’ve tested this on a test site of mine, and I wasn’t able to replicate it. I suggest deleting the form and then re-inserting it. This might fix the display issue.
If you still find that the issue persists after trying this, please get back in touch with us. We’ll be more than happy to take a closer look and help you resolve the issue.
-
Thanks for the quick reply – I’ve done that many times before contacting you. Tried also creating a new page altogether and still had the same problem. Tried choosing different variation of the forms, all looking fine on the backend but with the same weird layout on the frontend. I would be thankful for a closer look.
-
Can you take screenshots of what you are seeing in the editor window, and what you are seeing on the actual page so that we can compare with what we are seeing on our end? You can upload those to your media library and we can take a look at them there.
https://wordpress.com/support/make-a-screenshot/ -
Did you mean media library on my website? If so, it’s there (but do you have access there…)
I’ve added in the title which is which front/back end wise.
I also added some Spacer blocks to make the front end look a bit more sensible…Thanks for your help!
-
Hey there,
Many thanks for those screenshots.
I am seeing what you’re seeing in the screenshot, however, I can’t immediately see anything wrong – what are you experiencing exactly that seems off between the editor and the live site?
Many thanks
-
The layout isn’t the same. and it used to be!
I want the question with the multiple choice fields to appear one box below the other, and not one next to the other, and the empty field to add their comments at the bottom (above “send”) not to be long and narrow but as it is on the back end – the whole form doesn’t really look like a form (even though I managed to make it look slightly better after I inserted extra spaces). I think it looks much nicer and clearer on the back end.
Thanks -
Thanks for the extra details! I see what you mean now!
It looks like it’s a bug between the CSS for contact forms and RTL languages that’s causing the problem you’re having now. It’ll take some time for our team to fix this bug properly, but since you already have the Premium plan, you can add this block of CSS to your Additional CSS section of the Customizer to fix that up immediately.
.contact-form .grunion-checkbox-multiple-options, .contact-form .grunion-radio-options { display: flex; flex-direction: column; gap: 12px; } .wp-block-jetpack-contact-form input[type="text"], .wp-block-jetpack-contact-form input[type="email"], .wp-block-jetpack-contact-form input[type="tel"], .wp-block-jetpack-contact-form input[type="url"] { width: 100%; }Let us know if you still have trouble and we’ll be happy to help!
-
Thank you so much – way better!
The only thing that is still a bit off is the bottom box, that is still long and narrow, and out of form with the rest of it. -
oh, and actually I think the first 3 boxes (name. email, phone) need to be a bit wider if that’s possible. It’s really tiny font that fits in them
-
Hi there!
Sure, you can adjust the second piece of code to this:
.wp-block-jetpack-contact-form input[type="text"], .wp-block-jetpack-contact-form input[type="email"], .wp-block-jetpack-contact-form input[type="tel"], .wp-block-jetpack-contact-form input[type="url"] { width: 100%; height: 25px; }If you have any more questions let me know.
-
Thank you for all this great help!
Did you also see my one before last comment? I posted two in a row. I’m copying it here:
The only thing that is a bit off now is the bottom box, that is still long and narrow, and out of form with the rest of it.
All the rest is looking great! -
Thanks for clarifying! I do see what you mean, the main message area does look pretty narrow.
If you could add this code in addition to the previously-provided code, it should hopefully solve this:
.wp-block-jetpack-contact-form .wp-block-jetpack .grunion-field-textarea-wrap textarea { width: 100%; } -
That did the trick! Perfect.
Here’s one last issue that maybe you can help me with. When I try to add the WhatsApp Button, the icon and the text on the button itself overlap. This has been like that since I built the site, and I found a way to create a different button, but first I thought it would be good that you know about the problem , and second maybe there’s an easy fix?
I’ve uploaded a screenshot showing this to my Media Library/
Thank you! The form is looking great! -
Can you share a screen shot of that? My initial thought is to find a different WhatsApp logo/option and use a custom button to get the same effect and not rely on CSS changes.
-
As I wrote I’ve already uploaded a screenshot to the Media Library, before sending the question :)
And I did that – I created my own button, but I think it’s not the best job… -
That feature is part of Jetpack and is a known issue: https://github.com/Automattic/jetpack/issues/19861
I’ve added your report to that issue so hopefully the team will get that fixed.
-
Got it.
I’ll stay with the self-created one for now.
Thank you so much for ALL your help!! -
- The topic ‘Problem with registration form layout’ is closed to new replies.
WordPress.com Forums 