Inline Newsletter Form

Resolved Presson
(@pressonforlife)

11 months, 3 weeks ago

Hello Sir,

I wanted to use WP Forms for a Newsletter Form.

After creating the Form, I saw that the Fields are arranged from Top to Bottom: but I wanted them to be inline (side by side).

A little research brought me to this Page (https://wpforms.com/docs/how-to-display-your-form-in-a-single-line) and I have applied the “inline-fields” class that the Page talked about.

It worked to get my Form field and Submit button inline, but the Field and Submit button are miles apart: they are so far from each other, as you can see here — https://prnt.sc/1PppSvnzObrT

How can I make the Email field to be 80% while the Submit button will be 20% of the screen ? — then on Mobile, they can be on top of each other ?

Regards.

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Support Ralden Souza
(@rsouzaam)

11 months, 3 weeks ago
Hi @pressonforlife,

Thanks for reaching out! I’m happy to help you with this.

Just so you know, the “inline-fields” class was actually designed to work with at least two fields.

Since you’re looking to create a form with just one field, you’ll need to make a couple of small adjustments to get it working perfectly.

Here’s what you can do:
1. First, change the field size to “Large” – I’ve included a screenshot here to show you exactly where to find this setting.
2. Then, add this CSS snippet to your site:
```
.wpforms-container.inline-fields .wpforms-field-container {
    display: block;
}
```
If that doesn’t do the trick, try this version with the !important tag:
```
.wpforms-container.inline-fields .wpforms-field-container {
    display: block !important;
}
```
Here’s a screenshot of what you should see.

If you’re not sure where to add custom code like this, I’ve got you covered! Check out our helpful tutorial on the most common ways to add custom code to your WordPress site.

For the easiest approach (especially if you’re just getting started), I’d definitely recommend using the WPCode plugin – it makes adding custom code super straightforward!

I hope this gets you sorted out! Let me know if you have any questions.
Plugin Support Ralden Souza
(@rsouzaam)

11 months, 3 weeks ago

Hi @pressonforlife,

We haven’t heard back from you in a few days, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!

Thread Starter Presson
(@pressonforlife)

11 months, 2 weeks ago

Yes, it worked beautifully well.

The only remaining adjustments is that the border of the input field is so faint: and since the Page is white background, and the input field is also white background, it is difficult to see the field.

How can I give a border of:
.field {1px solid grey;} to the input field ?

and Submit button Text colour of black ?

Regards.
Plugin Support Ralden Souza
(@rsouzaam)

11 months, 2 weeks ago
Hi @pressonforlife,

Thanks for getting back to me!

If you’d like to customize the border of all your input fields, you can use the CSS snippet found in our guide here.

To customize your Submit button, you can use a CSS snippet from our guide here.

I’ve even included a screenshot from my test site where I used both CSS snippets with the “!important” tag, just to show you how it looks.

Here’s the full CSS snippet from the screenshot above:
```
.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea {
    border: 1px solid grey !important;
}
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    color: #333 !important;
}
```
I really hope this helps you out! Please feel free to reach out if you have any more questions.
Thread Starter Presson
(@pressonforlife)

11 months, 2 weeks ago
1.) It worked, but the CSS feels so much like a monstrosity.

Why couldn’t it be something so simple and straight forward like:
```
.wpforms-input{
border: 1px solid grey; }
```
Why does it have to be that thousand lines of CSS, because of ordinary input field border ?

Is this an indication that the Codebase of WPForms, needs refactoring ?

The reason why this troubled me, is because I need to do a “hover state“, and a “focus state“, but I’m afraid and uncomfortable with repeating those thousand lines of CSS for both states.

A second option is that, it should have been possible for us to give the input field a custom CSS classname, and just target that my custom classname directly with a straight up specificity, as example below:
```
.my-wpforms-input{
border: 1px solid grey; }
```
2.) Is this a possibility in WPForms, and how do I achieve it ?

3.) Since I am using this Form for Newsletter, how do I know that it will really work for Newsletter ?

What I mean is, I didn’t see anything or any Settings that were asking me for MailChimp API keys and such things.

Will WPForms, somehow go round the internet and go find what my MailChimp list is, and automatically do some magic ?

Honestly, I actually don’t understand how this Form I created will truly become a Newsletter Form and capture emails to my MailChimp list.

Can you Please guide me on how WPForms does it ?

Regards.
Plugin Support Ralden Souza
(@rsouzaam)

11 months, 1 week ago
Hi @pressonforlife,

Thanks so much for getting back to me with your follow-up questions!

Regarding points 1 and 2, you can definitely use a CSS snippet like this:
```
.wpforms-form input, .wpforms-form textarea {
    border: 1px solid grey !important;
}
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
    color: #333 !important;
}
```
Here’s a screenshot that shows how this solution looks: https://a.supportally.com/i/jU32NS

Alternatively, if you prefer, you can use a Custom CSS Class. We have a really helpful and detailed guide here on how to set that up.

For point 3, we have a Mailchimp addon that’s available with a Plus license level or higher. You can see all the features included with each license level on our pricing page here.

If you’re looking to connect your WPForms Lite forms to Mailchimp, our Uncanny Automator integration might be just what you need! We have a guide here with a step-by-step tutorial on how to set up Uncanny Automator with your forms.

You can also check out Uncanny Automator’s page specifically for the integration between WPForms and Mailchimp here.

Please feel free to let me know if you have any more questions!

Thanks!
Plugin Support Ralden Souza
(@rsouzaam)

11 months, 1 week ago

Hi @pressonforlife,

We haven’t heard back from you in a few days, so I’m going to close this thread for now. But if you’d like us to assist further, please feel free to continue the conversation.

Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Inline Newsletter Form’ is closed to new replies.

Tags