I am running the latest version of contact form 7 on my site and all of the forms are working flawlessly except one. I keep getting the message "Failed to send your message.
Please try later or contact the administrator by another method." I haven't come across any errors in the console and have tried everything from deleting the entire plugin and re-entering all the forms to deleting and recreating the problem form. I have tried all the troubleshooting suggestions I could find.
I am at a complete loss if anyone has any suggestions it would be incredibly helpful.
The form is located at: http://test.drummerrealty.com/management-services/#inquiries.
Here is the code:
Form:
Contact Information
<div class="row">
<div class="col-md-3 col-sm-12">
<p>First Name *<br />
[text* first-name] </p>
<p>Last Name *<br />
[text* last-name] </p>
</div>
<div class="col-md-3 col-sm-12">
<p>Your Email *<br />
[email* your-email] </p>
<p>Telephone *<br />
[tel* tel-819]</p>
</div>
<div class="col-md-3 col-sm-12">
<p>Property Address<br />
[text address]</p>
<p>City<br />
[text city]</p>
</div>
<div class="col-md-3 col-sm-12">
<p>Province<br />
[text province]</p>
<p>Postal Code<br />
[text postal-code]</p>
</div>
<h3>Property Information</h3>
<div class="row">
<div class="col-md-6 col-sm-12">
<p>Property Class:<br />
[select property use_label_element "Condominium" "Townhome" "Single Family Dwelling" "Apartment Block"]</p>
<p>Year Built<br />
[number build-year min:1900 max:3500]</p>
<p>Number of Bedrooms:<br />
[select num-bed "1" "2" "3" "4" "5+"]</p>
<p>Number of Bathrooms:<br />
[select num-bath "1" "1.5" "2" "2.5" "3" "3.5" "4" "4.5" "5+"]</p>
<p>When do you plan to lease this property? (yyyy-mm-dd)<br />
[date date-lease] </p>
</div>
<div class="col-md-6 col-sm-12">
<p>Style & Features<br />
[checkbox features use_label_element "Bungalow" "2-storey" "Apartment" "Walk-out Basement" "Gated Community" "Parking " "Attached Garage" "Detached Garage"]</p>
<p>Square Footage<br />
[number sq-foot]</p>
</div>
<div class="row">
<div class="col-sm-12">
<p>Additional Details<br />
[textarea add-details] </p>
<p>[submit "Send"]</p>
</div>
Mail:
From: [first-name] [last-name]
Subject: Property Management form from [first-name] [last-name]
Message body:
Contact Information
First Name: [first-name]
Last Name: [last-name]
Your Email: [your-email]
Telephone: [tel-819]
Property Address: [address]
City: [city]
Province: [province]
Postal Code: [postal-code]
Property Information
Property Class: [property]
Style & Features: [features]
Square Footage: [sq-foot]
Year Built: [build-year]
Number of Bedrooms: [num-bed]
Number of Bathrooms: [num-bath]
When do you plan to lease this property?: [date-lease]
Additional Details: [add-details]
Related
I have some tabs that are used for my apps navigation. Each tab displays a different data table and is a different route. However, when a user selects some filters and an api call is made, the tab that is currently selected goes to the default and doesn't stay with the current tab after the data is loaded.
How can I keep the current tab selected after an api call to the backend?
I thought about either session or localStorage, but I'm not sure how I would target the checked attribute on the input field and how to restore it after the reload/refresh.
Here's some a sample of my template code with the tabs:
<div class="tab">
<input
type="radio"
checked
name="css-tabs"
id="tab-1"
class="tab-switch"
/>
<label
for="tab-1"
class="tab-label"
#click="$router.push('/route-1')"
>
Route - 1</label
>
<div class="tab-content">
<router-view :key="$route.path" />
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch" />
<label
for="tab-2"
class="tab-label"
#click="$router.push('/route-2')"
>
Route-2</label
>
<div class="tab-content">
<router-view :key="$route.path" />
</div>
</div>
I solved this by refactoring the tab code in the template
<div class="tabs">
<div class="tab" v-for="(tab, index) in tabs" :key="tab.id">
<input
type="radio"
:name="tab.name"
:id="tab.id"
class="tab-switch"
:checked="tab.checked"
#change="updatedActiveTab(index)"
/>
<label
:for="tab.id"
class="tab-label"
#click="$router.push(tab.path)"
>
{{ tab.label }}</label
>
<div class="tab-content">
<router-view :key="$route.path" />
</div>
And then created a function to change the checked property to the selected tab as true and all others to false.
tabs.value.forEach((elem, idx) => {
elem.checked = idx == index;
});
sessionStorage.tabs = JSON.stringify(tabs.value);
}
Need help on issue related to Asp.Net Core MVC in the below screenshot as i sumbit the query the view is returned but the title of the msg "Error" is coming as i want to only render only success message, Thanks...
Please refer the screenshot attached to have more clearity on issue
Below is my form code
<form action="/ContactUs/ContactSubmitQuery" method="post" role="form" class="php-email-form" asp-antiforgery="true">
#Html.AntiForgeryToken()
<div class="form-row">
<div class="col-lg-6 sm-6 form-group">
<label>Name</label>
<input type="text" name="cname" class="form-control input-css click-cg textbox" id="cname" placeholder="Name"
data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
<div class="col-lg-6 sm-6 form-group">
<label>Email</label>
<input type="email" class="form-control input-css click-cg textbox" name="email" id="email" placeholder="Email"
data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control click-cg textbox" name="description" rows="5" data-rule="required"
data-msg="Please write something for us" placeholder="Description"></textarea>
<div class="validate"></div>
</div><br>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send</button></div>
</form>
and below is my controller code where am using OK to return success message once the email is sent
public IActionResult ContactSubmitQuery()
{
string name = Request.Form["cname"];
string email = Request.Form["email"];
string message = Request.Form["description"];
string htmlContent = string.Format("name:{0} <br/> email:{1} <br/> message:{2}", name, email, message);
SendEmail send = new SendEmail("Test Contact", EmailType.Single);
send.Send(htmlContent);
//return Ok("Your Query submitted Successfully");
return Ok(RedirectToAction("SuccessMessage"));
}
How do I set clr-error when the input is invalid. I've set the input field to be required.
But on page load the clr-control-error message always shows and the exclamation-circle never shows even when i click into input and click away
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-4">
<div class="clr-input-wrapper">
<clr-icon shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-control-error>Search Input is required</clr-control-error>
</div>
</div>
</div>
</form>
what you've got is the HTML/CSS version of form controls, which don't have built in validation. We've not yet created an input-group functionality that also works with Angular, so you'll have to manually toggle the display of the error message. You can see a few demos of this here: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html
Here is a demo based on your example of something that works with our markup, but currently requires some manual effort on your end. Eventually this will be supported in an Angular component, but not at the moment.
https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
<div class="clr-input-wrapper">
<div class="clr-input-group">
<clr-icon class="" shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
</div>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
</div>
</div>
</div>
</form>
Every letter entered in the username textbox is read twice by JAWS.
JAWS version - 18
Browser - Chrome
Code:
<!-- Text input-->
<div class="form-group">
<label class="smalltext" for="email">{{ 'sign.email' | translate }}</label>
<input id="email" name="emailaddress" ng-model="login.user.username" type="email" placeholder="Email" class="form-control input-md smalltext" required autocomplete="new-username">
<!-- ff solution not to remeber credentials -->
<input type="text" class="hidden">
<p class="danger" ng-show="(loginform.$submitted) && loginform.emailaddress.$error.required" class="help-block" aria-live="polite">{{ 'el_txt_validateUsername' | translate }}.</p>
<p class="danger" ng-show="(loginform.$submitted) && loginform.emailaddress.$error.email" class="help-block" aria-live="polite">Please enter the email address in a valid format.</p>
</div>
I have downloaded this fantastic web template called Brushed. It is heavy on css, which I am not too familiar with. I have managed to complete my personal webpage through trial and error, however, I am unable to get the CONTACT FORM to work through my servers.
The code from the template.
<!-- Contact Form -->
<div class="row">
<div class="span9">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a id="contact-submit" class="submit" href="mailto:info#elementsglobal.in">Submit</a>
</p>
<div id="response">
</div>
</form>
Any help would be greatly appreciated.
Thank you.
You need to create a resource (e.g. uri) that you can post your form to on your server. That is, you need to change the following
<form id="contact-form" class="contact-form" action="#">
to something like this
<form id="contact-form" class="contact-form" action="/contact/create">
And, you need to add a resource at "/contact/create" in your server that would parse form variables that are passed in from the post request, and do your thing (either save it to the database table or send yourself an email.
I hope this makes sense.
The contact form wont work because you have the action set to # and you dont have a method of sending the data. So unless you are grabbing this data another way that you dont have posted you should start by fixing these
<form id="contact-form" class="contact-form" action="#"/*Fix this*/ method="post">