Please add a contact form control

shaulhadar
400 Posts
shaulhadar posted this 25 October 2014

Hello Themeler Team. I have another wish.
If you could add a contact form control it would be amazing. a contact form control could be really good, and it will ofcourse use the styles of the software and be easy to manage. This addition will eliminate problem with other cms's contact forms and such. and also if you will do the HTML version, a contact form will be a must to give the user full control of his site.

Thanks for your time and have a great day!!
Shaul.

Hello Themeler Team. I have another wish. If you could add a contact form control it would be amazing. a contact form control could be really good, and it will ofcourse use the styles of the software and be easy to manage. This addition will eliminate problem with other cms's contact forms and such. and also if you will do the HTML version, a contact form will be a must to give the user full control of his site. Thanks for your time and have a great day!! Shaul.
Vote to pay developers attention to this features or issue.
42 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 25 October 2014

Hi Shaul,
thank you for your suggestion. We'll consider ability of adding such control or improvement of styling for forms.

Regards,
Aileen

Hi Shaul, thank you for your suggestion. We'll consider ability of adding such control or improvement of styling for forms. Regards, Aileen
shaulhadar
400 Posts
shaulhadar posted this 15 April 2015

Hi All Themler Users, please vote for this feature, it is really important. If we have a form control that we could drag and drop straight from themler, it will be much easier working with forms, and every site has at least one form!! please vote so it will happen :)

Hi All Themler Users, please vote for this feature, it is really important. If we have a form control that we could drag and drop straight from themler, it will be much easier working with forms, and every site has at least one form!! please vote so it will happen :)
Krish
8 Posts
Krish posted this 16 April 2015

+100 for me. This is must for non coder.

+100 for me. This is must for non coder.
jonmestev
7 Posts
jonmestev posted this 18 August 2015

yes please :) joomla

yes please :) joomla

Last edited 18 August 2015 by jonmestev

Stagger Lee
1774 Posts
Stagger Lee posted this 30 August 2015

@shaul,

install Contact Form 7 plugin and use below code for native Themler Bootstrap contact forms. No need for CSS.

Lables left, inline with field.

<div class="form-horizontal">
    <div class="form-group"><label class="control-label col-md-3">Full Name</label><div class="col-md-9">[text* your-name class:form-control]</div></div>
    <div class="form-group"><label class="control-label col-md-3">Email Address</label><div class="col-md-9">[email* your-email class:form-control]</div></div>
    <div class="form-group"><label class="control-label col-md-3">Subject</label><div class="col-md-9">[text your-subject class:form-control]</div></div>
    <div class="form-group"><label class="control-label col-md-3">Message</label><div class="col-md-9">[textarea your-message x5 class:form-control]</div></div>
    <div class="form-group"><div class="col-md-offset-3 col-md-9">[submit class:btn class:btn-primary "Send"]</div></div>
</div>

Fields inline, very nice. As many examples on Themler demo themes:

<div class="row">
    <div class="col-md-6 form-group"><label class="sr-only">Full Name</label>[text* your-name class:form-control placeholder "Full Name"]</div>
    <div class="col-md-6 form-group"><label class="sr-only">Email Address</label>[email* your-email class:form-control placeholder "Email Address"]</div>
</div>
<div class="form-group"><label class="sr-only">Subject</label>[text your-subject class:form-control placeholder "Subject"]</div>
<div class="form-group"><label class="sr-only">Message</label>[textarea your-message x5 class:form-control placeholder "message"]</div>
<div class="form-group">[submit class:btn class:btn-primary "Send"]</div>

