How to I create an email signup form on a landing page?

Community Forums Forums Design Tips and Tricks How to I create an email signup form on a landing page?

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Bill Murray 1 year, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #41948

    laura
    Participant
    Post count: 69

    Hi there

    I have embedded an Aweber email signup form on my landing page (http://www.momgoesonline.com/about/), and would like to modify the design of the form to match my website.

    Ideally, I would like it to look the same as the form I created at the end of my posts (http://www.momgoesonline.com/hello-world/). This form was designed in style.css, and linked to an aweber form using the Genesis Extended ENews plugin.

    However, I can’t use this approach on the landing page, as the email signup forms are not in a widget area, but they are embedded in the copy.

    Could anyone tell me how I can get a email signup form that looks like the one at the end of my posts, in the copy of a landing page?

    Thank you so much
    Laura

    #41957

    Bill Murray
    Participant
    Post count: 572

    Want the easy way or the harder but more versatile way?

    Easy: Just style what you have with CSS. It has classes and ID’s to make that possible. Firebug is your friend. Give him a hug.

    Harder but more versatile: 1) Add a new widget area and 2) change your landing page template to put this widget area somewhere. Putting it at the start or end of content is easier; putting it in the middle is much harder. You can fake putting it in the middle by creating multiple widget areas, putting your signup form in the 1st, and putting a widget that would display additional content (like a text widget) in the second. That makes it look like your form is in the middle of content, when it is really at the end of what WP considers post/page content.

    The second method requires you to master a few skills involving PHP, and you run the risk of breaking your site with even a minor typo.

    You’ll have to choose the method best suited to the time/effort you want to devote to sorting it out.


    Web: http://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #41961

    laura
    Participant
    Post count: 69

    Hi Bill

    I’ll take the easy way :-)

    So I looked in Firebug – the classes I see are Aweber classes (eg af-form and things like that).  Can I call these from the style.css of my theme, and style them in there?

    Do you have an example of a website who has done that?  If I see an example, I can look at what they did through Firebug, and try to copy it.

    THank you for all your advice – I really appreciate it!

    Laura

    #42022

    Bill Murray
    Participant
    Post count: 572

    Yes, you can style them there. There are classes ( .someclass ) and IDs ( #someID ). If you look at Firebug, you’ll see your form has an ID of #af-form-574040688. An ID is unique to a page.

    That already has some styling from your from provider. In your child theme’s style sheet, you’d just restyle only what you want to change. If you want to change the background of the entire form and make it a little wider, you’d do this:

    #af-form-574040688 { background: #ccc; width: 60%; } /* you put your color there */

    Sometimes, because of the order of loading style sheets, you have to make sure that your declaration is the one that’s followed, so you put !important on a declaration you want to override:

    #af-form-574040688 { background: #ccc !important; width: 60%; }

    You record your CSS for each property that you want to change or add (you don’t need to repeat what’s OK), which you discover in Firebug. Also, in case you’re not aware, you experiment in FIrebug. In other words, you add your new styling in Firebug to test whether that’s what you want. When you’re satisfied with a declaration, you record that in your stylesheet.

    As for an example of a styled form, I do have one. It’s your own website. Don’t get hung up on Aweber class names or ID’s. The names are irrelevant. It’s just CSS and you are no more or less restricted because it is an Aweber form. The only subtle exception to that (and you won’t know about this until you dive in) is whether Aweber has provided an ID or class name for every place you want to style uniquely. They probably have, but that may not be true of every situation where you try to style output from a third party.

    Good luck.


    Web: http://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #42130

    laura
    Participant
    Post count: 69

    Hi Bill

    Thank you so much for pointing me in the right direction!!! You’re explanation helped me understand the principle, and I was able to style the form :-)

    I assume for you it’s a piece of cake, but for me it’s quite an achievement, and I couldn’t have done it without your help.  So thank you very much!!!

    The only thing I couldn’t figure out was how to display the box in which you enter your email, and the submit button on one line.  I know the command is display: inline-block (I used in on the hello bar I created – http://www.momgoesonline/hello-world).  But I tried it with what I saw in Firebug (af-body), as well as with a bunch of other things I could think of (like p, input, text-area), but none of them worked.

    Do you have a suggestion I could try?

    Thank you so much

    Laura

    #42208

    Bill Murray
    Participant
    Post count: 572

    Congrats on your progress, and you’re welcome.

    Here are some general tips on fitting on 1 line: 1) check the width of your form, the width of your text input area, and the width of your button. If the text input area + the button width are greater than the width of your form, one line isn’t going to work until you change something. 2) Once you get the widths right, an easy solution is often to use floats (such as float the text input left and float the button right). With respect to your guess on inline-block, it’s always a good idea to hover over an element (and sometimes that can mean its parent) using Firebug to see its width. If it’s too wide, your simple change won’t work.

    With that in mind, you need to make these CSS changes:

    /* given the way the form is already set up, this is the easiest method for 1 line */
    #af-form-574040688 .af-standards .af-element {
    float: left;
    padding-top: 0;
    padding-bottom: 0;
    }

    /* this change is to adjust the height of the text input so it matches the height of the button */
    .af-body input.text {
    padding: 5px !important;
    }

    Note that Aweber is already outputting an important declaration for .af-body input.text, so I can’t say for sure that will work, but it’s a good guess.

    Good luck.


    Web: http://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

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

You must be logged in to reply to this topic.