Solved

Problem with Pro Forms Widget

  • 22 August 2021
  • 15 replies
  • 119 views

Userlevel 2
Badge +1

Hi All,

I am having problems with the Pro-Forms Widget. Instead of the compact basic layout in the instruction video, I get this: -

I can edit it but then have problems getting it to display correctly in mobile and tablet view. I think what is shown in the screenshot is my first attempt at creating a form using a plugin two years ago. I have checked my word press files, and there are no residual deleted plugin files. I have regenerated files and data in Elementor; my sever cache is cleared every two hours and WordPress cache every ten hours. So now your suggestions will be gratefully received!  

icon

Best answer by Philip Noye 22 August 2021, 19:37

View original

15 replies

Userlevel 5
Badge +1

Hi:

For the mobile views, have you checked your padding (left + right) under the Advanced tab?  I notice that when viewing the form on tablet/phone there is a lot of padding that causes the form to look a little wonky.  Maybe checking those settings will help?  Otherwise the form looks good!!

Userlevel 2
Badge +1

Thank you for your response Tiffany yes I have tried the mobile setting, the form displays very narrow and nothing I do corrects it it just stays the same.  

Userlevel 6
Badge +3

can u please share link to me

Userlevel 5
Badge +1

Thank you for your response Tiffany yes I have tried the mobile setting, the form displays very narrow and nothing I do corrects it it just stays the same.  

Sorry if I am asking questions you have already checked.  It is weird, because I’m seeing heavy padding for your mobile devices.  If this is not coming from the Elementor settings, then perhaps there is CSS entered into the theme or elsewhere.  You are not seeing this padding in the Advanced tab when in the mobile editing view (for the form itself, or the container it is in)?

This is showing around the whole form when viewing on a phone:

.elementor-15 .elementor-element.elementor-element-0541b0e > .elementor-widget-container {
    padding: 52px 52px 52px 52px;}

This shows on the left side of the form on a tablet, pushing the form fields towards the right:

.elementor-26372 .elementor-element.elementor-element-4cc75f4c > .elementor-widget-container {
    padding: 3px 3px 3px 82px;}

Userlevel 2
Badge +1

I thing the padding is coming from the original form design and I cannot find where that design originates, I have spent the last two days tiring to find it. the forms are the only thing that give me problems in all mobile devices. I will check again but all padding and margins have been set to “0”.  

Userlevel 5
Badge +1

What was the original form design?  Something other than Elementor?  The padding causing the issues I see are being applied to Elementor elements (form fields, etc).  So I figured that meant there was direct styling being applied.

One thing to keep in mind, if you don’t already take this into account, you have to be in Mobile view (when editing) in order to see the padding being applied to each element.  So click the mobile editing button at the bottom and choose tablet/phone at the top. Then view your elements on each device to see the padding that might be applied (since padding can be applied separately to elements when viewed on Desktop, Tablet, Phone).

Hope this all makes sense, and forgive me if you know to already do this, but sometimes it is a step that is missed and I want to cover the bases.  Attaching a screenshot from my own site I am working on today to show what I mean.

Userlevel 2
Badge +1

I have been using Elementor for eighteen months Tiffany, so do how know edit in mobile view. but you are forgiven. 

The problem is the basic form itself, but I have failed to find where it is coming from. When I started building the site I had a WP Forms plugin and the design of the form I think comes from there. But I deleted the plugin a year ago. I have been through the WordPress back end files and there are no redundant WP Forms files, But this form design must be there somewhere! I need to find and remove it to solve the problem, but I do not know where else to look! 

 

Userlevel 2
Badge +1

Tiffany,

I have just realised it could be in the data base, So not Knowing anything about or wanting to play in the data base. So tomorrow  I am going to delete the forms, uninstall and delete pro, and clean the data base. Then reinstall pro and see if it solves the problem. I will let you know.

Userlevel 6
Badge +3

Yup, use WP Optimize (free) to clean the database - and then remove the plugin after that.

Userlevel 5
Badge +1

Tiffany,

I have just realised it could be in the data base, So not Knowing anything about or wanting to play in the data base. So tomorrow  I am going to delete the forms, uninstall and delete pro, and clean the data base. Then reinstall pro and see if it solves the problem. I will let you know.


Best of luck handling things tomorrow & by all means let us know how it goes. 

I do find it weird if custom CSS was applied to a WPForm and its elements, that those same settings would carry over into an Elementor form since they don’t share the same CSS classes.  Plus some of the CSS is being applied to the container and not just the form.  That is what is  so odd.

Under Advanced for your form & its container - check and see if any CSS class or ID is assigned.  If you do see something there, delete it. That might be driving some of the same styles being applied to the Elementor form that you remember from the WPForm.

Hope we can find a solution for you quickly!  If you don’t have luck deleting/recreating the form, and do not mind DM’ing me some login credentials, I am happy to take a look tomorrow and see if I can figure out what is happening.

Userlevel 2
Badge +1

Well my attempt at cleaning the data base failed:sob:! However on running database check in C panel I found these entries: - 

babeand2_WPZCI.nth_wpforms_entries] OK    
[babeand2_WPZCI.nth_wpforms_entry_fields] OK    
[babeand2_WPZCI.nth_wpforms_entry_meta] OK    
[babeand2_WPZCI.nth_wpforms_tasks_meta] OK

Which at least confirms where and what the problems are, but as running a repair  in C Panel has not cleared them either, I will hand the problem over to my hosting support to sort out the data base. I will let you know the result when they have finished. If that fails to clear the problem I will take up your offer of taking a look Tiffany. 

Userlevel 6
Badge +3

#widget_issue

Userlevel 5
Badge +1

Well my attempt at cleaning the data base failed:sob:! However on running database check in C panel I found these entries: - 

I will let you know the result when they have finished. If that fails to clear the problem I will take up your offer of taking a look Tiffany. 

Hoping for the best in fixing your DB. Keep us posted, My offer stands if you still need assistance later!

Userlevel 2
Badge +1

Ok it is finally resolved !! I ended up sorting out the data base myself, WP Form had left more residual items than the four items I originally found. There were more in two of the tables, so I ended up checking all the table to make sure they were clean. Thank you all for your help and support it is appreciated! :relaxed:

Userlevel 5
Badge +1

Yay, glad to hear everything worked out in the end!  Go ahead and mark your DB post as “Best Answer”...sounds like it was what finally fixed the issue and might help someone else who comes across a similar problem.

All the best!

Reply