@shaul, install Contact Form 7 plugin and use below code for native Themler Bootstrap contact forms. No need for CSS. Lables left, inline with field. <div class="form-horizontal"> <div class="form-group"><label class="control-label col-md-3">Full Name</label><div class="col-md-9">[text* your-name class:form-control]</div></div> <div class="form-group"><label class="control-label col-md-3">Email Address</label><div class="col-md-9">[email* your-email class:form-control]</div></div> <div class="form-group"><label class="control-label col-md-3">Subject</label><div class="col-md-9">[text your-subject class:form-control]</div></div> <div class="form-group"><label class="control-label col-md-3">Message</label><div class="col-md-9">[textarea your-message x5 class:form-control]</div></div> <div class="form-group"><div class="col-md-offset-3 col-md-9">[submit class:btn class:btn-primary "Send"]</div></div> </div> Fields inline, very nice. As many examples on Themler demo themes: <div class="row"> <div class="col-md-6 form-group"><label class="sr-only">Full Name</label>[text* your-name class:form-control placeholder "Full Name"]</div> <div class="col-md-6 form-group"><label class="sr-only">Email Address</label>[email* your-email class:form-control placeholder "Email Address"]</div> </div> <div class="form-group"><label class="sr-only">Subject</label>[text your-subject class:form-control placeholder "Subject"]</div> <div class="form-group"><label class="sr-only">Message</label>[textarea your-message x5 class:form-control placeholder "message"]</div> <div class="form-group">[submit class:btn class:btn-primary "Send"]</div>
Stagger Lee
1774 Posts
Stagger Lee posted this 30 August 2015

Sorry, pasted not adapted code. Convert all numbers for "col-" to double. Bootstrap use 12 areas, Themler use 24.

Sorry, pasted not adapted code. Convert all numbers for "col-" to double. Bootstrap use 12 areas, Themler use 24.
shaulhadar
400 Posts
shaulhadar posted this 30 August 2015

Thanks Stagger! You are a Genius.

Thanks Stagger! You are a Genius.
shaulhadar
400 Posts
shaulhadar posted this 30 August 2015

Actually i tried it a few times, and it currently works for me only when pasting this inside the contact 7 form area in the wp backend. if i try to make it through a html control, or something like this, it doesn't populate it right away in themler. it only shows the html reference.

It does work great, but not inside themler.. where you able to do it inside themler with any special control other than html?

THanks..

Actually i tried it a few times, and it currently works for me only when pasting this inside the contact 7 form area in the wp backend. if i try to make it through a html control, or something like this, it doesn't populate it right away in themler. it only shows the html reference. It does work great, but not inside themler.. where you able to do it inside themler with any special control other than html? THanks..
Stagger Lee
1774 Posts
Stagger Lee posted this 30 August 2015

Yes, HTML code goes inside CF7 settings area. Adapt it after your needs.

Here is the code to get native Bootstrap icons inside fields, remove labels. I adapted to the Themler svg icons because Themler doesnt use glyphicons from Bootstrap. This one needs only few lines of code, targeted to not influence rest of the webiste. Give input fields right height in Themler, or try with auto or empty.

<div class="cf7-custom-wrapper">
<div class="form-group">
  <div class="input-group">
  [email* your-email class:form-control placeholder "Username"]
  <span class="input-group-addon"><i class="icon-envelope"></i></span>
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group">
  <div class="input-group">
  [email* your-email class:form-control placeholder "Email"]
  <span class="input-group-addon"><i class="icon-facebook"></i></span>
  </div>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group">
  <div class="input-group">
  [email* your-email class:form-control placeholder "Phone"]
  <span class="input-group-addon"><i class="icon-coffee"></i></span>
  </div>
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group">
  <div class="input-group">
    [email* your-email class:form-control placeholder "Subject"]
    <span class="input-group-addon"><i class="icon-headphones"></i></span>
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>


<div class="form-group">
    [textarea your-message placeholder "Message"]
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
</div>


<p>[submit class:btn class:btn-info "Send message"]</p>

CSS:

.cf7-custom-wrapper .form-group {margin:0;}
.cf7-custom-wrapper .form-group p {line-height: 1;margin: 0;}

Result:

http://attachments.answers.billiondigital.com/721/4721/2015-08-30-110458.jpg

