Contact Form 2

Hi,

I’ve installed your ‘Contact Form 2’ becuase i liked the styling however when i add extra elements or boxes i need people to submit answers on i cant work out how to make them look the same as your boxes? The box names are changing just not the boxes? i tries to find the CSS code but couldnt. The website is linked below where youll see what i mean!

https://www.gemmacharlotteevents.co.uk/contact_us/

Regards

Michael

Hi Michael,

The creative contact form 2 is part of our creative contact forms video series:

You can get the code for the contact form here:

Please copy the html code and place it in the contact form 7 code area.

Hope this helps.

Thankyou, ive not idea what ive been doing but with the help of the video i have almost got what im after. How do i create a drop down menu within the form without resorting to contact 7 default? :slight_smile:

Hello Michael,

You will need to create your own custom form and use select element or the dropdown element for your contact form. Please check out this documentation:

Hope this helps.

Yep that worked, Im using the HTML lines in contact form 7 to create this, how do i edit the css that you made so that the drop down box will look the same as the rest in contact form 2, i cant see where to access that code?

thanks

Ive added the HTML and added the class info to link in with the CSS code as per the template (just learnt about the difference between ID & CLASS!!) however its not blending in the same as the rest of the page, images below! Any ideas where ive gone wrong, using the info above i managed to add some boxes and get it to fit in but this one just isnt working the same!?! The high lighted the areas where im working. Thanks

.

Hello Michael,

The url, https://www.gemmacharlotteevents.co.uk/contact_us/, must be saved as draft at the moment because we cannot check it. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

Amazing, thank you for offering to take a look…!

Hello Michael,

Now that your Select element field is added to the form, to format it the same with other fields, please have this code updated:

.wpcf7 textarea, 
.wpcf7 input[type="text"], 
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid #efefef;
  box-shadow: none;
  padding: 20px ;
  margin-bottom: 10px;
  background-color: #fef6eb;
}

You will need to replaced it with this code:

.wpcf7 select,
.wpcf7 textarea, 
.wpcf7 input[type="text"], 
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid #efefef;
  box-shadow: none;
  padding: 20px ;
  margin-bottom: 10px;
  background-color: #fef6eb;
}

We would love to know if this has worked for you. Thank you.

hahaha, No way!!! So we’re 99% there! the box is now the same as the others :grinning: but my — Please Select — text is no longer visible!! its joined the actual drop down options hahaha!

Hello Michael,

When I check your form I am seeing this:

Can you please provide a screenshot so that we will have an idea of how it looks like from your browser?

Thanks.

this is what im seeing!

Hello Michael,

The text is displaying on my end. I would recommend that you clear your browser cache and test again. If still nothing displays, have the custom css updated and use this:

.wpcf7 select,
.wpcf7 textarea, 
.wpcf7 input[type="text"], 
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  border-radius: 0;
  border: 0;
  border-bottom: 2px solid #efefef;
  box-shadow: none;
  padding: 20px ;
  margin-bottom: 10px;
  background-color: #fef6eb;
  color: #555;
}

Kindly let us know how it goes.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.