Member Avatar for Mauricio_5

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:

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,

  • 3 Contributors
  • 5 Replies
  • 486 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Mauricio_5

Dani AI

Generated

The form focus problem was caused by a CSS rule that disabled pointer interaction on the inputs; correctly identified the offending style. When pointer-events is set to none an element (and its descendants) will not receive mouse or touch events, so clicks and taps do not focus the field. Removing or overriding that rule restores normal focus behavior.

Recommended troubleshooting and fix workflow:

  • Use the browser inspector (F12) and select a problem input to see the computed styles and the rule that sets pointer-events. The Styles pane shows the source file and line.
  • If the rule lives in a minified/cached stylesheet, edit the original source (theme CSS, child theme, plugin CSS, or inline style) rather than the generated cache file. Make the change in source and then clear any caching/minification plugin and CDN so the regenerated bundle reflects the edit.
  • If the pointer-events: none was intentional (for an overlay/disabled state), narrow the selector to target only that overlay instead of inputs, or explicitly re-enable pointer events on the form controls.

Quick override (temporary / safe to test) — add to Custom CSS or child theme:

.wpestate_estate_property_design_agent input,
.wpestate_estate_property_design_agent textarea {
  pointer-events: auto !important;
  cursor: text !important;
}

Use !important only for quick testing; the long-term fix is to correct the original selector that mistakenly disabled input interaction.

Additional notes tied to earlier replies: ’s validator reminder is good — fixing markup and accessibility issues improves robustness. For performance (echoing ), remove duplicate galleries, serve properly scaled images, enable lazy-loading, limit plugins, enable compression and browser caching, and clear/minimize CSS/JS requests. Finally, ensure form accessibility by adding explicit <label for="..."> pairs so keyboard and assistive tech work reliably.

Recommended Answers

All 5 Replies

Member Avatar for gentlemedia

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 .

.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

Edited by gentlemedia
Member Avatar for Mauricio_5

Thank you Gentlemedia! Your solution works :)

What do you suggest to optimize performance. You are right

Member Avatar for gentlemedia

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!

Edited by gentlemedia
Member Avatar for Mauricio_5

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.