Yes, HTML code goes inside CF7 settings area. Adapt it after your needs. Here is the code to get native Bootstrap icons inside fields, remove labels. I adapted to the Themler svg icons because Themler doesnt use glyphicons from Bootstrap. This one needs only few lines of code, targeted to not influence rest of the webiste. Give input fields right height in Themler, or try with auto or empty. <div class="cf7-custom-wrapper"> <div class="form-group"> <div class="input-group"> [email* your-email class:form-control placeholder "Username"] <span class="input-group-addon"><i class="icon-envelope"></i></span> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> </div> <div class="form-group"> <div class="input-group"> [email* your-email class:form-control placeholder "Email"] <span class="input-group-addon"><i class="icon-facebook"></i></span> </div> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> <span id="inputWarning2Status" class="sr-only">(warning)</span> </div> <div class="form-group"> <div class="input-group"> [email* your-email class:form-control placeholder "Phone"] <span class="input-group-addon"><i class="icon-coffee"></i></span> </div> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span> </div> <div class="form-group"> <div class="input-group"> [email* your-email class:form-control placeholder "Subject"] <span class="input-group-addon"><i class="icon-headphones"></i></span> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputGroupSuccess1Status" class="sr-only">(success)</span> </div> <div class="form-group"> [textarea your-message placeholder "Message"] <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputGroupSuccess1Status" class="sr-only">(success)</span> </div> </div> <p>[submit class:btn class:btn-info "Send message"]</p> CSS: .cf7-custom-wrapper .form-group {margin:0;} .cf7-custom-wrapper .form-group p {line-height: 1;margin: 0;} Result: ![http://attachments.answers.billiondigital.com/721/4721/2015-08-30-110458.jpg][1] [1]: http://attachments.answers.billiondigital.com/721/4721/2015-08-30-110458.jpg
Stagger Lee
1774 Posts
Stagger Lee posted this 30 August 2015

Inline validation errors for fields break things. Needs these 2 CSS rules to be added. Remove validation message under fields and use different background for failed validated fields. I would use border around fields but it is not possible to influence block with svg icon. It is vissible, this 1-2px difference, better to use different background to make failed field stick out.

input.wpcf7-not-valid {
    background: #f5f5f5 !important;
}
span.wpcf7-not-valid-tip {
    display: none;
}

Inline validation errors for fields break things. Needs these 2 CSS rules to be added. Remove validation message under fields and use different background for failed validated fields. I would use border around fields but it is not possible to influence block with svg icon. It is vissible, this 1-2px difference, better to use different background to make failed field stick out. input.wpcf7-not-valid { background: #f5f5f5 !important; } span.wpcf7-not-valid-tip { display: none; }
Stagger Lee
1774 Posts
Stagger Lee posted this 30 August 2015

Here is finished code, ready to use on websites:
Contact Form 7 backend settings:

[response]
<div class="cf7-custom-wrapper">


<div class="form-group">
  <div class="input-group">
   [text text-305 class:form-control placeholder "Username"]
  <span class="input-group-addon"><i class="icon-user"></i></span>
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>


<div class="form-group">
  <div class="input-group">
  [email* your-email class:form-control placeholder "Email"]
  <span class="input-group-addon"><i class="icon-envelope"></i></span>
  </div>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
</div>


<div class="form-group">
  <div class="input-group">
  [tel tel-277 class:form-control placeholder "Phone"]
  <span class="input-group-addon"><i class="icon-phone"></i></span>
  </div>
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</div>


<div class="form-group">
  <div class="input-group">
    [text text-349 class:form-control placeholder "Subject"]
    <span class="input-group-addon"><i class="icon-question-circle"></i></span>
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>


<div class="form-group text-area-form-group">
    [textarea textarea-621 placeholder "Message"]
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>


</div>
[response]
<p>[submit class:btn class:btn-info "Send message"]</p>

Custom CSS:

.cf7-custom-wrapper {margin:0; padding:0;}
.cf7-custom-wrapper .form-group {margin:0 0 10px 0;}
.cf7-custom-wrapper .form-group p {line-height: 1;margin: 0;}
.cf7-custom-wrapper .text-area-form-group {margin:0;}
.cf7-custom-wrapper input.wpcf7-not-valid {
    background: #f5f5f5 !important;
    color:#fff;
}
.cf7-custom-wrapper span.wpcf7-not-valid-tip {
    display: none;
}


div.wpcf7-validation-errors {
    background: #d9534f;
    border: none;
    color: #f5f5f5;
}


div.wpcf7-response-output {
    margin: 0 0 15px 0;
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
}

Here is finished code, ready to use on websites: Contact Form 7 backend settings: [response] <div class="cf7-custom-wrapper"> <div class="form-group"> <div class="input-group"> [text text-305 class:form-control placeholder "Username"] <span class="input-group-addon"><i class="icon-user"></i></span> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> <div class="form-group"> <div class="input-group"> [email* your-email class:form-control placeholder "Email"] <span class="input-group-addon"><i class="icon-envelope"></i></span> </div> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> </div> <div class="form-group"> <div class="input-group"> [tel tel-277 class:form-control placeholder "Phone"] <span class="input-group-addon"><i class="icon-phone"></i></span> </div> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> </div> <div class="form-group"> <div class="input-group"> [text text-349 class:form-control placeholder "Subject"] <span class="input-group-addon"><i class="icon-question-circle"></i></span> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> <div class="form-group text-area-form-group"> [textarea textarea-621 placeholder "Message"] <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> </div> </div> [response] <p>[submit class:btn class:btn-info "Send message"]</p> Custom CSS: .cf7-custom-wrapper {margin:0; padding:0;} .cf7-custom-wrapper .form-group {margin:0 0 10px 0;} .cf7-custom-wrapper .form-group p {line-height: 1;margin: 0;} .cf7-custom-wrapper .text-area-form-group {margin:0;} .cf7-custom-wrapper input.wpcf7-not-valid { background: #f5f5f5 !important; color:#fff; } .cf7-custom-wrapper span.wpcf7-not-valid-tip { display: none; } div.wpcf7-validation-errors { background: #d9534f; border: none; color: #f5f5f5; } div.wpcf7-response-output { margin: 0 0 15px 0; padding: 15px; border-radius: 5px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
shaulhadar
400 Posts
shaulhadar posted this 31 August 2015

Thanks stagger, this is very helpful! cf7 is the best form plugin for wordpress, and your code helps me put some premium looking forms :)

Thanks stagger, this is very helpful! cf7 is the best form plugin for wordpress, and your code helps me put some premium looking forms :)
Stagger Lee
1774 Posts
Stagger Lee posted this 31 August 2015

I explore Bootstrap secrets.

Just excluded one accordion plugin from future use, Why use a plugin when everything exist in Bootstrap. This plugin needed all custom CSS and much of it.

Tabs, panels/accordions, etc...

Best part of it it is manipulated with classes only. Perfect for CMS Code controls.
It is not easy allways to put PHP code inside shortcode bracket. Many times it has to be done in very special way depending how plugin is good. I even used Shortcode PHp Exec plugin. not anymore, dont need it. All code is hidden from Users, they cannot destroy anything and you use just Bootstrap divĀ“s and classes, no messy PHP output of shortocodes and content inside.

I explore Bootstrap secrets. Just excluded one accordion plugin from future use, Why use a plugin when everything exist in Bootstrap. This plugin needed all custom CSS and much of it. Tabs, panels/accordions, etc... Best part of it it is manipulated with classes only. Perfect for CMS Code controls. It is not easy allways to put PHP code inside shortcode bracket. Many times it has to be done in very special way depending how plugin is good. I even used Shortcode PHp Exec plugin. not anymore, dont need it. All code is hidden from Users, they cannot destroy anything and you use just Bootstrap div´s and classes, no messy PHP output of shortocodes and content inside.
shaulhadar
400 Posts
shaulhadar posted this 31 August 2015

Exactly Stagger, I am waiting when themler will give us controls for accordions, tabs, panelts, modals and such, this could be great, and as you said, the code is already there, so only need to make the control, i hope it will come soon :)

