Call To Action Banner Sign-Up Form in MailPoet

[anewcreation]

Hi Everyone,

I've looked around the internet but haven't been able to figure this one out. I would like make a sign-up form in the call to action banner with two fields side by side. The owner of the website is already set-up using MailPoet. I tried to generate a form in MailPoet on my testing site with the two fields side by side, but it only seems to allow me to have the fields stacked on top of each other, like the example below:

I would like to set-up the call to action banner like the red banner on this site: http://adamrosante.com/

Would anyone happen to know how to make a sign-up form in MailPoet with side by side fields like the site above? And if I am able to generate code that makes this sign-up form, will it be ok to just place the code in the call to action widget area? Or is there a better way to do this?

Thanks so much,

Jeanne : )

[Christoph]

Hi Jeanne,

this is most likely done by changing the css of a regular "stacked" sign up form.
Might be something simply like changing display: block to display: inline-block and adjusting margins / paddings but I can't say for sure without seeing a MailPoet form.

.If have no idea what call to action widget area you are talking about but if the name is any indication, that should be what it is for.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[anewcreation]

.Hi Christoph,

You were absolutely right. I added the following code below to the style.css file to include (inline-block) and they lined up! Thank you.

widget_wysija .wysija-submit, .widget_wysija .wysija-paragraph {display: inline-block; height: 55}

I'm having some other issues and I tried to figure it out for about 4 hours with no luck, and now I am out of ideas. I"m trying to put it together on my testing site, http://www.creativewordpressdesigns.com, and then after I figure it out, I'll create it on a real site.

I want my banner layout to look like the following banner layout:

This is how my banner looks:

I tried to move the name, email, and submit button over to the right, but nothing was working. I tired "float: right, That moved the submit button over, but for some reason, it kept the email and name fields in the same location but just moved them to the top of the banner, instead of to the right.

Also, along with not being able to move those three items over to the right, the items don't seem to be showing up correctly on a phone. Here is what it looks like on my iphone 6.

You had mentioned that you were not sure what call to action area I was talking about. In the widget section, where you can place featured items on the home page, or place items in the footer and so on, there is a call to action slot where you can place a text box and code on the executive pro theme. Here is screenshot of this area so you know what I'm referring to:

The form code is created in MailPoet, I then copied the html and placed it in the call to action widget area. Then I added some styles to the style.css file:

widget_wysija .wysija-submit, .widget_wysija .wysija-paragraph {display: inline-block; height: 55}
.widget_wysija input[name="wysija[user][email]"] font-size: 9px; width: 170px; height: 55px}
.widget_wysija input[name="wysija[user][firstname]"] {font-size: 9px; width: 170px; height: 55px}
.wysija-submit-field {height: 55px;}

Thank you for taking the time to read my post.

Jeanne

[Author]

Posts