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

Front page Support Forums Fuji Theme Support Can't seem to integrate Aweber Web Form into theme properly

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  satori 5 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #51

    owlbobb
    Participant

    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

    #52

    satori
    Member

    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 5 years, 4 months ago by  satori.
    #55

    owlbobb
    Participant

    Hi Andrew,

    I have sent you an email containing the required information.

    Regards,
    Bobby

    #60

    satori
    Member

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.