Email Form Inline

[feradams]

I would like a form with email name and button next to each other just like the image (https://snag.gy/7MgkHc.jpg) with orange button (made with contactform 7)

Can you help me leave the form with the same look as the model with the orange button?

I tried the Email Form plugin and could not edit … have some steps to follow.

[rad]

Hi @feradams,

Thanks for reaching out.

Do you have an online sample where your form is? Or are you starting from scratch? Contact Form 7 is a 3rd party plugin and we can’t provide customization. But, if you’re just starting out then I recommend checking their documentation first https://contactform7.com/docs/.

And this will help you styling the forms especially the button https://contactform7.com/styling-contact-form/

Once you’re familiar with form creation, fields arrangement, then you can move to inline fields just like from here https://stackoverflow.com/questions/42872032/contact-form-7-multiple-text-fields-on-the-same-line. Just need a layout that encloses your fields and aligns them inline.

Thanks!

[feradams]

Thanks for the answer…

Let me try to explain better …

I’m using the Email Form plugin that comes along with Theme X Extensions.

I already did the integration with the mailchimp and I do not know where to start to leave the form inline using this plugin.

As I am also using the Under Construction plugin I can not show online. (see credentials)

I count on your support.

[Alaa]

Hi @feradams

You can just add this CSS snippet to (Theme Options > CSS):

.tco-subscribe-form fieldset {
    display: inline-block;
    width: 30%;
    float: left;
    margin-right: 30px;
}  

This should do the trick,
Thanks.

[feradams]

Cool … thanks for the help.

Any ideas how I can make him responsive? mobile?

[jade]

Hi there,

Please update the previous code by @Alaa to:

@media (min-width: 768px) {
    .tco-subscribe-form fieldset {
        display: inline-block;
        width: 30%;
        float: left;
        margin-right: 15px;
    }
}

This will display the subscribe form inline for devices 768px and above then display it normally for smaller screen width.

You can find more information about CSS media queries here.

Hope this helps.