Contact form for mobile devices

Hello,

I hope you’re doing fine and staying safe. :slight_smile:

I have an inquiry regarding the contact form I have on my website. I’m happy with how it looks in the desktop version, but the mobile version is rather disappointing.

Here’s how it looks in the desktop version:

To achieve this, I’m using this CSS code:

    #left {
        width: 47%;
        float: left;
        margin-right:6%;
    }
     
    #right {
        width: 47%;
        float: left;
    }
     
    .clearfix:after {
        content:"\0020";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        overflow:hidden;
        margin-bottom:30px;
    	  margin-right:6%;
    }
     
    .clearfix {
        display:block;
    	  width:100%;
    }

    textarea{width:100.65%;}

Now, please take a look at how the contact form looks in the mobile version:

The first four boxes are kind of jumbled together, while the only box that seems to be responsive is the “Message” one.

Is there a way to preserve the desktop version and modify the contact form accordingly for it to fit in the mobile version? Is it possible to have one column in the mobile version, that is, to have all of the five boxes on top of each other?

The website is: http://stsloc.com/contact/

Please let me know what can be done about this. Thanks in advance!

Cheers,

Luciano

Hello there,

Thank you for reaching out to us. I am happy to help with your queries.

To do CSS styling that only applies on a specific screen size, you can use CSS media query.

For your case, replace your code with:

    @media only screen and (min-width: 1025px) {

      #left {
          width: 47%;
          float: left;
          margin-right:6%;
      }
       
      #right {
          width: 47%;
          float: left;
      }
       
      .clearfix:after {
          content:"\0020";
          display:block;
          height:0;
          clear:both;
          visibility:hidden;
          overflow:hidden;
          margin-bottom:30px;
      	  margin-right:6%;
      }
       
      .clearfix {
          display:block;
      	  width:100%;
      }

      textarea{width:100.65%;}
      
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you for your prompt reply, and sorry for answering you so late. I’ve been dealing with a lot of work these days. :confused:

I tried your solution and it worked, but the result wasn’t ideal, or at least what I expected.

Please take a look at the screenshot below:

I find a number of issues here that I’ll try to describe as clearly as possible.

  1. The only text box that fits within the mobile device’s screen is the “Message” one. The rest seems to be overflowing. Is there a way to make them fit within this space?

  2. Please note the space between the “Website” and “E-mail” boxes and the “Phone” and “Message” boxes is too tight. Is it possible to have a similar space to the “Name” and “Website” boxes between them?

  3. The order of the text boxes isn’t what I expected. If possible, I’d like the order to be the following:

Name
E-mail
Website
Phone
Message

I guess that’s it. I think I can do without items 2 and 3, but I’d really like the text boxes to fit within the screen. Please let me know if there’s anything to be done about it.

I can’t promise you anything, but I’ll try to thoroughly read the CSS media query link you provided me as soon as I can. Maybe I need a vacation, but then again, don’t we all need one as well? :stuck_out_tongue:

Thanks in advance!

Cheers,

Luciano

Hi Luciano,

Thank you for getting back.

Please try adding the below CSS code to your site’s Additional CSS under Dashboard > Customize.

    @media only screen and (max-width: 527px) {
    	 .wpcf7-form select, .wpcf7-form textarea, .wpcf7-form input {
    		 width: 100%;
    	}
    	 .wpcf7-form #right, .wpcf7-form > p {
    		 margin-top: 30px;
    	}
    }

Let me know whether it helps or not. Have a nice vacation!

Regards,
Kharis
aThemes Support

1 Like

Hey Kharis,

I tried your code and it worked like a charm! :smiley:

Here’s how the contact form looks like on mobile devices now:

Now all the text boxes fit within the screen and the space between them came out very well.

Thank you so much for your help! I’m really happy with the result. :slight_smile:

Have a nice day!

Cheers,

Luciano

1 Like

You’re welcome Luciano!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support