Personlaize contact form

Support
#1

Hey,
How can i personalize my contact form to get this style :

This is the link where i took the pic:

Thanks

#2

Hi There,

Thanks for writing in!

I think you forgot to send the link, any way to make similar kind of form you need custom CSS, if you can add the contact form and send us the page URL we can suggest you the CSS.

THanks

#3

Hey,

this is the URL: https://avada.theme-fusion.com/adventure/#contact

Thanks

#4

Hello @Fayssal90,

Thanks for sharing website URL.

You can set section background and then use Contact form 7 shortcode in text element to display form. I have recorded a screencast that you can take refer. https://www.dropbox.com/s/ogz94897n3na49s/background.mov?dl=0

Thanks.

#5

Hey,
Sorry i wasn’t very clear. i don’t want the backround pic because i have black background on website.i want just the style like how to center the form on the page and other things exactly like the pic that i sent.

Thanks

#6

Hi,

To further assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. O

Thank you.

#7

Hey,
I’m working on local.I use the demo :GYM.

This is how my contact page look like : http://demo.theme.co/gym/contact/

And i want change her style like the link that i sent you.Not the background just the style .

Thanks

#8

Hi There,

Set a background image to the section and then try adding the following CSS rules into your Theme Options > Global CSS area.

.wpcf7-text {
    background: transparent !important;
}
.wpcf7-textarea {
    background: transparent !important;
}

.wpcf7-submit {
    width: 100% !important;
    border-radius: 10px !important;
}

.wpcf7-form p {
    color: black;
    font-weight: 600;
}

Then you should get something similar to this.

Hope that helps.

#9

hey,
But it is not what i ask for .look at the link that i sent the form is on the middle on the page.
and the *name / email/ subject/ *are written inside the frame.

thanks

#10

Hello There,

To resolve this issue, please do this:

  • Please edit your contact form in Contacts > Contact Forms and use this CF7 code:
<label>[text* your-name placeholder "Name"]</label>

<label>[email* your-email placeholder "Email Address"] </label>

<label>[text your-subject placeholder "Subject"] </label>

<label>[textarea your-message placeholder "Your Message"] </label>

[submit "Send"]
  • And then use the code given by Darshana to style the form:
.wpcf7-text {
    background: transparent !important;
}
.wpcf7-textarea {
    background: transparent !important;
}

.wpcf7-submit {
    width: 100% !important;
    border-radius: 10px !important;
}

.wpcf7-form p {
    color: black;
    font-weight: 600;
}

The output should be like this:

We would loved to know if this has work for you. Thank you.

#11

NO not all what i want.i want small contact form on the center of the page exaclty like the link:https://avada.theme-fusion.com/adventure/#contact

please before you answer jut look closly the contact on the link .i want the same
this is what i get a large contact filled out the whole page

Thanks

#12

Other thing i want to add the 4 parts : adress + busness hour+ phone+emails.

exactly like this :

how can i do that with the cornerstone.

Thanks

#13

Hi there,

That’s editing your contact form and removing some fields, it’s best to consult it to Contact Form 7 documentation. Our demo only contains the form but it’s not our plugin.

For example, you can simply remove this

<label>[textarea your-message placeholder "Your Message"] </label>

And it depends on your existing form since it could be different from what we have, hence, checking the documentation is highly recommended to understand the composition of the form and how to change it. We just thought that you’re referring to the styling.

Thanks!

#14

You didn’t answer me for the first message.

For the second message .I think this not about the contact form.the contact page is diveded into 2 section:

-the first section where there are the 4 parts it done with visual composer so its possible to do it with the cornestone.look at the pic

-the second section that it’s the contact form*(forget about this section)*

Thanks

#15

Hey There,

For the 4 column section, you can simply create a new section, row and divide it into 4 columns. In each column, you may insert a featured box. The feature box element should be able you to insert an icon, title and some content. Please check out the demo of the featured box element from here:
https://theme.co/cornerstone/elements#x-section-6

Hope this helps.

#16

ok thanks i gonna try this.
But you didn’t answer me about the first problem of my contact form.i didn’t get the result like the link a sent you .

#17

Hi there,

Unfortunately, we can not give that much of customization because it is outside of our support scope and secondly we do not have the actual website to test our code against as you work locally. You will need to migrate your website to a live server and give us the page URL which contains the form.

We can not give a style like the one you mentioned, we can give you suggestions on how to code that yourself. For example, to limit the form at the center and not letting it go all the way, you will need to find the container tag of the form which I currently do not know what it is and force a maximum width. such as:

.formwrapper {max-width: 500px;}

We will use the Google Chrome Developer Toolbar to detect the live site code and give you proper one:


Thank you for your understanding.

#18

I told that i’m using the GYM DEMO , so you can see the code or whatever you want.

Thanks

#19

Hi,

To restrict the width of your Form, you can add this in Cornerstone > CSS

.wpcf7-form {
   max-width:500px;
}

Then to center it, you need to set formatting to text align center.

Hope that helps.

#20

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