Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

Custom Email Form


Reply


1168 Views

Avatar
andria

Community Member, 7 Posts

22 October 2009 at 12:08pm

Hello,

I made a custom email form that I output in my homepage page type
in order for users to subscribe to a newsletter.
The problem is I want the submit button to be an image which I have it
uploaded in my theme images folder. I made the necessary class 'Eform'
in the form.css stylesheet and put the class in the div where the form
is supposed to appear in homepage.ss, but the submit button refuses
to appear as the image defined in the class 'Eform' as background.
Ca somebody help me out please?

***HomePage.php***
class HomePage_Controller extends Page_Controller {

private $defaultGroupID = 4;

function EmailForm() {
return new Form($this, "EmailForm", new FieldSet(

         // List your fields here
         new EmailField("Email", "Email address")

      ), new FieldSet(

         // List the action buttons here
         new FormAction("SignupAction", "Sign up")
         

      ), new RequiredFields("Email"));
      addExtraClass('EForm');
   }

/**
   * This function is called when the user submits the form.
   */
   function SignupAction($data, $form) {

      // Create a new Member object and load the form data into it
      $member = new Member();
      $form->saveInto($member);

      // Write it to the database. This needs to happen before we add it to a group
      $member->write();

      // Add the member to group. (Check if it exists first)
      if($group = DataObject::get_one('Group', "ID = $this->defaultGroupID")) {

         $member->Groups()->add($group);
         // Redirect to a page thanking people for registering
         Director::redirect('thanks-for-registering/');

      }else{

         // Redirect to a failure page
         Director::redirect('registration-failed/');

      }

   }

   
}

***HomePage.ss*** from Layout folder
<div id="Newsletter">
          <div id="Newsletterform" class="Eform">
          $EmailForm
          </div>
          </div>      

***form.css***
.Eform input.action {
   padding: 2px;
   background: ../images/submit-button.png;
   width: 35px;
   height: 35px;
   text-indent: -999em;
   border: none;
   display:block;
}
.Eform input.action:hover,
.Eform input.action:focus {
   cursor: pointer;
}

Have a nice day!