-
AuthorPosts
-
June 8, 2016 at 10:53 am #644680
Hi
I am trying to place 4 fields on the same line – Name : Email : Captcha : Subscribe – however the captcha includes text that off-sets it and the subscribe places itself on the line below – see: http://www.thewebclub.ieI am looking to tidy this up and would be grateful for your help. Thanks. Kevin.
- This topic was modified 8 years, 6 months ago by nolka.
June 8, 2016 at 12:08 pm #644748Hey nolka,
Thank you for reaching out to us, using 4 fields on same line will look good on large screens and on smaller devices this will not be a viable option. Also some fields have labels and some do not so it will cause alignment issues.
I believe you are using mailchimp subscription? If so it will automatically filter out spam email address to an extent. So in perspective of a better user experience it is recommended not to use a captcha in a subscription field as seen on any major website subscription form. Try to make it as easy as possible and with less steps :)
If yous till like to add them all in the same line we can sure help you with custom css please let us know.
Best regards,
VinayJune 8, 2016 at 12:30 pm #644768Hi Vinay
Thanks for your prompt response. I appreciate what you are saying. On mobile devices the fields should be on individual lines – one on top of the other – not in a straight line – so this will work fine. Also – I want to remove the text associated with the “Captch field” so that it is the same as the others. and finally – I am going to use MailChimp for some of these “Quick Sign-up Forms”, but for others I just want to be able to setup “Quick Contact Forms” myself to come directly to me from the website. So I would appreciate if you can help with customising the CSS…
Cheers.
Kevin.June 8, 2016 at 7:43 pm #645020Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#element_avia_4_1 label { display:none!important; } #element_avia_4_1 { padding-left: 0px!important; width: 16.2%; margin-left: 1%; } p.form_element { margin-left: 1%; float:left; width:auto!important; display:inline-block; clear:none; }
Please note the above code will affect all form fields in order to avoid that please add a custom class to your form.
To enable custom class refer to this link http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
VinayJune 9, 2016 at 1:17 am #645164Thanks Vinay – much appreciated…
This does show on a single line on the larger screens – but when viewed on the iPhone it does not sit correctly and the text appears again for the Captcha? Any thoughts Vinay?
Kevin.June 10, 2016 at 6:13 am #646037Hi,
Since there’s not enough space to accommodate the fields in one line, I think it’s better if they are stack on top of each other. Something like this should work:
@media only screen and (max-width: 479px) { .responsive .avia_ajax_form .form_element { width: 100% !important; } }
This will affect all fields so adding a custom css class attribute will help: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.