Letters come with all the fields filled in, but when I click the email client "answer" button reply-to address is taken from the field emailFrom. Why?
&hooks=`email,redirect`
&emailTpl=`MyEmailChunk`
&emailTo=`ask#ru7lan.ru`
&emailFrom=`ask#ru7lan.ru`
&emailReplyTo=`[[+email]]`
https://docs.modx.com/extras/revo/formit/formit.hooks/formit.hooks.email
emailReplyTo - An email to set as the reply-to. If not set, will
first look for an 'email' form field. If none is found, will default
to value set in 'emailFrom'.
Check your [[+email]] placeholder - maybe he is empty.
With the comment posted here, I think that the ID of your form input is missing:
this is my input/...
<!-- Text input--> <div class="form-group">
<label class="pull-left col-md-4 control-label">E-Mail</label>
<div class="col-md-4 col-sm-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" value="[[!+fi.email]]" placeholder="anna#mail.ru" class="form-control" type="text" >
</div> </div> </div>
Place an id="email" into the html tag and it should work.
Related
When I use a text-input type , i can just give it a value and use that, even on another page
example:
<input type="text" class="form-control" name="name" value="<?php echo $row['name'];?>">
Can I do the same with a textarea?
example :
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
This is my code in where I retrieve an existing row of information from a given ID. The info consists of a name, emailaddress and comments :
<form method="post">
<div class="row gy-2 text-left">
<div class="row">
<div class="col-auto gy-2">
<label>Name</label> <br>
<input type="text" class="form-control" name="name" value="<?php echo $row['naam'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Email address</label><br>
<input type="email" class="form-control" name="email" value="<?php echo $row['email'];?>">
</div>
</div>
<div class="row">
<div class="col-auto gy-2">
<label>Tell me about it</label><br>
<style>
textarea {resize: none;}
</style>
<textarea class="form-control" rows="3" cols="123" name="comments" value="<?php echo $row['comments'];?>" ></textarea>
</div>
<div class="row">
<div class="col-auto gy-3">
<button class="btn edit btn-info border border-dark" name="Update">Update</button>
</div>
</div>
</div>
</form>
For the textarea element, it goes between <textarea> and </textarea> tags:
<textarea><?php echo $row['comments'];?></textarea>
The <textarea> element does not use an HTML attribute named value like the <input> element does.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
However, when the HTML markup which contains a textarea element is parsed by the browser, an HTMLTextAreaElement object is created. This DOM element object, which represents the state of the textarea element on the web page does have a JavaScript object property named .value, which gives access via JavaScript to the text which the textarea element contains.
This JavaScript code logs the text that is contained in a textarea element:
console.info(document.querySelector('textarea').value);
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement
I try to create a simple contact form, but I didn't get any message, the post request is made. I am pretty new with Modx.
What I tried:
Link 1
Link 2
I created 2 Chunks (emailChunkTpl and MyEmailChunk), and in my template I call for the [[$MyEmailChunk]]. Obviously I did something wrong but I am not sure what. The code is like in the examples, but with some changes,like my email.
[[!FormIt?
&hooks=`email,FormItSaveForm `
&emailTpl=`emailChunkTpl`
&emailTo=`myEmail#gmail.com`
&emailUseFieldForSubject=`1`
]]
<form action="[[~[[*id]]]]" method="post" class="contactForm">
<div class="row input-section-child">
<div class="col input-contact">
<input value="[[!+fi.input-name]]"class="input-name" name="input-name" id="input-name" type="text" placeholder="your name" />
<input value="[[!+fi.input-email]]" class="input-email" name="input-email" id="input-email" type="text" placeholder="email address" />
</div>
<div class="col input-contact-text">
<input value="[[!+fi.input-textare]]"class="input-textare" name="input-textare" id="input-textare" type="textare" placeholder="message" />
</div>
</div>
<div class="row second-row">
<div class="col checkbox">
<input value="[[!+fi.input-checkbox]]" class="input-checkbox" name="input-checkbox" id="input-checkbox" type="checkbox" ><span class="input-checkbox-span">I agree to the Privacy policy.</span>
</div>
<div class="col">
<button type="submit" class="send-button">SEND</button>
</div>
</div>
<a href="#intro" class="back-to-top"><img src="images\arrow-back.svg" /><span>Back to top</span>
</div>
</from>
You should start with cleaning up your markup, it is not valid HTML. There is a typo in your closing form tag (/from), an extra closing div tag, there is no input type of textare as far as I know, and you are missing white space around some classes. You can validate HTML here: https://validator.w3.org/
You can test to make sure your site is setup properly to send an email. There is a snippet for this called QuickEmail, download it from the extras tab in the MODX manager.
Once you're sure your site can send email, then start with a stripped down version of the Formit call -- remove all hooks except email and get it working with that first. Then add hooks one at a time.
<form (ngSubmit)="submit(feedbackForm)" #feedbackForm="ngForm">
<div class="form-group" *ngFor="let ques of questions;">
<label for="comment">{{ques.question}}</label>
<textarea
class="form-control"
rows="5"
id = "comment"
name="feedbackAnswers"
ngModel
required>
</textarea>
</div>
<button
type="submit"
class="btn btn-info"
*ngIf=!sendingEmail
[disabled]="!feedbackForm.valid">Save</button>
</form>
on ,
console.log(feedbackForm),
the 'values' property only shows first input. How can I get an array having name i.e 'feedbackAnswers' and having value what use did input.
You have to make the name attribute unique so that the template driven form will create a control for each input in the loop... try the following change. [name]="ques.question"
<form (ngSubmit)="submit(feedbackForm)" #feedbackForm="ngForm">
<div class="form-group" *ngFor="let ques of questions;">
<label for="comment">{{ques.question}}</label>
<textarea
class="form-control"
rows="5"
id = "comment"
[name]="ques.question"
ngModel
required>
</textarea>
</div>
<button
type="submit"
class="btn btn-info"
*ngIf=!sendingEmail
[disabled]="!feedbackForm.valid">Save</button>
</form>
I'm trying to make a modal reveal for every Edit button just when i clicked onto the Edit button it doesnt open i did as mentionned onto the documentation for Foundation 6 .Here is my code.Please any help.
<ul class="button-group">
i give to every reveal modal an id based on the field id with that i would have
different ids and linked every Edit button with its modal
<li>
<a class="button tiny" data-open="editModal<?php echo $contact->id ;?>"
data-contact-id="<?php echo $contact->id;?>">Edit</a>
<!-- the modal edit start here -->
<div class="reveal large editmodal" id="editModal<?php echo $contact->id ;?>"
data-cid="<?php echo $contact->id ;?>" data-reveal>
<div class="grid-x grid-margin-x">
<div class="cell large-12"><h1>Edit Contact</h1></div>
</div>
form of the edit modal
<form action="#" id="editadress" method="post">
<div class="grid-x grid-margin-x">
<div class="cell large-6">
first name input field
<label>First Name
<input type="text" name="first_name" placeholder="Enter Your First Name"
value="<?php echo $contact->first_name; ?>">
</label>
</div>
<div class="cell large-6">
last name input field
<label>Last Name
<input type="text" name="last_name" value="<?php echo $contact->last_name; ?>"
placeholder="Enter Your Last Name">
</label>
</div>
</div>
submit button of the form
<div class="grid-x grid-margin-x">
<div class="cell large-12">
<input class="button big abutton right small" name="submit" type="submit" value="Submit"/>
</div>
</div>
</form>
close button of the modal
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!--The modal edit ends here-->
</li>
<li>
<a class="button alert tiny">Delete</a>
</li>
</ul>
After having removed critical features such as input-xlarge and input-large, what is the substitution for it in bootstrap 3?
Of course I could use col-lg-12 etc but that is giving an error in tab pane.
I could also use style = "width:30px;" but then It would loose its responsiveness unlike input-xlarge.Any suggestions etc?
In Bootstrap 3, .form-control (the class you give your inputs) has a width of 100%, which allows you to wrap them into col-lg-X divs for arrangement. Example from the docs:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
See under Column sizing.
It's a bit different than in Bootstrap 2.3.2, but you get used to it quickly.
You can use these classes
input-lg
input
and
input-sm
for input fields and replace input with btn for buttons.
Check this documentation http://getbootstrap.com/getting-started/#migration
This will change only height of the element, to reduce the width you have to use grid system classes like col-xs-* col-md-* col-lg-*.
Example col-md-3. See doc here http://getbootstrap.com/css/#grid
<form role="form">
<div class="form-group">
<div class="col-xs-2">
<label for="ex1">col-xs-2</label>
<input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
<label for="ex2">col-xs-3</label>
<input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
<label for="ex3">col-xs-4</label>
<input class="form-control" id="ex3" type="text">
</div>
</div>
</form>
i solved with a max-width in my main css-file.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a simple solution with little "code"
<div class="form-group">
<div class="input-group col-md-5">
<div class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</div>
<input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">
</div>
<input type="button" name="SIGNUP" value="SIGNUP">
</div>