Return to previous page

Custom Contact Form - by Brockway - on WordPress WooCommerce support

This topic has 37 replies, 2 voices, and was last updated 8 years, 7 months ago ago by Eva Kemp

Brockway

Participant

July 22, 2015 at 14:05

Hi there, the current contact form is quite simple, and i would like a more advanced one, can you tell me what plugin is compatible with your theme ?

Regards.

#76483 Copied

36 Answers

Eva Kemp

Support staff

July 22, 2015 at 15:48

Hello,

You can use Contact Form 7 plugin. It’s compatible with the theme.

Regards,
Eva Kemp.

#76520 Copied

Brockway

Participant

July 23, 2015 at 13:21

Hi and thanks.

I install the plugin and include the form, but it’s not looking exactly the same, it’s taking half the space and i would like to have 2 box per line to fill the whole content, and the message box to not be rezisable by users and fit the whole space.

i hope you understand despite my poor english?

Thanks.

#76700 Copied

Eva Kemp

Support staff

July 23, 2015 at 13:39

Hello,

In this case you have to style contact form to your needs. We can help you to do this. Please provide us with wp-admin panel credentials in Private Content and show a screenshot how you want the form to be displayed.

Regards,
Eva Kemp.

#76708 Copied

Brockway

Participant

July 23, 2015 at 16:30

thanks for your help.

Here a screen of what i would like to look like. i will take care of parameter of field myself, i just need to have the code that make them look like that.

Regards.

#76763 Copied

Eva Kemp

Support staff

July 23, 2015 at 17:25

Hello,

The screenshot is absent in your post.
Please resend it.
Also provide us with the link to your site and wp-admin panel credentials.

Thank you.
Regards,
Eva Kemp.

#76773 Copied

Brockway

Participant

July 23, 2015 at 17:53

Sorry, i’m a little tired i guess 🙂

https://www.dropbox.com/s/phnh3w2wdpxig9i/Capture%20d%27%C3%A9cran%202015-07-23%2017.20.59.jpg?dl=0

#76779 Copied

Eva Kemp

Support staff

July 24, 2015 at 09:50

Hello,

Also provide us with the link to your site and wp-admin panel credentials.
Please look at the screenshot:
http://storage2.static.itmages.com/i/15/0724/h_1437727830_4709173_32e29f295b.png

Thank you.
Regards,
Eva Kemp.

#76846 Copied

Brockway

Participant

July 24, 2015 at 11:17

Hello, keeping it is a good idea but only to the condition that the user cant expand it on sides, only on height.
This code is working fine for that, but i’m not really sure where to put it :

textarea{
resize: vertical;
}

Cheers.

Please, contact administrator
for this information.

#76863 Copied
Eva Kemp

Support staff

July 24, 2015 at 13:28
Hello @Brockway,

I’ve added the code in Theme Options > Custom CSS > Global Custom CSS and this code to style “Your message” form:
```
.wpcf7-form-control-wrap.your-message textarea {
   width: 201% !important;
}
```
Also I’ve edited the code for contact form 7 in wp-admin panel > Contact to style the form as you wanted:
```
<table><tr><td><p>Votre nom (obligatoire)<br />
    [text* your-name] </p> </td>

<td><p>Votre email (obligatoire)<br />
    [email* your-email] </p></td></tr>

<tr><td><p>Votre email (obligatoire)<br />
    [email* your-email] </p></td>
<td><p>Sujet<br />
    [text your-subject] </p></td></tr>

<tr><td><p>Votre message<br />
    [textarea your-message] </p>

<p>[submit "Envoyer"]</p></td></tr>
</table>
```
Please clear browser cache and check it now.

Please note it’s beyond our support scope to customize 3rd-party plugins. It has been done for you as an exception.

Thank you.

Regards,
Eva Kemp.
#76888 Copied
Brockway

Participant

July 24, 2015 at 14:00

Hi Eva,

I apply it, but i think you miss something…

Because there are several things that are not like in the screen, can you re-check it please ?

Thanks.

#76898 Copied
Eva Kemp

Support staff

July 24, 2015 at 14:54
Hello,

I’ve edited the code for contact form and now it’s:
```
<table><tr><td>Votre nom (obligatoire)
    [text* your-name] 
 </td>

<td>Votre email (obligatoire)
    [email* your-email] 
</td></tr>

<tr><td>Votre email (obligatoire)
    [email* your-email] 
</td>
<td>Votre email (obligatoire)
    [email* your-email] 
</td></tr>
<tr><td>Sujet
    [text your-subject] 
</td></tr>

<tr><td>Votre message
    [textarea your-message] 

[submit "Envoyer"]
</td></tr>
</table>
```
and added this code in Theme Options > Custom CSS > Global Custom CSS:
```
.wpcf7-form-control-wrap.your-message textarea, .wpcf7-form-control-wrap.your-subject input[type="text"] {
   width: 201% !important;
}

.wpcf7-form table td {
    border-top: none !important;
}
```
Please check now.

Regards,
Eva Kemp.
#76907 Copied
Brockway

Participant

July 24, 2015 at 15:20

Hi there,

it’s way better now, but still room to improve, indead i spot 3 errors still there :

1: The fields on the right are not align with the fields of bottom, or too small, dont know.
2: The button “ENVOYER” is not on the right and too small
3: The field “Message” have a weird blue glowing wrap when you type in it, it’s not at all in respecting the original design that is yellow.

We almost done 🙂

