Docs

[Sandie]

Hi,

I am trying to change the design of the Contact Form 7 on my page. But without any luck.

Right now it looks like this: http://prntscr.com/e9eeaa
URL: https://youpheal.com/kontakt/

But I want it to look like this: http://prntscr.com/e9eeng

I am trying to insert the same CCS as I used on my other site but it doesnt work.

input.wpcf7-form-control.wpcf7-submit {
float: right;
width: 100%;
height: 65px;
background-color: transparent;
color: #000;
border-color: #fff;
}

input.wpcf7-form-control.wpcf7-submit:hover {
background-color: #fff;
}

Why doesn’t the CCS work? When added the first word “input” is gray.

Thanks!

Best Regards
/Sandra

[Darshana]

Hi there,

Thanks for writing in! I’m sorry, but I do not understand your issue here. What did you mean by “When added the first word, input is gray” ? (https://snag.gy/XYF2dG.jpg).

Could you please explain your issue with a little bit more information, so that we can assist you.

Thanks!

[Sandie]

Well I want it to look like this: http://prntscr.com/e9eeng

But now it looks like this: http://prntscr.com/e9jgsk

Thanks!

Best Regards
/Sandra

[Rupok]

Hey Sandra,

Thanks for writing back. I’d suggest to edit the form and place the inputs within two columns that you can do from form editor. Let’s place the Text Editor within the right column. You can simply use two div and give them separate class names. Update us after doing so if you need help with the CSS.

Cheers!

[Sandie]

HI,

Could you please tell me in detail how to do that. In the form editor.

Right now it looks like this:

<div class=”clearfix”>
<div id=”left”>
[text* YOUR-NAME placeholder “NAMN”] <br/>
[text* EMAIL-ADDRESS placeholder “EMAIL ADRESS”] <br/>
[submit “SKICKA”]

</div>
<div id=”right”>
[textarea* YOUR-MESSAGE placeholder “DITT MEDDELANDE”] <br/>
</div>
</div>

Thanks!

Best Regards
/Sandra

[Lely]

Hello Sandra,

We can use the x theme columns. Something like this:

 <div class="x-column x-sm x-1-2">
LEFT content here
</div>
<div class="x-column x-sm x-1-2 last" >
Right content here
</div>

Hope this helps.

[Sandie]

Hi,

Thanks, that works great now.

One more thing about the Contact Form and its styling.

I would like the text bars to be bigger, like in this image: http://prntscr.com/ea7paz

My URL for the page: https://www.youpheal.com/kontakt/

How do I achieve that?

Thanks!

Best Regards
/Sandra

[Friech]

Hi There,

Thanks for writing in! Please add this on your custom CSS on Customizer.

.page-id-28 input[type="text"] {
	 height: 5em;
}

Feel free to adjust the 5em value.

Hope it helps, Cheers!

[Sandie]

Hi,

That worked great for the left side of the Contact Form. How do I add the code for it wo work on both the right and left side of the Contact Form?

I also added font-size to 18px within the code, so now the code looks like this:

.page-id-28 input[type=”text”] {
height: 5em;
font-size: 18px;
}

And the contact form on my site looks like this: http://prntscr.com/eal2jq

1. How do I get the font within the big box for MESSAGES to be the same size as in the NAME and EMAIL boxes?

2. I would also like for the whole Contact Form to be the same size as in this image: http://prnt.sc/ea7paz

The fields of NAME, EMAIL, SEND BUTTON are together the same size as the MESSAGE field.

My URL: https://youpheal.com/kontakt/

Thanks!

Best Regards
/Sandra

[Christopher]

Hi there,

Please add following code:

.wpcf7 textarea {
    font-size: 18px;
}
input.wpcf7-form-control.wpcf7-submit {
    width: 100%;
}

Also update your code to :

.page-id-28 input[type="text"] {
    height: 3.4em;
    font-size: 18px;
}

Hope it helps.

[Sandie]

Great, thanks!

Best Regards
/Sandra

[Paul R]

You’re welcome! 🙂

[Sandie]

Hi,

I need help with one more thing regarding the Contact Form.

I would like the button for SEND (Skicka) to be black. I have CCS code for a class named “my-btn” that will work fine.
But how to I get that class into the SEND button?

Right now it looks like this: http://prntscr.com/ecbnk4

You can find the page URL: https://youpheal.com/kontakt/

In the CSS code I have this for the contact for as of now:

.wpcf7 textarea {
font-size: 18px;
}
input.wpcf7-form-control.wpcf7-submit {
width: 100%;
}

.page-id-28 input[type=”text”] {
height: 3.4em;
font-size: 18px;
}

And in the Contact Form Edit it looks like this:

<div class=”x-column x-sm x-1-2″>
[text* YOUR-NAME placeholder “NAMN”] <br/>
[text* EMAIL-ADDRESS placeholder “EMAIL ADRESS”] <br/>
[submit “SKICKA”]

</div>
<div class=”x-column x-sm x-1-2 last” >
[textarea* YOUR-MESSAGE placeholder “DITT MEDDELANDE”] <br/>
</div>

So where do I edit the changes to get the button to look like class “my-btn”?

Thanks!

Best Regards
/Sandra

[Paul R]

Hi Sandra,

To make it black, you can add this in Cornerstone > Settings > Custom CSS

https://www.screencast.com/t/UIPW7GRa

#x-section-2 .wpcf7-form .wpcf7-submit {
    background-color: #000;
}

Hope that helps.

[Sandie]

Hi,

I’ve added the following CSS code to make the button in the Contact Form to look as I want. But I only seem to get it on one of my Contact Forms.

The CSS code:

/* KONTANT FORMULÄR */
#x-section-2 .wpcf7-form .wpcf7-submit {
background-color: #fff;
border-color: #393939;
color: #393939;
}
#x-section-2 .wpcf7-form .wpcf7-submit:hover {
background-color: #393939;
border-color: #393939;
color: #fff;
}
/* END KONTAKT FORMULÄR */

I have two forms, one for computer screens and one for Mobile screens.

They are named:
[contact-form-7 id=”269″ title=”Kontakt”]
[contact-form-7 id=”356″ title=”Kontakt_mobil”]

Both of the Contact Form are displayed on the page URL: https://youpheal.com/kontakt/

So what do I need to add for it to work on both Contact Forms?

Thanks!

Best Regards
/Sandra

[Author]

Posts