change layout of email subscription form

Hi @norricorp,

Thanks for contacting us.

By default, the subscription form inherits installed theme styling to make its appearance similar to other forms on the site.

In some cases, if further customization is needed it can be achieved through custom CSS. If you can provide us the page URL where the form is displayed, then we may be able to provide you required custom CSS for requested changes.

Hope this helps you. Let us know if you have any further queries.

Thank you.

Hello @kishanranawat,
sorry for taking so long to reply but I was waiting for the Astra theme suppliers to get back.
Now they are saying that the layout of the form depends upon the plugin generating the form.
Unfortunately the page is on a VM on my PC so is not publicly available.
I looked at the html for the form.
Can I change the “es_subscription_form” class by adding a additional caa to that class so that it ises a multi column grid layout rather than single column?

Hello @norricorp,

Thanks for your response.

Adding additional class to ‘es_subscription_form’ won’t be possible. We aren’t sure if it gives the desired result or not but you can surely wrap the form HTML inside another HTML element and give the element required additional class. You can refer to this screen recording for how to add the container element to the subscription form.

Since we don’t have much experience with Astra theme’s layout classes, we can’t test at our end but we hope it will work.

Hope this helps you. Let us know what comes out or if you have any further queries.

Thank you.

Hi @kishanranawat,
I was looking at the html generated for the form and the problem is the br tag with the label tag. The input tag is with the label and so the break pushes it on the new line.
I obviously can’t change the auto generated form. Or can I? Rather than use the shortcut to the form, can I use take the html and use that within a custom html block?
Regards

Hi @norricorp,

I am extremely sorry for the delay in my reply.

Thanks for giving us more information regarding your use case.

Directly using form HTML might not work expected as there are some elements in the form that require autogeneration.

If you need to remove only the new line added by <br> tags, then I think the following custom CSS might be useful to you

.es_shortcode_form br {
    display: none;
}

You can put the above CSS in your Site Customizer‘s settings from Appearance –> Customize –> Additional CSS.

Hope this helps you. Let us know if you have any further queries.

Thank you.

This worked – thank you very much