Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 8, 2016 at 10:53 am #644680
    nolka

    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.ie

    I am looking to tidy this up and would be grateful for your help. Thanks. Kevin.

    • This topic was modified 8 years, 5 months ago by nolka.
    June 8, 2016 at 12:08 pm #644748
    Vinay

    Hey 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,
    Vinay

    June 8, 2016 at 12:30 pm #644768
    nolka

    Hi 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 #645020
    Vinay

    Hi,

    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,
    Vinay

    June 9, 2016 at 1:17 am #645164
    nolka

    Thanks 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 #646037
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.