Hello,

For some reason when I click on my simple input box, the input box does not accept focus. Has anyone has a solution fot this? Here is a link to the webpage:

http://landbankrealestate.com/en/properties/lote-en-condominio-las-vueltas/

The only way I can enter data into the box is to use tab to highlight it first.

I've read a similar problem here in a 9 years old thread (https://www.daniweb.com/digital-media/ui-ux-design/threads/127910/input-box-not-accepting-focus#post2228704) ... but I don't know how can I fix this with my code

Here is my code:

<div class="agent_contanct_form ">
    <?php    
     if ( basename(get_page_template())!='contact_page.php') { ?>
             <h4 id="show_contact"><?php _e('Contact Me', 'wpestate'); ?></h4>
     <?php 
           }else{
     ?>
             <h4 id="show_contact"><?php _e('Contact Us', 'wpestate'); ?></h4>
     <?php } ?>
    <?php if ( ($contact_form_7_agent =='' && basename(get_page_template())!='contact_page.php') || ( $contact_form_7_contact=='' && basename(get_page_template())=='contact_page.php')  ){ ?>
        <div class="alert-box error">
          <div class="alert-message" id="alert-agent-contact"></div>
        </div> 
        <input name="contact_name" id="agent_contact_name" type="text"  placeholder="<?php _e('Your Name', 'wpestate'); ?>" 
               aria-required="true" class="form-control">
        <input type="text" name="email" class="form-control" id="agent_user_email" aria-required="true" placeholder="<?php _e('Your Email', 'wpestate'); ?>" >
        <input type="text" name="phone"  class="form-control" id="agent_phone" placeholder="<?php _e('Your Phone', 'wpestate'); ?>" >
        <textarea id="agent_comment" name="comment" class="form-control" cols="45" rows="8" aria-required="true" placeholder="<?php _e('Your Message', 'wpestate'); ?>" ></textarea>    
        <input type="submit" class="wpresidence_button agent_submit_class"  id="agent_submit" value="<?php _e('Send Message', 'wpestate');?>">

Kind Regards,

In one of your CSS files you have pointer-events: none assigned to those inputs. Not sure why someone did that, but this make them not clickable/touchable and thus not fillable, so just remove the pointer-events properies and you're good.

Here are the CSS blocks which are somwhere in http://landbankrealestate.com/wp-content/cache/wpfc-minified/11b1517ad7f8f66fbdcf632c640fc3eb/1511459389index.css.

.wpestate_estate_property_design_agent #agent_phone {
    width: 31.5%;
    pointer-events: none;
    cursor: default
}

.vc_col-sm-4 .wpestate_estate_property_design_agent #agent_contact_name, 
.vc_col-sm-4 .wpestate_estate_property_design_agent #agent_user_email,
.vc_col-sm-4 .wpestate_estate_property_design_agent #agent_phone {
    width: 30.8%;
    pointer-events: none;
    cursor: default;
}

I have to say too that you might wanna optimize for performance as well, because that page is huge (18Mb in size is rediculous) and has 158 http requests to resources (CSS, JS and images) which makes loading take forever on slow/bad connections.

https://gtmetrix.com/reports/landbankrealestate.com/365fAXUU

Thank you Gentlemedia! Your solution works :)

What do you suggest to optimize performance. You are right

What do you suggest to optimize performance.

Well since you have a WordPress site you could start with this guide:
https://premium.wpmudev.org/blog/speeding-up-wordpress/

Also just remove unnecessary content. For example on that Lote Las Vueltas property page I see 2 different galleries (a slider and a lightbox) with the same photos. Get rid of one! And the original dimensions of the lightbox thumbnail images are twice as big as that they get displayed on the page. Anyway there are loads of things you could/should do to decrease page weight & http requests, and optimize for speed on the server and on the front-end, but that guide wil get you in the right direction. Good luck!

Thank you very much, will do that!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.