Contact Page Content

As noted from other threads, in order to avail of other field boxes in the Contact form such as Telephone Number and Subject etc, I downloaded the Contact Form 7 plugin as recommended. However:
1. This plugin does not have the same rounded edges to the field boxes as is in the rest of the Cloriato theme - do you know how to fix this, or an alternative plugin that has a style more in keeping with existing search boxes etc within the Cloriato theme?
2. How do I type content such as the company contact details on the right hand of the screen, to fill the blank space on the right of the screen, where the contact form is taking up space on the left of the screen? Whenever I have tried to type in the contact details, it just puts the contact form underneath them...?

 

Hello,

1) Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

input[type="text"], textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
 
input[type="submit"]{
background:#afafaf;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
width:80px;
height:30px;}

2) For this
Go to the Appearance > editor > header.php and add code given below as shown in image.

Code:

<span id="contact">your contact detail</span>

 

Thank you. For your solution to part 1, please see my website www.iozzolino.com/contact . Can you tell me how to fix the email and telephone number fields? Even after applying the code you gave in the Custom CSS, these field boxes are still square and are also white whereas the other field boxes are grey....how do I make all boxes grey and with rounded corners?

 

Hello,
Paste the following code given below also in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

input[type="email"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 250px;
height: 25px;
background: #f2f2f2;
border: 1px solid #d1d1d1;
padding-left: 5px;
margin-bottom: 19px;
}
 
input[type="tel"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 250px;
height: 25px;
background: #f2f2f2;
border: 1px solid #d1d1d1;
padding-left: 5px;
margin-bottom: 19px;
}

This will solve your issue.

 

many thanks, that has worked. However, there is one type of font in all the other fields in the contact form, and then a different font in the field where you type the message. Please take a look at the website www.iozzolino.com/contact. Can you tell me how to change the font in the Message field to the same font as all the other fields?

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.contactform input[type="text"], .contactform textarea{
font-family:symbol;
}

Inplace of "symbol" put your font type.

 

That hasn't seemed to work. The font is still different in the Message box....

 

As for part 2 of my initial query, the code to be inserted into the Header didn't exactly work, it enabled me to insert contact details, but they were up in the top banner of the website above the social icons. Please see image for reference, I want to be able to put my contact details in the area where the grey box is, almost like a 2 column page, one column for the contact enquiry form, and the other for my details.

 

Hello,
Use column shortcode and put contact form shortcode in one column and your contact details in another column.This will solve your issue.

Check link for reference

http://www.inkthemes.com/how-to-use-shortcodes-in-themes/02/

 

Thank you, I have done the following. Please see my website www.iozzolino.com/contact
Please can you tell me how to get my contact details aligned to the far right of the page, rather than aligned to the left of the page beside the contact enquiry form?
I would also like to make the email address a hyperlink to directly open up a new email should someone click on my email address.

 

1. For your first issue

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.fullwidth-page .last {
text-align: right;
}

2.For your second issue

Replace your current email info with the code given below

Code:

<a href="mailto:[email protected]">[email protected]</a>

This will solve your issue.

 

Hi, the code to make the email address a hyper link didn't work, it just displayed the entire code..?

 

Hello,


Please provide the following information listed below.

Thread Link:
Your Website URL:
WordPress Username:
WordPress Password:

Send this information on our email at [email protected]

 

Ok, I will do that now, could you please ensure 1. that the email address is a hyper link and 2. that the font in the message field when filling out the enquiry form is the same font as the other fields in the contact enquiry form.
Thanks.

 

Support mail sent.