Exactly Stagger, I am waiting when themler will give us controls for accordions, tabs, panelts, modals and such, this could be great, and as you said, the code is already there, so only need to make the control, i hope it will come soon :)
Stagger Lee
1774 Posts
Stagger Lee posted this 31 August 2015

Themler decided to remove many Bootstrap options.
Difference is only 10 kB, not even worth mention. Specially with header expires added to .htaccess.
39 kB original Bootstrap JS with all functions and options, 29 kB Themler Bootstrap JS.

I tried to add those JS snippets in particular block self, in hidden footer HTML control, in Additional settings for Head, in custom functions.php. But Themler and website refuse to use it. Maybe I did something wrong, it was just 2-3 examples.
Maybe it needs some special adapting to the WordPress.

Themler decided to remove many Bootstrap options. Difference is only 10 kB, not even worth mention. Specially with header expires added to .htaccess. 39 kB original Bootstrap JS with all functions and options, 29 kB Themler Bootstrap JS. I tried to add those JS snippets in particular block self, in hidden footer HTML control, in Additional settings for Head, in custom functions.php. But Themler and website refuse to use it. Maybe I did something wrong, it was just 2-3 examples. Maybe it needs some special adapting to the WordPress.

Last edited 31 August 2015 by Stagger Lee

willatin1
2 Posts
willatin1 posted this 05 January 2016

