Can't seem to integrate Aweber Web Form into theme properly

[owlbobb]

Hi,

What I did:
– created web forrm in Aweber
– used Aweber Web Form Widget in WordPress to integrate the web form

Here’s how it looks like:

View post on imgur.com

I’m not a coder, so I’m not really sure what kind of problem I’m having. Any help?

Thanks,
Bobby

[satori]

Hi Bobby!

First of all, thank you for the purchase!

From your screenshot it looks like it could be a css styling problem. There are two ways in which I could fix this:
1. If you provide the URL of your website, I will be able to give you a more definitive answer and write a code snippet to fix this.
2. [This option will probably take less time] If you are able to also grant me access to the website admin area (sending the login data to support@satoristudio.net), I can fix the issue on the live website.

Let me know!

Best,
Andrew.

• This reply was modified 12 years, 4 months ago by satori.

[owlbobb]

Hi Andrew,

I have sent you an email containing the required information.

Regards,
Bobby

[satori]

Hi Bobby!

I’ve fixed the form, it was indeed a css styling issue. In particular, each premium WordPress theme has some sort of styling rules in place for all web page elements, including sidebar widgets; these rules cover appearance styling for most of widely used plugins, yet since there are more than twenty thousand plugins, most of which have their own stylesheets as well, it is virtually impossible to incorporate all cases at once. On the bright side, this is why premium themes, such as the ones sold on ThemeForest, have support included in the package ;)

In order to implement the fix, I’ve added several lines of code to the bottom of the main “style.css” file found in the theme directory (wp-content/themes/Fuji):

(1) #sidebar .widget-sidebar .af-form { width: 100%; padding: 0; }
(2) #sidebar .widget-sidebar .af-form div { background-color: transparent; }
(3) .AWeberWebformPlugin_printWidget h3 { display: none; }
(4) #sidebar .af-form .buttonContainer input.submit { height: 26px; }
(5) #sidebar .AWeberWebformPlugin_printWidget form .af-body { padding: 0; }
(6) #sidebar .AWeberWebformPlugin_printWidget form .af-textWrap { padding-left: 0; }
(7) #sidebar .AWeberWebformPlugin_printWidget form .af-clear { padding: 0; }

The first line fixes the width of the form itself in the context of the widget, which has been set to a pre-defined pixel value somewhere in the settings of the Aweber form, which I do not have access to. The second line removes the white background defined in the default theme styling in order to expose the wooden textured background of the form. Line (3) hides the widget heading element to get rid of the ugly rectangle on top, since the widget provided by the Aweber plugin does not envisage any heading for some reason. Line (4) fixes the “submit” button height, which was not set in the plugin stylesheet, and finally lines (5) – (7) fix the positioning of the inner elements of the form (plugin styling tells them to behave differently, yet I figured this would look better).

Regarding your last question – as I mentioned before, it is difficult to predict the visual behaviour of every single plugin out there; most of the popular ones are covered by the inherent theme styling, yet if something like this (or any other problem) pops up in the future, do not hesitate to approach me, I’ll do my best to fix it.

Please tell me if the form now looks as you’d want it to look – or something else should be adjusted.

Best,
Andrew.

[Author]

Posts