Contact Forms

This topic has 14 replies, 2 voices, and was last updated 6 years, 5 months ago by ckluong3.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
April 23, 2018 at 9:43 am #53946

ckluong3
Participant

Hi, I would to create the Contact Form for my site, is the current contact form template in the flat fashion theme ready to use? Or could you show me how to configure the setting for contact form.

Please advise, thanks.

Attachments:
You must be logged in to view attached files.

April 23, 2018 at 12:12 pm #53997

Elise Noromit
Member

Hello,

If you like the contact form from demo, you can take it and use. Enter the form you are going to use, Mail tab an make sure there is a proper email address set http://prntscr.com/j8yo1u

Here you will find all necessary information on Contact Form 7 plugin https://contactform7.com/docs/

Best Regards

April 23, 2018 at 5:25 pm #54112

ckluong3
Participant

Hi, I would like to change the button color similar to the sign up button, may I know how should change the code in Contact’s form code?

Please advise, thanks.

Attachments:
You must be logged in to view attached files.

April 23, 2018 at 6:43 pm #54145
Elise Noromit
Member
Hello,

Try this code CSS:
```
[type=submit].btn-color-black{
    padding: 12px 20px;
    background-color: #bea163;
    display: inline-block;
    position: relative;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
}
```
Add it to the Theme Settings > Custom CSS

Best Regards
April 24, 2018 at 2:30 am #54186

ckluong3
Participant

Hi, when the mouse hover the submit button, it turn to black again, can I know how to change to as same as the sign up button before and after the hover color.

There is a exclamation mark in line 44 and a red cross in line 68, please advise, thanks.

Attachments:
You must be logged in to view attached files.

April 24, 2018 at 6:36 am #54230

Elise Noromit
Member

Hello,

You have missed closing } that is why you saw the error, now it is fixed. Also, I added the style on hover.

Best Regards

April 24, 2018 at 2:27 pm #54341

ckluong3
Participant

Hi, thanks for the fixing.

When the required field is not filled up and hit the submit button, the button color will change back to black color, please advise, thanks.

Attachments:
You must be logged in to view attached files.

April 24, 2018 at 3:08 pm #54350
Elise Noromit
Member
Hello,

Please add this code:
```
[type=submit].btn-color-black:focus{
padding: 12px 20px;
    background-color: #bea163;
    display: inline-block;
    position: relative;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    -webkit-transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease;
    transition: color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,-webkit-box-shadow .25s ease;
}
```
Best Regards
April 25, 2018 at 2:59 pm #54562

ckluong3
Participant

Hi, after set up the contact form, some problems happen in the contact us page:

1. The left panel is disappear.
2. There is a big white space above the footer.
3. The thank you message not show up after submit a message.

Please advise, thanks.

Attachments:
You must be logged in to view attached files.

April 25, 2018 at 3:37 pm #54575

Elise Noromit
Member

Hello,

Enter the Contact page editing mode and disable sidebar on this page http://prntscr.com/ja09nc the content would be full width or fill the specified sidebar with the widgets.

The sidebar generates this gap between content and footer. If you remove sidebar everything will be ok.

Best Regards

April 25, 2018 at 3:59 pm #54588

ckluong3
Participant

Hi, i need the sidebar to show in my contact us page.

Previously it was ok, but suddenly it came out these problems.

Please advise, thanks.

April 25, 2018 at 4:29 pm #54599

Elise Noromit
Member

Hello,

Add widgets to your sidebar. The sidebar title you can see http://prntscr.com/ja09nc

In order to fill the sidebar with widgets go to Appearance > Widgets

Best Regards

April 25, 2018 at 5:29 pm #54618

ckluong3
Participant

Hi, what and why to fill the sidebar with widget? The sidebar is already filled with “page” widget.

I need the page with sidebar, not to disable it.
Please advise, thanks.

April 25, 2018 at 6:23 pm #54629

Elise Noromit
Member

Hello,

Just have a look at the screenshots as follows:

1/ Your page front end http://prntscr.com/ja2ogx

2/ Your page backend http://prntscr.com/ja2q7b

3/ This widget is set in the page, view #1

4/ This is your sidebar http://prntscr.com/ja2qrk fill it with other widgets or configure the page correctly.

In any way, sidebar takes its height and the gap in the bottom is generated by the sidebar.

Best Regards

April 26, 2018 at 1:51 am #54667

ckluong3
Participant

Hi, I managed to sort it out the problem as there is an additional closing tag </div> at the contact form’s code. Thanks.
Author

Posts