Hi All Themler Users, please vote for this feature, it is really important. If we have a form control that we could drag and drop straight from themler, it will be much easier working with forms, and every site has at least one form!! please vote so it will happen :)

It would be great to have the contact form ability, also, could you make a tutorial to add a lead capture form in the header or next to the slider. I am creating websites for local businesses and the lead capture form there is a big plus

> Hi All Themler Users, please vote for this feature, it is really important. If we have a form control that we could drag and drop straight from themler, it will be much easier working with forms, and every site has at least one form!! please vote so it will happen :) It would be great to have the contact form ability, also, could you make a tutorial to add a lead capture form in the header or next to the slider. I am creating websites for local businesses and the lead capture form there is a big plus
shaulhadar
400 Posts
shaulhadar posted this 05 January 2016

I agree, I am waiting for this kind of functionality... there are great forms made with bootstrap, and there are lots of options to make good lead capture forms.

I really think this would add a lot to themler :)

and in HTML sites, it will make themler build whole sites with almost all functionality inside themler without the need to add all sorts of additional code..

I agree, I am waiting for this kind of functionality... there are great forms made with bootstrap, and there are lots of options to make good lead capture forms. I really think this would add a lot to themler :) and in HTML sites, it will make themler build whole sites with almost all functionality inside themler without the need to add all sorts of additional code..

Last edited 05 January 2016 by shaulhadar

Stagger Lee
1774 Posts
Stagger Lee posted this 07 January 2016

Shaul, all this is in my taste. But keep in mind no company will hire extra developers just because we have wishlists.
Translated it means each wishlist HAS TO take time from something else they are doing.

All CMS has tonvis of contact form addons.

Fot HTML I agree completely.
Right now there is no option to make contact form of any kind.

Shaul, all this is in my taste. But keep in mind no company will hire extra developers just because we have wishlists. Translated it means each wishlist HAS TO take time from something else they are doing. All CMS has tonvis of contact form addons. Fot HTML I agree completely. Right now there is no option to make contact form of any kind.

Last edited 07 January 2016 by Stagger Lee

shaulhadar
400 Posts
shaulhadar posted this 07 January 2016

Hi Stagger, you are right :) i mostly use wordpress and cf7 ofcourse. it is mainly for the html sites...

I know that themler has tons of stuff to work on, i can wait for the real important stuff before...

I believe in themler team, they have made a software that does almost everything i ever needed, so a few bugs are a modest payment for me as a user.

Hi Stagger, you are right :) i mostly use wordpress and cf7 ofcourse. it is mainly for the html sites... I know that themler has tons of stuff to work on, i can wait for the real important stuff before... I believe in themler team, they have made a software that does almost everything i ever needed, so a few bugs are a modest payment for me as a user.
Stagger Lee
1774 Posts
Stagger Lee posted this 07 January 2016

I think we need one topic with poll, with multiple options, for all wishlists not done right now. One poll where we can see who voted for what, and disregard all users who vote for all features as not serious.

Point is to see what people need most and first. Voting for all options (I myself do it sometimes) is not serious and not saying what community needs right now.

Maybe one poll with max 3 (choices) options among many of them, to see what Themler Users need most now. This forum doesnt support polls, as I know.

I think we need one topic with poll, with multiple options, for all wishlists not done right now. One poll where we can see who voted for what, and disregard all users who vote for all features as not serious. Point is to see what people need most and first. Voting for all options (I myself do it sometimes) is not serious and not saying what community needs right now. Maybe one poll with max 3 (choices) options among many of them, to see what Themler Users need most now. This forum doesnt support polls, as I know.

Last edited 07 January 2016 by Stagger Lee

You must log in or register to leave comments