Contact form alignment and width

Hi,

I upgraded to Sydney Pro but The contact forms (using contac 7) on my website seem to have some padding on the right and they are not responsive.

I tried the contact template for my contact page but the contact form was left aligned and the text fields were small.

The link to the contact page is Contact Page

Hello there,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.contact-form-wrap label{
  width: 100%;	
}	

Regards,
Kharis

Hi Kharis,

Thank you for the prompt reply .

The above solution solved the width of contact form on contacts page template but i have another contact 7 form on my website whose width didn’t change. Also that contact form is not fully responsive.

one more thing, is there a way to move the contact info section to he left of contact us page and the contact form to the right, this was on mobile devices the contact info section will show up first. Also if possible i would like to add a Fax number to the contact section. Please advise how i can achieve that.

please help.

Hello there,

Please share the link to the page where I can see your other contact form.

To reverse the contact form and contact info position, please try to do the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   var cForm     = $('.page-template-page_contact .hentry .col-md-8');
   var cFormHTML = cForm.html();

   var cInfo     = $('.page-template-page_contact .hentry .col-md-4');
   var cInfoHTML = cInfo.html(); 

   cForm.removeClass('col-md-8').addClass('col-md-4');
   cInfo.removeClass('col-md-4').addClass('col-md-8');
   
   cForm.html(cInfoHTML);
   cInfo.html(cFormHTML);

   // Insert FAX number into contact info

   var faxNumber = '1234';
   var faxHTML   = '<li class="fax">'+faxNumber+'</li>';

   $('.roll-infomation').append(faxHTML);
   

})(jQuery);   

The code above also adds a fax number, change it to yours at this line:


var faxNumber = '1234';

  1. Update

  2. Then apply the following CSS code:


.roll-infomation li.fax:before{
	position: absolute;
	left: 0;
	top: 4px;
	content: "\f1ac";
	font-family: "FontAwesome";
	font-size: 20px;
	color: #d65050;
}

Regards,
Kharis

Hi Kharis,

Thank you. the above solution got me what i needed.

about the contact form on my other page. Never mind that i ended up using ninja forms and found it better than contact 7 form.

Thank you,

Hello there,

Thank you for updating me. I am glad to know that the code worked for you.

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