- This topic has 7 replies, 2 voices, and was last updated 7 years, 1 month ago by
.
Hi there,
about included Contact Form we can pick using Page Builder – we can set emailaddress to fdeliver a submitted form. Unfortunately during testing no email comes in to our inbox. So do we need to install a Contact Form 7 plugin or smtp plugin?
Another question about this element, when we hit Submit button, we see the success message – in a GREEN color. Where can we edit this color so it matches our color scheme?
Gravity forms
If not working perfectly, we want to use our Gravity Form license. But we installed the plugin, but from your Page Builder it is not listed as an element to drag and driop into page. How can we use it? Plain text and post the shortcode provided by Gravity form?
But hten how can we be sure the gravity form will be styled same as your Contact Form? Where or waht to edit / custom code pasting?
Hi @christiaanvr,
I hope you are well today and thank you for your questions.
about included Contact Form we can pick using Page Builder – we can set emailaddress to fdeliver a submitted form. Unfortunately during testing no email comes in to our inbox. So do we need to install a Contact Form 7 plugin or smtp plugin?
Please configure the contact form element settings as shown in the attached screenshot.
Another question about this element, when we hit Submit button, we see the success message – in a GREEN color. Where can we edit this color so it matches our color scheme?
Yes we can change this color using CSS code.
Could you please share me the page URL from your site where it is displaying so that i can help you to achieve it?
If not working perfectly, we want to use our Gravity Form license. But we installed the plugin, but from your Page Builder it is not listed as an element to drag and driop into page. How can we use it? Plain text and post the shortcode provided by Gravity form?
Yes you have to use the shortcode of it.
But hten how can we be sure the gravity form will be styled same as your Contact Form? Where or waht to edit / custom code pasting?
We have to style it developing custom CSS code to match the style.
Best regards,
Shufflehound teamHi there, thanks for answering.
I missed the SMTP setting in your element settings. Thanks for that!
The url for the success message is here > http://www.storescan.eu/contact/
For gravity form styling same as your form – should I setup a test page with a gravity form so you can create the custom css for the gravity form styling? I will make sure it has all the fields we want to use – fieldtypes.
The url will be http://www.storescan.eu/test – as you see input fields are not alligned next to each other, are higher – so I would like same styling as you have done with your form element.
Thanks in advance!
Solution for this topic
Another question about this element, when we hit Submit button, we see the success message – in a GREEN color. Where can we edit this color so it matches our color scheme?
The url for the success message is here > http://www.storescan.eu/contact/
You can change its color by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.fw-flash-message { color: #00b0c3; }Please change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.aspFor gravity form styling same as your form – should I setup a test page with a gravity form so you can create the custom css for the gravity form styling? I will make sure it has all the fields we want to use – fieldtypes.
The url will be http://www.storescan.eu/test – as you see input fields are not alligned next to each other, are higher – so I would like same styling as you have done with your form element.
Use below custom CSS code to style it.
@media (min-width: 768px){ #field_2_7, #field_2_6, #field_2_5, #field_2_4, #field_2_3, #field_2_2 { float: left; width: 50%; clear: none; } #field_2_7 select, #field_2_7 input, #field_2_6 input, #field_2_5 input, #field_2_4 input, #field_2_3 input, #field_2_2 input{ width: 100%; } #field_2_6{ clear: both; } } #gform_fields_2 select{ border: 1px solid #e3e3e3; background: #fff; } #gform_fields_2 input { line-height: 40px!important; border: 1px solid #e3e3e3; background: #fff; }Wow thanks for your support my friend. I really appreciate it – but now one last styling issue regarding Gravity forms:
I want same heading color and ‘input color’ for the text input – as you provide in settings for the included form element. And the ” check icon’ for required fields.. as well the same color and styling for the SUBMIT button at the and.
Compare storescan.eu/contact with storescan.eu/test – and you understand what I mean
Solution for this topic
Use the below custom CSS code to achieve this.
#gform_2 label.gfield_label { font-size: 15px; color: #3f3f3f; } #gform_2 label.gfield_label:after { font-family: 'simple-line-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; content: "\e080"; font-size: 14px; padding-left: 5px; color: #47c9e5; } #gform_2 span.gfield_required { display: none; } #gform_2 textarea, #gform_2 input{ color: #00b0c3; } input#gform_submit_button_2{ width: 100%; color: #fff; font-weight: bold; border-width: 0; background-color: #15bee4!important; border-radius: 100px!important; line-height: 50px!important; padding: 0 30px!important; transition: 0.25s all ease-in-out; }Many thanks! I really appreciate it – and support is perfect.
Thanks againg.
You are most welcome here 🙂
