Space at top of form
-
Hi
Please could you help me with a spacing issue I have at the top of my forms – There seems to be a large white space that I can’t get rid of, see this link – scroll down to the refer a friend form bottom right:
http://dev.cantellotayler.com/temp-jobs/
It happens on all the forms I have on the site. Is it because that’s where the form title should be? Could you provide me with any coding to adjust the pace or let me know where to add the title if it’s that?Thanks
The page I need help with: [log in to see the link]
-
Greetings @angeadmin,
Is your issue still present on your form? Have you tried to add a margin-top with 0 values for your form?
Regards,
LehelHi,
yes i have put 0 for form margin and padding in contact style dashboard. There is still about a 80px space – see on all forms:http://dev.cantellotayler.com/temp-jobs/
http://dev.cantellotayler.com/submit-a-cv/
I think it may be where the form title should be but not sure where I add form title? Or code to remove it completely?
A 🙂
I also have a problem with the radio buttons on this form – that buttons go beneath the work rather than next to it. How can I adjust this?
Hey @angeadmin,
The distance between your form and the title has nothing to do with the styling of the form. It comes from the bottom margin of the title above the form. I see you are using a page builder, you should define a smaller bottom margin or 0 in your visual builder.
Example: https://www.screencast.com/t/hcMjMxZoFO5z
It is the same result for “the submit a cv” page. That distance is part of the block which is above your form. So you need to edit the block above the form, and set a bottom margin to you block.
Suggestion: As I see you are using divi theme, which has a powerful page builder, so you must have a Design tab for your block, and in that tab search for a spacing settings part as in this image: https://cdn.elegantthemes.com/documentation/wp-content/uploads/2017/05/design-options.jpg
As for the radio buttons, please use the following instruction to fix your problem:
Step 1: Go to your custom style and select the radio button panel.
Step 2: Add a 10px value for your width.
Step 3: Add a 16px value for the height.
Step 4: Save your style and check your form.Example: https://www.screencast.com/t/BopvUpNdp3L
If you enjoy our work, please feel free to give us a five star rating or consider donating.
Regards,
Lehel- This reply was modified 6 years, 11 months ago by Lehel Szilard Marosi.
Hi
I have changed all the margins in the various blocks and the form still doesn’t move up – look now – I’ve added a button to show that it butts up to the text above but the form won’t if I remove the button.
http://dev.cantellotayler.com/submit-a-cv/Also, for the radio buttons – I don’t have an option in my style to change the radio buttons – there is no button in between the submit button and error messages as per your screenshot. I can’t upload a screenshot to show you.
A 🙂
When I add a new style I can see all the options, when I save that style, the radio buttons and other options disappear from the dashboard.
A 🙁Hey @angeadmin,
Have you tried updating the Contact Form 7 Style plugin to the latest version? We have modified a bit the part which decides what kind of options are available for you, depending on your form.
Yes, I have updated to to the latest but it’s still not showing the radio button option.
Also, for the space issue above the form, I have noticed that the space only appears in Google Chrome, so it’s a browser problem. Not sure if anything can be done about this?A 🙂
Hello @angeadmin,
We couldn’t reproduce the problem with the radio button not showing. Also tried to load the page both with Firefox and Chrome and it looks the same. I am using the latest version of both browsers, Windows 10 64bits.
HI
can you look at it now – the style was not attributed to the form you were viewing. It is now. I can’t attach a screengrab of the style dashboard, but the radio button option does not show up so I don’t have the option to change the settings. I am using the latest version of the plugin. When I open the the form style up I can see all the options including radio button and check button are there and then they disappear.
Should I uninstall and reinstall the plugin to see if that makes a difference? I don’t understand why I don’t have the option the edit the radio buttons?A 🙂
As I can see the only difference between the style used before and now are the radio buttons.
Maybe the space top of your form appears because of the edit style button, when you are logged in. Have you tried to check the page when you are logged out?
The current setup as I see:
- This reply was modified 6 years, 11 months ago by Lehel Szilard Marosi.
Do you have multiple Contact form 7 forms checked for this styling?
Do you have this preview selector in your custom style settings?
- This reply was modified 6 years, 11 months ago by Lehel Szilard Marosi.
I think I have found the issue for the radio buttons. Please un-check one of your forms and leave only the form which is on your submit a CV page. Then add the settings that I have suggested before with the width: 10px and height: 16px . When you are done you can add the other form back as well. Please don’t forget to update your setup after un-checking the other form.
Hey there,
brilliant – that worked on both counts – thanks so much!!!
Space above form disappears when I logout.
Radio button options come up when just the form using the radio button is ticked.Brilliant, thank you again,
A 🙂
Hey there,
Glad that it worked, and thank you for the detailed description and the feedback.
- The topic ‘Space at top of form’ is closed to new replies.