I am trying to teach myself RoR and am building a site, and want to include a contact form, with "Persons Email" "Subject" and "Message", then a submit button, which will send an email to my email address.
I can't find a simple straightforward guide for beginners for rails 4 that goes through this step by step. So if anyone knows of one or is willing to create a guide, it would be greatly appreciated.
Currently I only have done the visual part, now need to get it to actually send the emails:
<form class="form-horizontal" id="contact-form">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name" class="form-control input-lg ">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address" class="form-control input-lg">
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" class="form-control input-lg"></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-default btn-lg btn-block">Submit Message</button>
</div>
</form><!-- End contact-form -->
Catch this - link to a Getting Started with Rails. This guide will show you how to create a simple app. I believe, you will be able to make your contact form after that. And about sending mails - here's a guide to Action Mailer Basics. It will teach you how to send emails from Rails application.
With power of these guides combined, you'll be able to accomplish your task :)
In case it's useful to you (or anyone else), this is a straight forward guide to making a contact form but in rails 5 (and in production too, which is handy, not just development). Not sure how it goes for rails 4
Related
I am trying to design the contact us page in asp.net mvc. I would like to build a contact us form that also work as to send email to our email. This is the code in of front end; it is a design of form but I just copy this from a template. Can any body guide me to how to make it work or highlight any mistakes?
//code
<div class="contact-form">
<h2>Contact Us</h2>
<form method="post" action="contact-post.html">
<div>
<span><label>Name</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-mail</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>Mobile</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>Subject</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" class="" value="Submit us"></span>
</div>
</form>
</div>
I am trying to submit a form in a bootstrap framework and cannot get past the validation, even with correct data.
I think there might be an error with this syntax,
<form name=form1 method=post action=signupck.php onsubmit='return validate(this)'><input type=hidden name=todo value=post>
then the form fields... which all display correctly - so no problems there - in the style:
<div class="row">
<div class="col-xs-2">
<label for="fname">Forename</label>
<input type="text" class="form-control" id="fname" placeholder="Forename"><br></br>
</div>
<div class="col-xs-2">
<label for="sname">Surname</label>
<input type="text" class="form-control" id="sname" placeholder="Surname">
</div>
</div>
and then,
<input type=submit value=Signup>
<input type="reset" class="btn btn-default" value="Reset">
The form on submission displays signupck.php, signalling validation messages when is should be submitted ok. I have got this working outside the bootstrap, but when I put this inside the template, in the form above, I get the problems.
Any help would be most appreciated.
I am using the acts-as-taggable gem in a Rails 4 app with an angular frontend. If I use the console it works fine. I have done all the obvious things and I can get it to work by adding this to the create controller:
if params[:tag_list]
droplet.tag_list.add(params[:tag_list], parse: true)
end
The problem is that it should be doing this anyway. Does anyone have any insight as to why it is simply not firing the tag_list.add method automatically? I am uncomfortable using this hack to get it to work.
And yes, I have added :tag_list to the strong parameters.
Update: The form html
<form ng-submit="createNewDropletForm.$valid && createNewDroplet()" name="createNewDropletForm" novalidate>
<div class="form-group">
<label for="name">Title:</label>
<input ng-keyup="keyup()" ng-model="drop.name" ng-model-options="{ debounce: 500 }" type="text" class="form-control" placeholder="Add Droplet Title Here" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea class="form-control" rows="4" ng-model="drop.description" placeholder="Add helpful description of what this droplet tests." required></textarea>
</div>
<div class="form-group">
<label for="tags">Tags:</label>
<input class="form-control" ng-model="drop.tag_list" placeholder="add tags separated by commas">
</div>
<button type="submit" class="btn btn-default">Next</button>
</form>
I am having some very strange behaviour with Capybara. It stubbornly refuses to fill in the fields of my login form.
<fieldset>
<div class="clearfix">
<label for="user_email">E-Mail Adresse</label>
<div class="input">
<input id="user_email" name="user[email]" size="30" type="email" value="">
</div>
</div>
<div class="clearfix">
<label for="user_password">Passwort</label>
<div class="input">
<input id="user_password" name="user[password]" size="30" type="password" value="">
</div>
</div>
<div class="clearfix">
<div class="input">
<input name="user[remember_me]" type="hidden" value="0">
<input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1">
<label for="user_remember_me">angemeldet bleiben</label>
</div>
</div>
</fieldset>
And here is where the fun begins:
within("#login_form"){ find("#user_email")}
=> #<Capybara::Element tag="input" path="/html/body/div[2]/div[#id='content']/div/div[1]/form[#id='login_form']/fieldset/div[1]/div/input[#id='user_email']">
within("#login_form"){ fill_in("#user_email", with: "foo#example.com")}
Capybara::ElementNotFound: Unable to find field "#user_email"
I don't quite understand how it is possible to be able to find, and yet not find, an element.
Another pair of eyes on this would be appreciated.
The locator for find and fill_in are different:
find - When the first parameter is not a symbol, it is assumed to be the Capybara.default_selector - ie a css-selector or xpath.
fill_in - The first parameter is the field's name, id or label text.
The string "#user_email" represents a css-selector. This is why it works in find but not fill_in.
For fill_in to work, you need to just pass in the id value - ie just "user_email".
within("#login_form"){ fill_in("user_email", with: "foo#example.com")}
you can do find("#user_email").set "foo#example.com". See answer https://stackoverflow.com/a/8544650/3163914
if it is an autocomplete field, you can use this:
def fill_in_autocomplete(id, value)
page.execute_script("document.getElementById('#{id}').setAttribute('value', '#{value}');")
end
I need some advice how is a recommended way to handle Twitter Bootstrap fields with Thymeleaf. I know that recommendations are not so easy, so I wrote my thoughts about it and hope you can comment it. At the end there a some concrete questions.
First I tried a fragment which shows what is needed to generate
<div th:fragment="textfield">
<div class="control-group"
th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName
</label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
which can be used with
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag">
<label class="control-label replace">Benutzer-Id</label>
<div class="controls replace">
<input type="text" value=""/>
</div>
</div>
or in short
<div class="control-group replace" th:include="templates::textfield" th:with="fId='userId'" th:remove="tag"/>
It's not very flexible about the input, so you need for a checkbox an own fragment.
Next I choose the layout-approach:
<div layout:fragment="bsfield">
<div class="control-group" th:classappend="${#fields.hasErrors('__${fId}__')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.__${fId}__}+':'">
FirstName </label>
<div class="controls">
<span layout:fragment="bsinput" th:remove="tag">
<input type="text" class="replace" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</span>
<span class="help-inline" th:if="${#fields.hasErrors('__${fId}__')}"
th:errors="*{__${fId}__}"></span>
</div>
</div>
</div>
Which is very flexible because I can define my input directly.
I can use it shortly with
<div layout:include="templates::bsfield" th:with="fId='firstName'" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
or more prototype style
<div class="control-group" layout:include="templates::bsfield" th:with="fId='lastName'" th:remove="tag">
<label class="control-label" th:remove="all">Last Name</label>
<div class="controls" th:remove="tag">
<div layout:fragment="bsinput">
<input type="text" th:field="*{__${fId}__}" th:disabled="${disabled}"/>
</div>
</div>
</div>
Both variants has still a lot of boilerplate. So I think about the following solution inspired by Playframework helper.
<input type="text" th:bsfield="firstName" th:disabled="${disabled}"/>
and writing a Processor which creates
<div class="control-group"
th:classappend="${#fields.hasErrors('${fId}')}? 'error'">
<label class="control-label" th:for="${fId}"
th:text="#{model.__*{class.simpleName}__.${fId}}+':'">
FirstName </label>
<div class="controls">
<input type="text" th:class="${inputclass}" th:field="*{${fId}}" th:disabled="${disabled}"/>
<span class="help-inline" th:if="${#fields.hasErrors('${fId}')}"
th:errors="*{${fId}}"></span>
</div>
</div>
and replace ${fId} with the value of bsfield in this example "firstname". After that Thymeleaf should recompute it (setRecomputeProcessorsImmediately (true);) For the prototype I think it's necessary to write a JS-Solution.
I'm unsure if this is really clever or a misuse of Processors. Furthermore I'm unsure how much time a beginner need to write such a processor. Are 4 hours realistic or more a few days?
Would appreciate if someone can give me a hint.
In the meantime I did it. As a beginner you must calculate 4-8 hours, without JUnit tests (it looks difficult to test processors) and DTD and editor-support. The most problems I had was that it's difficult to reuse an existing node after changing attributes. Here it's better to clone it.
Next time I think I can do it in 1 or 2 hours.
The experience is very good, you have clean and short code. With the JS-File you don't lose the prototyping experience.