Cheers.

#76910 Copied
Eva Kemp

Support staff

July 26, 2015 at 08:55
Hello,

1. Sorry but your query is inclear. Please show on a screenshot what you want to change in the fields.

2. I’ve added this code in Global Custom CSS:
```
.wpcf7-submit {
    padding: 10px 18px !important;
    font-size: 15px !important;
    float: right !important;
    margin-right: -100% !important;
}
```
3. I’ve added the following code to change border color of “Message” box:
```
.wpcf7-form-control-wrap.your-message textarea:focus {
    border-color: yellow !important;
}
```
Please check.

Regards,
Eva Kemp.
#77046 Copied
Brockway

Participant

July 26, 2015 at 10:34

Hello,

like i say the border of the “Message” field is weird, it was blue, now it’s light blue, maybe because you add some yellow…

i just whant it to be black like in the orginal design :

Here the original design :
https://www.dropbox.com/s/1e4cq3bfu5999sh/Capture%20d%27%C3%A9cran%202015-07-26%2011.24.42.png?dl=0

Here any other field of contact form 7 (like original design):
https://www.dropbox.com/s/1e4cq3bfu5999sh/Capture%20d%27%C3%A9cran%202015-07-26%2011.24.42.png?dl=0

And here the “Message” field:
https://www.dropbox.com/s/xjpx6eu2zt7e5dn/Capture%20d%27%C3%A9cran%202015-07-26%2011.24.48.png?dl=0

Also i found the design with Contact form 7 really poor, because it dont fit at all to the original design and alignement, here a screen of what i mean :

https://www.dropbox.com/s/y1e0fph95nqs47x/Capture%20d%27%C3%A9cran%202015-07-26%2011.31.30.png?dl=0

I think if i mean the whole page look good,it’s great but if i have a poor contact form, it’s pain for no results.

Cheers.

#77055 Copied

Eva Kemp

Support staff

July 27, 2015 at 10:18

Hello,

1. Are you talking about our contact form border or contact form 7 plugin? I’ve changed the border to black for contact form 7. Please check it.

2. I’ve added this code in Global Custom CSS:
.wpcf7-form {width: 103% !important}
Please check the form alignment now.

Regards,
Eva Kemp.

#77149 Copied

Brockway

Participant

July 27, 2015 at 13:51

Hi there i’m beginning to feel a little bit tired about contact form 7 and it’s “compatibility” with yout theme :

1- the button “Envoyer is still not align correclty, 2 pixel too much left.
https://www.dropbox.com/s/xjfsffo79gzd0s3/Capture%20d%27%C3%A9cran%202015-07-27%2014.45.20.png?dl=0

2- those field still not filling the whole place correctly.
https://www.dropbox.com/s/xjfsffo79gzd0s3/Capture%20d%27%C3%A9cran%202015-07-27%2014.45.20.png?dl=0

3- the “message” box still have a “i dont know why but i’m blue” style.
https://www.dropbox.com/s/8kwppek1eji68h1/Capture%20d%27%C3%A9cran%202015-07-27%2014.48.50.png?dl=0

I apreciate the help, but i’m not sure i’m being read… If i must improve my english writting skills, tell me.

Regards.

#77222 Copied
Eva Kemp

Support staff

July 27, 2015 at 14:48
Hello,

When we talk about compatibility with the theme we mean the plugin works properly and emails are sent. We don’t mean its design. If you want to style it you need customize css file or even the plugin original files.
We even modified the code of your contact form in the plugin settings which is beyond our basic support scope because it’s 3rd-party plugin and we don’t provide support for 3rd-party plugins even if they are included in the theme.

1. I’ve changed margin-right value in this code:
```
.wpcf7-submit {
    padding: 10px 18px !important;
    font-size: 15px !important;
    float: right !important;
    margin-right: -102% !important;
}
```
You can edit the values in Custom CSS to your needs.

2. The second screenshot is the same as for the 1 query. Please resend a correct one.

3. Sorry, but I don’t see blue border:
http://storage1.static.itmages.com/i/15/0727/h_1438004910_8873158_07e0a01e86.png
Check it in another browser.

Thank you for your understanding.

Regards,
Eva Kemp.
#77240 Copied
Brockway

Participant

July 27, 2015 at 17:12

2: https://www.dropbox.com/s/eml1344l6qh9q1l/Capture%20d%27%C3%A9cran%202015-07-27%2014.45.48.png?dl=0

3: i dont need to try in another brownser since my users will not try in multipla brownser too, i just need it fixed please.

Also you seem to be a little lost in your code, because i was complaining that “Envoyer” was too much on the left, but now it’s too much on the right…
https://www.dropbox.com/s/x7750f7n7avuvw1/Capture%20d%27%C3%A9cran%202015-07-27%2018.15.54.png?dl=0

I just whant all the field fitting perfectly together like the default contact form, i was sure it’s was pretty simple.

So to explain it the simpliest way i can :

I want the contact form 7 to look EXACTLY the same that the default one, this is why i leave the default one, to compare them and see when it’s done.

Cheers.

#77278 Copied

Brockway

Participant

July 27, 2015 at 17:41

4. I dont know why but it’s not align correctly on the left also.
https://www.dropbox.com/s/9qbv6zo2xtgsvup/Capture%20d%27%C3%A9cran%202015-07-27%2018.39.34.png?dl=0

Regards.

#77283 Copied
1 2

Viewing 20 results - 1 through 20 (of 37 total)