I'm Trying to create custom contact form in Joomla 3 , the reason is I didn't found such big contact form.
Can somebody tell me how to do it ?
html:
<div class="col-lg-12">
<form role="form" method="POST" style="margin-top: 2.7em;" action="">
<div class="row">
<div class="form-group col-lg-4">
<label for="input1">Name</label>
<input type="text" name="contact_name" class="form-control" id="input1">
</div>
<div class="form-group col-lg-4">
<label for="input2">Mail</label>
<input type="email" name="contact_email" class="form-control" id="input2">
</div>
<div class="form-group col-lg-4">
<label for="input3">Phone</label>
<input type="phone" name="contact_phone" class="form-control" id="input3">
</div>
<div class="form-group col-lg-4">
<label for="input1">Dropdown</label>
<select class="form-control" name="bud">
<option value="a">parterowy</option>
<option value="b">piętrowy</option>
<option value="c">bliźniak</option>
<option value="c">mieszkalny</option>
<option value="c">niemieszkalny</option>
</select>
</div>
<div class="form-group col-lg-4">
<label for="input2">Size</label>
<input type="email" name="contact_email" class="form-control" id="input2">
</div>
<div class="form-group col-lg-4">
<label for="input3">Garage</label>
<select class="form-control" name="garaz">
<option value="a">wolnostojący</option>
<option value="b">w budynku</option>
<option value="c">jednostanowiskowy</option>
<option value="c">wielostanowiskowy</option>
</select>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12">
<label for="input4">Msg</label>
<textarea name="contact_message" class="form-control" rows="6"id="input4"></textarea>
</div>
<div class="form-group col-lg-12">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
Fiddle to html
I read that i need to create custom component or rebuild other, which one is better option ?
You could use Chronoforms component to create virtually any form you like.
If you need some very special custom output, you can first use the included form bulider to set up the closest approximation and modify it as you like.
As you have already made the html part, the easier way is to implement your code in a custom module or for a more advanced result in a custom component.
The official joomla way for adding extra fields to contact form is by creting a custom plugin.
If you want a commercial solution (component) I would suggest you to use breezingforms.
Hope this helps
Related
I am not able to dynamically set required attribute to input fields
My form's required attribute has to change dynamically based on a radio button field.
This is how the form looks when the radio button is set as wants to join screenshot. and when radio button is set as member/alumnus the form looks like this screenshot
I am not able to dynamically switch the required attribute for input fields in respective forms.
This is the code for contact and DOB field if new Member is checked
<label class="control-label is-imp"></label>
<div class="input-group">
<input type="radio" ng-model="joinFormData.joinType" value="wantsToJoin">I Want to join as member
<input type="radio" ng-model="joinFormData.joinType" value="alreadyMember">I am a member/alumnus
</div>
</div>
<div class="form-group no-pad-left" ng-if="joinFormData.joinType == 'wantsToJoin'">
<div class="nss-only" ng-if="clubType == 'NSS'">
<div class="form-group col-md-12 no-pad-left no-pad-right">
<div class="col-md-6 no-pad-left">
<label class="control-label is-imp">Contact:</label>
<input
type="text" class="form-control" id="body_contact"
name="body_contact" ng-model="joinFormData.contact" placeholder="1234567890" ng-pattern="/^[0-9]{10}$/" ng-minlength="10" ng-maxlength="10" integer [ng-required]="joinFormData.joinType == 'wantsToJoin'">
<span ng-show="joinForm.body_contact.$error.$invalid || joinForm.body_contact.$error.pattern"><span class = "red-color">Enter a valid number!</span></span>
</div>
<div class="col-md-6 no-pad-right">
<label class="control-label is-imp">DOB:</label>
<input
type="date" class="form-control" id="body_dob"
name="body_dob" ng-model="joinFormData.dob"
required ng-maxlength="100" required>
<span ng-show="joinForm.body_dob.$error.required && joinForm.body_dob.$touched"><span class="red-color">Required!</span></span>
</div>
</div> </div> </div>
This is the code for select type field if Member/ Alumnus is checked
<div class="form-group col-md-12 no-pad-left no-pad-right">
<div class="col-md-6 no-pad-left" ng-if="joinFormData.joinType == 'alreadyMember'">
<label class="control-label is-imp">I am already a member/alumnus:</label>
<div class="input-group">
<select ng-model="joinFormData.memberType"
class="form-control selectpicker" [required]="joinFormData.joinType == 'alreadyMember'" name="body_type">
<option value="" selected disabled>Select Type</option>
<option value="member">Member</option>
<option value="alumni">Alumni</option>
</select>
<!-- <span ng-if="!joinForm.body_type.$valid && joinForm.body_type.$touched"><span class="red-color">Required!</span></span> -->
</div>
</div></div>
I tried using [required]="joinFormData.joinType == 'alreadyMember'" conditions but that didn't work.
Kindly help me out. I am not able to figure out the mistake as i am new to angular
I am setting up a blog and have a contact form page (standard bootstrap blog template)
I have everything uploaded onto my host - hostgator, but I can't manage to get the contact form to send an email out properly.
I have tried both an external email account and an account on the same domain name with no luck.
Here is the original html source for the contact page from bootstrap: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/contact.html
and the original source for the contact_me.php: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/mail/contact_me.php
Is there a setting I need to change from the hostgator cpanel or something in the code I'm missing?
Edit: Here is my domain if you want to view the source I have in place:
www.decentralizeblog.com
I have made bit changes to the form
you have not used certain attributes in your form
link method, action and name attribute in text field
<form name="sentMessage" id="contactForm" action="mailer.php" method="post" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" name="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" name="phone" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
This may not be a problem with your code, have you checked that your hostgator plan supports the php mail() function? Some plans (I know from experience) have this disabled as an incentive for you to upgrade.
Hope this helps.
I want to use the userId in the session... to be able to save the users firstname and everything...
I am trying in vein to use models.add("users."+userId) in vein....
app.proto.editUser = function(){
var userId = this.model.get('_page.userId');
//I get d0514d00-da58-3074-b013-e075a772740c
console.log(userId);
this.model.add('users.'+userId,{
'firstName':this.model.get('_page.firstName'),
'lastName':this.model.get('_page.lastName')
});
var user = this.model.at('users.'+userId);
this.model.set('users.'+userId+'.firstName', this.model.get('_page.firstName'));
}
That does try to set the firstName twice, but neither work even with the other commented out.... I usually get errors about rolling back.
HTML:
<index:>
<h2>Account Information</h2><br/>
User Id: {{_page.userId}}<br/>
First Name: {{_page.firstName}}<br/>
Last Name: {{_page.lastName}}<br/>
<br/>
<form class="form-horizontal" on-submit="editUser()">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="inputFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" value="{{_page.firstName}}" class="form-control" id="inputFirstName" placeholder="First Name">
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="inputLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" value="{{_page.lastName}}" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="inputGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<select class="form-control" id="inputGender" name="gender">
<option value="none">None</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="inputAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="inputAge" placeholder="Age">
</div>
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</div>
</form>
The error tends to be:
Op error: Operation invalid in projected collection users d0514d00-....
Everyone else seems to be doing it the same way I thought... Also do I always need to check if one exists and only use add if it does?
This is all in derby0.6
It seems that "users" might be a key collection that is reserved or something by user-login. Though I don't see it in the collections on my local database.
Using "cusers" works fine. I used the following:
this.model.add('cusers',{
id: userId,
firstName: this.model.get('_page.firstName'),
lastName: this.model.get('_page.lastName')
// "userId":userId
});
id allows to make the _id property match; however, I don't think this is the right way.
i'm using camunda 7.2
In my process i have two user tasks (the first one a simple form to insert data, and the second one to show the same form readonly).
I'm using embedded forms.
I have the following form but i have a problem: using the ng-if directive i don't able to instantiate process variable, while if i use ng-show it works.
<form role="form" name="form" cam-form class="form-horizontal">
<div ng-if="typeRequest == 'firstCase'">
<h4 class="text-center">title</h4>
<!-- Oggetto -->
<div class="form-group">
<label for="oggetto" class="col-sm-4 control-label">Oggetto:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="oggetto" cam-variable-name="oggetto" cam-variable-type="String" required="required">
</div>
</div>
<!-- Nota descrittiva -->
<div class="form-group">
<label for="notadescrittiva" class="col-sm-4 control-label">Nota descrittiva:</label>
<div class="col-sm-8">
<textarea class="form-control" rows="3" id="notadescrittiva" cam-variable-name="notaDescrittiva" cam-variable-type="String"></textarea>
</div>
</div>
<!-- Data -->
<div class="form-group">
<label for="data" class="col-sm-4 control-label">Data:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="data" cam-variable-name="data" cam-variable-type="String" required="required">
</div>
</div>
<!-- Indirizzo -->
<div class="form-group">
<label for="indirizzorichiesta" class="col-sm-4 control-label">Indirizzo:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="indirizzorichiesta" cam-variable-name="indirizzo" cam-variable-type="String" required="required">
</div>
</div>
</div>
Please, any idea?
Thanks in advance
I think this is because ng-if does not renders anything in the DOM.
You probably should use ng-show instead.
I have form which contains some fields and have validated these fields by using angular.validator. The error messages are displayed under every fields. But I want to display this error messages using tooltip. For example , if some particular field is not valid , the error message should be shown on the right of the field box. I didn't found a solution from other posts of stackoverflow. How to do this ?
I want to show this field is required in a tooltip. ( by making directive) .
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Contact No</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.contactNo" validator="[required, number]" class="form-control" id="" placeholder="" validation-message="Only numeric values are valid!">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Profile Picture</label>
<div class="col-sm-8 companyLogo"> <img src="assets/img/user.png" alt="..." class="img-rounded col-sm-3 ">
<input type="file" id="exampleInputFile" ng-model="proFormSubmit.profilePic">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Language</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.language" validator="[required]">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 1</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address1" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Address 2</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.address2" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">City</label>
<div class="col-sm-8">
<input type="text" ng-model="proFormSubmit.city" validator="[required]" class="form-control" id="" placeholder="">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">State</label>
<div class="col-sm-8">
<select class="form-control" ng-model="proFormSubmit.state" validator="[required]">
<option></option>
<option value="Indonesia">Tamilnadu</option>
<option value="Indonesia">Kerala</option>
<option value="Indonesia">Rajasthan</option>
</select>
</div>
</div>
I use http://angular-ui.github.io/bootstrap which has a $tooltipProvider that allows you to modify behavior of the tooltip. Other than that this seems like a CSS + ng-show candidate